12DTI - Jared Thornton

[12dtijared-blog]

90349 Evaluation

90349 Evaluation The brief: To create an iteration in processing that will be added to the Wellington High School iPad application. The brief's core is vague, and I added a few of my own specifications regarding my own project. I wanted my iteration to be unique; there's not much point of similar iterations on the app.  I also wanted my iteration to be fun and teach the user/player something, to reflect that Wellington High School is an institution of learning. On top of all this, I wated my iteration to showcase an aspect of the school.

Project Strategy: My development and project strategy was fairly straight forward; use inspiration for a subject field of my choice combined with processing iteration research to design a creative piece of coding that meets the brief. The design process would be used at all stages of development.

Stage 0.1 - Learning: The first part in this project involved learning processing, none of us in the class had done it before. I had done some Action Script before, so I had a rough idea about the structure and way in which processing operates. Nonetheless, it was still a learning curve with a lot of skill and Java discrepancies to understand. I found functions, if statements and variables relatively straight forward. Arrays, forloops and classes took much longer to understand. Mr Hawkings careful and menticulous explaining ensured this part of the project went fairly smoothly. Alot of the small practise exercises I did hear were extremely useful in working on my final iteration.

Stage 0.2 - Research and Manipulation: After skills in processing had progressed, we moved on to general research on the possibilities and opportunities achievable. This was done through OpenProcessing.org, which contains a massives database of iterations made by people around the world. Viewing what people had done and how they had done it unleashed the inner creativity and expanded the horizons of our potential. Having some time to play around with other people's code, modifying and disecting it helped enormously with understanding for future stages.

Stage 0.3 - Planning: After the expose of general research, I then went into a stage of more specific planning. Fairly early on I decided to do something Mathematics or Chemistry based, in accordance with the brief. I'd seen a large variety of different iterations styles, genres and designs from which to create a platform concept. Using all of this, I came up with a chemistry concept almost like a mixture of pong and tetris.

Stage 0.4 - Content Research: This was possibly the easiest part of the project, deciding on the type of chemistry content for my iteration. This was merely a case of selecting how many types of falling objects to have, which elements and compounds would be chosen and the mannersims of the code engine. I did discuss briefly with my chemistry teacher some ideas, and she was enormous help. I eventually decided to keep it simple with Molecules, Ions and Compunds I decided fairly on my iteration would be a game style, so that it could be both fun and educational.

Stage 0.5 - Engine Development: This was by far the longest stage of development. It encompassed most of the projects actual implimentation, writing all the code and creating all the graphical content. The task at hand was somewhat greater than my ability, so a friend and expert (Bryden) gave me a hand with this part of the project. I used some previous work as a base for the code, and we took off from there. The hardest parts were creating the object arrays and movement (redrawing) forloops. Fortunately Bryden was exceptionally good at those, and we didn't run into any trouble. Some problems were encountered, like the graphical overlap issues and screen control. Transperancy and resizing solved the graphical issues, and a well-placed boolean fixed the menu screen changing through multiple cycles at once. Most issues encountered were minor, and due dilligence resolved them. This part of the project can be broken down into a multitude of segments; Array creation, Infobar Creation, Graphical Addition, Menu Creation etc.

Stage 0.6 - Refinement: This was the part of the project where bits and peices are cleaned up and feedback is obtained. I re-organised the variables, tidied the methods and added comments, ensuring the code was easy to read. After aquiring some feedback from Finn and Justin, I made some minor tweaks to improve overall gameplay experience. Finn said you should be able to see what score you got after you lost, and that was straight forward to add. Justin said the changes between object catchment weren't noticeable enough, so I made a more obvious screen change. Refinement was a simple part of the project, but completely necessary to improve the quality and usability of my iteration.

Skill Statement: This has been an ambitious project, a large selection of fairly new skills across the board had to be learned. Programming style and Java ideaologies have been the main skill content I've atained, with some skills in code ordinance as well. I feel as though through this project, I've really had the opportunity to improve a whole range of non-coding skills as well. Planning and Research in particular are things I've been able to work on a lot.

Closing Statement: This project has been immense fun and allowed expression of creativity through code in a controlled and realistic environment. The opportunity to create something for a purpose beyond school has been a well worth while experience, and I look forward to such things in the future. I'd like to thank especially Bryden, for all his expert help. Finn and Justin were also extremely kind to do testing and give me feedback.

