So today was the start of the the new project with Springfield Junior School, not animation, not game design but web apps. The projects we have done in the past were great but we wanted to do something bang up to date. The school is very fortunate in that it has a few iPads for the students to use and I make apps all the times  so I thought why not make some apps.  Today was all about introductions and brainstorming dividing the 12 8 to 9-year-olds in to three groups it soon became quite apparent that they already had a good idea of what they want to make and they soon set to work.

We have five weeks to make three web apps and they already have their ideas in place, next week we will look at interface design and start to draw the buttons and the screens for the apps. The ideas are great but you’ll have to wait to see them. It was interesting that they all wanted them to be social apps or at least involve more than one person participating.

I was recently asked to take on a (15-year-old) student for programming by a family friend so I decided the best place to start was Processing. I need to say this right now before I get emails, tweets and various comments, this isn’t the best code in the world as it was gradually built upon and when we started we had no idea what we were going to make. It was a brilliant day and I think he learned quite a lot. Although he knows a fair bit about computers, he runs his own “Minecraft” server and a bit about HTML he hadn’t done any programming like this before.

We started with variables.

int XPOS,YPOS;

and moved on to arrays, multi-dimension arrays, then to booleans and so on.

We then learnt how to draw

//Makes background black
background(0);
//Makes the drawing colour white
stroke(255);
//Fills in shapes with the colour white
fill(255);

//Draws a nice box
line (10,10,290,10);
line (290,10,290,290);
line (290,290,10,290);
line (10,290,10,10);

Gradually the plan moved to turning the box into a grid and the plan was to make a TIC TAC TOE game. We then moved on to “for” loops and loops within loops and then functions. This function clears the board.

void clearBoard(){
for (YPOS=0; YPOS<3; YPOS++){
for (XPOS=0; XPOS<3; XPOS++){
BOARD[YPOS][XPOS]=0;
WIN=false;
}
}
}

We also covered conditionals i.e. ifs and else ifs, this checks for the reset button press.

if (mouseX > 76 && mouseX<223 && mouseY> 322 && mouseY <400){
clearBoard();
}

All in all it was a good four hours of tutoring and I think he was amazed at how these little blocks of code can be put together, you can see the code here and the full .zip file with all the assets here.  We plan to finish the game next Friday, this code does look and finds a winner it just doesn’t do anything with that information yet. We will also try and make it into a web app if possible, well see.

Over the last two days I have been fortunate to have been working with Rewired State and and the Greater London Authority (GLA) at City Hall. We have been creating new and interesting ways to engage the public with the data they collect / collate. It was a new and bold iniative for the GLA to take, but the rewards became apparent as soon as the developers revealed what they were able to create over course of the two days.

It was nice to work with a group of people who are very passionate about the work they do, the GLA staff were helpful, friendly and polite at every stage. Opening up your work place to a group of “hackers” can sound a bit risky but all of the developers/designers brought in by Rewired State soon proved their worth. Tearing through .xls spreadsheets that were too big in some cases to be opened by some software/hardware combinations, the hackers were able to look at the data with a fresh approach, not only to its use but also its possible future collection.

For the event I put one forward one hack on my own and one with Josh Pickett  @lordjawsh on Twitter.

Tree-o-pets

Tree-o-pets was a mobile phone app which allowed users to plant virtual trees using GPS and Augmented Reality. The premise is a simple one you take your phone to a place you want to plant a tree, plant it and return to care for it, you could also share your plants location via Facebook and Twitter. You had to take care of your tree as anyone logging on to the webpage or in to the app could see it’s owner and how well you care for it. The initial data was based on where Mayor Boris Johnson plans to plant his future trees.

Your Journey

I wanted to create a way to explain and to get people to engage with the data the GLA have on various environmental topics.

Your Journey was a 90 second video game on the iPhone which provided as snapshot of the postcode you gave it.

As “Boris” you cycle through the city, collecting rubbish, avoiding potholes and caring for the specially planted “Boris Trees”. The data from the GLA was used to piece together how many trees and how many recycling bins you saw in you 90 second journey. The clouds were coloured and calculated by the air quality data, notable public buildings which the GLA had power consumption date on were also pointed out to you on your journey.