[12dtijared-blog]

Class Reflection

What I've enjoyed

The opportunity to develop my creativity skills

Learning about the processes used to turn inspiration into innovation

The relaxed and open learning environment

My favourite standard was 90368, the front page design. That was an opportunity to really develop and show my visual creativity skills. At first I found it hard, but as my innovative skills improved I really enjoyed it. 

[12dtijared-blog]

Front Page 90368 Evaluation

Evaluation

The brief: This was a very open project, the image design only had several constraints;

Must be iPad screen size

Must have a 3D-Walkthrough button and a Gallery button

Upon understanding the exact nature of the project, I decided to add a few specifications of my own. Since the whole purpose of the iPad application project was to showcase the school, I wanted to make sure different aspects ideas and views of Wellington High School were reflected in the appearance of my designs.  I also wanted to ensure the name of the school was involved, and in a way which tied in to the other elements.

Development Strategy: Using my prior experience in Design Technology in planning, I decided to follow the tried and true design process. But rather than actively researching usuable ideas for school based designs, I would let my everyday school experience draw out its own influences and inspirations. Fortunately, it worked.

Refinement Strategy: My refinement strategy is fundamentally the same as the strategy I used last year in 11 DTI. At key milestones in my concept development, the design would be evaluated by comparisons with the brief and heavily scrutinised for flaws and issues. If any uncertainty remained, second-degree client consultation with Mr Hawking would take place.

Phase 1 - Early: At first, things didn't go very well. I struggled to transform the inspirations I was drawing from around me into solid ideas and concepts. For instance, my very first idea involved chemical models arranged in a geometric shape over a gradient-coloured background. But it didn't work, and wasn't well thought out. It was at this point I realised you had to put images into a contextual situation, you couldn't just add some effects and throw them together.

Phase 2: The mistakes of phase 1 lead me to begin thinking more actively about contextualising ideas and concepts into more viable solutions. My initial inspiration, came from the large number of screens everywhere. Screens in the computer labs, in the foyer, above block doors. But screens is not a concept, it required an assimilation into something more. I then thought of the massive banks of screens you see in security centres, and came up with the idea of combining different screen sets together to create a sort of collage. Then, in compliance with the brief I placed selected images on the screens to show and represent the various aspects of the school. Several stages of refinement were required (more so than my other concepts). See the Refinement Strategy.

Phase 3: Whilst my skill set has greatly improved after the failures of phase 1, it wasn't untill after the completion of series 2 that I got a firm understanding of contextualisation. I'd noticed the large lithograph prints of the old technical college brought out for the reunion one morning, and decided to use this as inspiration. I then had to find a way to make old images fit into a relavant design; the answer was newspapers. Using an old newspaper image about the Titanic as a base, I heavily modified it suit the purpose and added images from the lithographs. To give it even more of a relevant touch, I aquired some modern images and ran a desaturation filter over them. The result was a design that flowed and looked sharp, representing the history of the school and it's current and past ideals.

Phase 4: Phase 4 would be the creation of my final design, series 4. I'd seen some impressive pictures of physics-maths overlays pinned to the back of my mathematics classroom, and began creating concepts based around these. The pictures had mathematical drawings layered over them, so it seemed feasible to transform this concept into one that fitted the situation. I found a good picture of one of the school buildings, which was dynamic enough for my purpose. Using my understanding of trigonometry and calculus, I created some realistic equation, formulae and diagram overlays for the image.

Phase 5: At this point, I had mostly completed the foundations of my designs and set about to refine and improve them. This section of the process was all about adding the finishing touches, to complete my designs and enhance what I'd done so far. At this point I added things like a date to the newspaper (1886 was the founding year of the school) and title to the pseudo-articles in the backround (interesting events of 1886). I added oppacity to school building picture, to highlight the mathematics and reinforce the sub analytical ideas of the design. I changed the fonts on the screens, to better showcase the style of the school and the creativity it stands for.

Evaluation of design: In tems of qualitative comparison of work, I have my preffered design outcomes. Whilst my design series 2 (Screen banks) looks alright and suitable, it does not flow together as one image in the way that series 3 does (newspaper). Series 4 (math overlay) has a sharp look to it, but without the themed images of the other designs I feel it lacks a certain quality of showcase. Series 3 is clear and concise, the image quality is fairy high and the layout is the best thought-out of all my designs. It meets the specifications of the brief to a higher standard than the others, and it is my favourite.

Skill Statement: I feel this project greatly improved my skill set. I was expecting to only improve my GIMP image skills from this project, but I believe I got alot more out of it. This journey has delved into alot more than just image manipulation, and a great deal about time management and good design has been learned. In particular, the process of turning the influences and inspirations we draw from around us into good conceptual ideas for a purpose. Since time was fairly short, it was imperative that I managed it correctly in this project. This really forced me to improve my planning skills, and to partition and prioritise my time.

Acknowledgements: Finn and Isaac have be instrumental to my Front Page design completion. They've been in essence, an extension of the feedback and advice part of development. If I needed any advice when weighing up the options, they would be able to offer useful insight and suggestions.

Problems Encountered: Fortunately, this project has largely been without issues and problems. I've only meandered across the occasional trouble, and it has usually proven to be a quick fix. For instance, there were quite a few tone and texture issues with series 3 at first. Because the base image was from a newspaper, it had heavy old-style texturing. Modifying images and text into it interferred with this, and it wouldn't blend properly. Initially I tried coping and pasting textured areas to smooth the edges, but you could then see tone differences. After discovering the true potential of the blur and smudge tools, this was an easy fix. 

Closing Statement One of the most interesting things I've learned from all this is that aquiring inspiration from what is happening around us it not difficult. The hardest part of any design and innovation is implimenting it correctly, and making those ideas suitable and relevant to the task at hand. This project has been an excellent test of aptitude in implimenting resouces for aesthetic design as well as a learning curve around planning and development, I know myself and all the other students (team members) working on this standard have come a long way as innovators for good design.

[12dtijared-blog]

We've recently recieved some technical feedback from Melby, the man behind the application code. Previously, a button was pressed to change skins. Now, only a control appendage manipulation is required (a sliding of the finger). All the setting/themes/skins buttons now have to be removed, this shouldn't be hard. In all my instances, it shouldn't disrupt the appearance of the skin.

[12dtijared-blog]

I've had two different people test my iteration/game, and both have offered feedback that I've used for improvements.

Finn has now played it numerous times, and suggested a way to see your score after you lose (so you're not wondering how well you did right at the end). This was an easy fix, I just added a text line to the lose screen, with an output from the score variable.

Justin then played my game, and remarked it was too difficult to tell when the type of object you're supposed to be catching changes. This was also fairly easy, I just made the screen flash black and fade back to white take longer. I did that by altering the background colour variable (bgc) at a slow rate each draw sequence.

[12dtijared-blog]

This is my finished design from series 3 (AB). 

Design and Inspiration

The inspiration for this came from the WHS reunion lithographs, old black and white pictures of the old school. This inspired me to create a old fashioned style front page design that showcased the unique history of this establishment. I then had to find a way to integrate old images into a design that made it contextual, as opposed to a collection of images. I had seen some old newspapers recently, and decided I could integrate the two concepts to create something different. 

[12dtijared-blog]

Overview 90349 90368:

Done last week:

Difficulty Engine for Iteration Completed

Last Front Page design almost finished

To do this week:

Evaluations for both standards

Code documentation

Documentation for last front page design

[12dtijared-blog]

This is one of my nearly finished front page designs. The images are sourced from various places, such as the web and lithographs around the school. I've tried to choose a mixture of different images to make a more dynamic image, including integrating newer images by desaturating them to age appearance.

The layout is from a old fashioned newspaper image (web source).

[12dtijared-blog]

Code cleanup;

All the initial variable declarations have been organised by type and function. It's much easier to look at them now, they were a mess before (there's so many).

[12dtijared-blog]

I've added a difficulty option to my iteration, which adds a new element and dynamic to the game. There are four difficulty options, Easy/Moderate/Hard/Megahard. The different option change the rate at which the falling objects increase speed. Ie, on easy at score 90 they're falling about the same speed as on Megahard at score 25.

It was not that difficult to do, however in order to impliment it I had to create quite a few new variables. There's the variable for the difficulty expressed as an integer, as a string and three integers for the fill colours of the difficulty text.

[12dtijared-blog]

Overview:

Done during the holidays:

Last Front Page Design completed

Programming Code Engine completed