It was lovely to take part it, was also nice to win an award for “Your Journey” for “Most Innovative Use of Environmental Data”. There were some excellent other projects with “100ktrees.com” coming up top trumps literally in the overall best prize. “Got Wood?” was also great social app helping you locate your nearest tree and “check in”. It was a long two days for me commuting from Ipswich and working til very late but it was worth it.

Well done Adam McGreggor @adamamyl and Emma Mulqueeny @hubmum for organising another great and successful event and well done for GLA for taking those bold first steps to opening up the vast amounts of data they have. There were some interesting and useful points very raised by the “hackers” which will hopefully benefit GLA further in their future work.

It was also very nice to work at City Hall.

Today was the final session of the animation group, last week they worked really hard at making all the characters for their scenes today was all about using the animation skills they had learnt throughout the five week course.

Today was run a bit different and for the best, instead of all 12 at once I had one group at a time for 20-25 minutes in which time they had to animate and narrate their clip.

Below is the end result I hope you enjoy it, they were a great bunch of students to work with and they learnt, applied and achieved so much.

I love the fact that when we the student where making Scene three the student realised to make a good fire he needed to make multiple drawing of fires “like what we did with the panels on the robot, we will have to keep swapping them out”.

I love the fact that they were so confident in animating they even added little touches in the background look out for a rabbit in the forest, a mouse on the fire place, look out for the axe being raised as the wolf is chased.

I love the fact that while we were animating one of the boys parents came in to see him complete the work and told me “this is all he has been on about, these lessons, he tells me how different cartoons are made, he loves it, he has been showing everyone in family the other video helped make on the internet”.

How we did it. The course took place over five weeks.

Week one was Silhouette animation and cut out animation we looked at works by Lotte Reigner and watched Charlie and Lola respectively. We also animated a cut-out robot and built a Thaumatrope.

Week two was stop-frame animation we looked at Shaun the Sheep, Trap Door, Morph, Bob the Builder we also made egg box characters and animated them.

Week three was cel-frame animation we looked at Phineas and Ferb, compared first series Spongebob Sqaurepants (cel-frame) to later series 6 (cel shaded animation), we also made Zoetropes.

Week four we planned out the scenes for Red Riding Hood and made all the characters in the cut-out style and stored them together.

Week five we animated and narrated.

I then took all the footage and audio home and edited it and shazam! A masterpiece. It was a great project and I look forward to running simiar workshops with other schools in the future. Be sure to follow me on twitter @pixelh8

Today was the last session for group 2; they were a group of 12 year 3′s (7 year olds), six boys and six girls.

They did really well, in five sessions (approx 10 hours total) they were able to take a game from concept to complete game. 12 games in total were made.

I got there early today and had the completed games loaded up on the computers ready for them to play. It was wonderful to see them come in the room to discover their game had been compiled and was ready to play on. I let them play on the games that eachother had made and it was really good to hear them compliment one another on their work.

They were a wonderful group, it is still hard to believe they were seven when you think about how much they achieved (sketching the concept, writing the story, drawing the graphics, doing the level design, designing the box and even a short instruction manual).

It was nice to see that when I asked them who wanted to go on to make games as a job 8 out of 12 raise their hands, 5 boys and 3 girls which is fantastic. Five weeks a go they never thought they could even make a game and now their games will be presented to them in an achievement assembly in front of the whole school.

I am not sure of the exact numbers I’ll have to check it but I think I have now taught around 600 hundred kids to make games, by this estimate and by the time I get to Games Brittania in July I will be teaching my 1000th game designer! Be sure to check out the website as I will be running courses for both teachers and students to get involved in making games.

Today was the start of the students making their adaptation of “Little Red Riding Hood”. Some people may find it infuriating, but I found it amusing to find out that a huge change had been made in the way we were to make the animation. Originally as was the plan last week we were going to make 3D models of characters like we did in Week 2, however somewhere a long the line everyone had decided to change to cut-out animation and they did a fantastic job. (See picture)

Each group of students were given one of the four main scenes that makes up “Little red Riding Hood” to animate 1) Little Red Riding Hood leaving home, 2) Meeting the wolf, 3) Getting to the Grandothers House and 4) The Woodcutter scaring away the Wolf. I gave each group an image of the scene they were working on to remind them. Each individual student had a specific job, i.e. the background, making a wolf, or furniture in a scene. All the jobs were put on a list so everyone knew exactly what they were doing at every step and I could check their progress over the session.

They did it all, an impressive feat for a group of seven year olds (an impressive feat for any age), they made four scenes and all the objects that go in them ready to animate next week! Some really good work and I can’t wait to help them bring it to life. Next week it is all hands on deck as they need to both animate and narrate. I know they can do it, I just want them to be able to take their time, enjoy it and make work that they are proud of.

On the 29th of January, 2012 I was asked to be a judge at the Global Games Jam at University Campus Suffolk organised by the staff of the B.A. Games Design course. It was a great event and the ideas were top notch, making the judging quite difficult.

It was also nice to see some of my former students and see how they are progressing as designers and their keeness to point out their use of sound in their new creations. More info on the event can be found here and here with details of the winners.

I wish them all the best and look forward to working with them in the future.

Todays session was about “cel-frame” animation, again we looked at some examples of contemporary cartoons they know and love and then took to making our own animation loops based on a stick man running.

As the group is quite young i.e. 7-year-olds I had to make up 12 Zoetropes in preparation for the lesson, this was no easy or quick feat by any stretch of the imagination. It was however quite simply worth it, for the looks on their faces when they got to see their characters come to life. They sketched out their charcaters, coloured them in,  stuck them together to make the loops and they were great.

I even learned something today, I learned how to animate a cape flapping behind a running super-hero.

Next week we will be planning out our animation, we are planning to re-make “Little Red Riding Hood” with each group making a scene each, they will be divided into groups and given roles.  We will storyboard it, build sets, animate, edit, narrate and score it all in 4 weeks (8 hours).

I haven’t blogged about this group because I blogged about the first group in detail, but these guy are certainly worth mentioning as they are a group of 12 7-year-old game designers and they have been spot on with their work.

When making games with students I let them use a bit of custom graphics software that I have coded (in Processing) it doesn’t have a name, but it does a lot. Firstly, I give each student a number, they put that in and it automatically saves all files with that number in the title i.e. good1.PNG for the good guy so I know it belongs to student number 1. It is extremely useful when dealing with so many graphics from so many games. Secondly it saves everything for them,  generates a background colour and crops the images for compositing later when put into the game engine. Thirdly it limits the graphic size 64×64 pixels maximum keeping the game retro in style and finally it only allows the use of 16 colours again for making it all very retro. Very simply you click a colour and click where you want it to go, one pixel at a time, sound laborious but it make the students really think about each one of their pixels when transferring their paper sketches into a computer.

But there is one thing it doesn’t do.

A lot of the games in this group for some reason or another feature doughnuts, subconsciously it entered the minds of around five of the twelve game designers and now we have them in the games. Repeatedly throughout the session I was asked “How do you draw a circle?” which struck me as odd. Odd because I grew up in pixels, I have been sketching out characters on graph paper since the 80′s (I spent most of my school days drawing sprites btw). So I had to stop the lesson and explain how to draw circle one pixel at a time. It turns out that the students are very fluent in Microsoft Paint which is great and some of them have even ventured in to Adobe Photoshop which is fantastic, the more varied software the better. The one thing these wonderful pieces of software feature is pre-made shapes that you can re-size. It was a wonderful “digital” moment, but is this a skill that has been lost? Drawing the doughnuts was tricky because they were circles with smaller circles in them, but we got through it. The question is are “hand-made” graphics becoming a lost skill?

I am certainly not about to add circles and squares to the software, because I really want them to think about how each pixel effects the overall sprite design, but this was an unintended bonus in terms of preserving a “old school” way of doing things.

Back in November I was asked to be one of the “cutting edge” developers at the Power of Minds Hack with Honda, organised by Rewired State, in one word it was” excellent”.

I was fortunate to team up with Emily Christy, Sym Roe and Kevin Fong for a project called Bike Alert, on the day it was voted best in design and now thanks to the readers vote it has received an additional £2000 to be developed further.

You can see the full article on the Guardian website which explain the the whole project here.

I am very excited about the win, I however am having to bow out of the project due to teaching and studying committments, I wish them well and I hope you will check out their work and progress. It is a great project and I hope it will save lives.

(Picture courtesy of Rain Rabbit on Flickr @rainycat on Twitter)