To do this week:

Front page

Complete second (middle) front page design by adding the missing images

Complete all 90368 Documentation

Write Evaluation (Problems encountered, favorite one, development process, brief)

Coding/Processing

Complete all documentation for Coding engine development

 Improve difficulty devices and GUI

Obtain feedback and modify as appropriate

Write Evaluation (Description of Process, Problems Encountered, Ideas, Conclusion of learning)

All of 18241 has been completed and I have passed.

[12dtijared-blog]

I've created an image in GIMP which now appears as part of the main menu. It appears that there are multiple images and text lines on  the main screen, but that's just an illusion. In reality that's all one image, with transperancy. Doing that has saved alot of time and a fair few lines of code, as only one image has to be drawn for a majority of the main page.

The title is done with code though, and I had a bit of trouble getting the size to work correctly at first. It took me awhile to realise the font size is controlled procedurally and there is no need for large numbers of text variables.

The next step now is to add difficulty and get some feedback.

[12dtijared-blog]

Menu Screen

A rudimentary main menu screen has just been added. At the moment it's just a gray screen with the name of the game on it, but I hope to add some images and text to it for information and visual appeal.

As for the coding project as a whole, it's largely done now. The engine code has pretty much all been finished, it's just down to adding in the final features before gathering feedback. Bryden's finished helping me, and he's been incredibly helpful with the array an forloop stuff I was unfamiliar with. I've learnt alot from him, and thank him for his time.

[12dtijared-blog]

I've created all the graphics, and an array is used to assign the images of the molecules to the falling objects each time they're moved (redrawn). To keep the game dynmaic, and so that it actually teaches you something, there are multiple types of compounds ions and molecules. This way a broader definition of each types becomes associated with the type in the player's mind, reinforcing the chemistry ideas.

There's a fairly big problem with the images, in that they over lap and mask over the beaker because of image whitespace. Changing the drawing order improves the situation, but is nothing more than a quick fix. I think I'm going to have to create transperancy in all the images, in which case it is fortunate processing supports .png files. Another issue with the graphics is the collision detection. Becasue it's done through a forloop, it's checking the same size for all the images, which they are not. This can either be fixed with more arrays or a universal object size. To keep the code clean and simple, I'm going with a universal size (this is also alot easier!).

[12dtijared-blog]

An infobar along the side has now been added. It tells the player their score, the objects they're supposed to be catching and the number of lives they have left (it will also include the game difficulty which I will add later).  At first it was difficult to get the hearts for the lives to draw properly, but Bryden made it work with a subtracting if statement inside a forloop (Clever).

There's now a band of area the beaker cannot move into which is the infobar line. However, becuase collisions are detected by the x co-ordinate of the mouse, it is possible to move the mouse into the infobar and avoid catching anything. This will be left in intentionally, it acts as a crude way of pausing the game and allows players to tactically retreat and wait if they chose. Fortunately the game's score model is catch-score based as opposed to my original idea of time based; this suits the circumstances much better.

Next step is to make a main menu screen, and add a difficulty system. Some code cleanup may be required. After that, it's on to testing.

[12dtijared-blog]

The code has now been split into a few different methods after initiation. This is to keep it cleaner, and allow for multiple screens to be used (A menu screen, a in-game screen and a lose screen). A mouse click on the lose screen currently restarts the game. Originally I wasn't going to bother with screens, but Bryden convinced me it is worth the extra effort, and will allow a proper tutorial as well as a way to modify difficulty.

Bryden incorporated a clever way to make the game get gradually harder. Part of a forloop which controls redraw down (fall speed) has the score variable involved. As your score increases, the objects fall faster. This is a simple and effective way to make the game more fun and challenging.

At first I couldn't get the reset() methods to work, but Bryden pointed out the variables and arrays had to be redefined here in order to keep things working.

Some of the new variables include one for background, so it can easily be changed for different screens. There's also a lives variable, if you catch the wrong object type you lose a life (you start off with 10). This is something I have to make a simple graphic for when it comes around to making the infobar.

[12dtijared-blog]

Object size and transperancy have been fixed, things are running much smoother now.As a minor side effects the molecules with multiple atoms appear much bigger than the single atom molecules, which is extremely unrealistic. However, this is not a major issue at the moment and not worth changing. The code has had a few minor changes to accomodate better functioning of object types.