Beginning phase
The last and final assignment of DES240: Designing with Data course consisted of partnering with one other student and work together on one of the statistics from our previous assignment. The intention of this assignment is to build an interaction where the 'player' could bring change to the statistic. We were allocated specific roles to focus on in this project; I was the Art director taking all the visual and graphic aspects of this assignment. My partner was in charge of the coding to make our idea come to life.
After a brief discussion, we decided to focus our interaction with my partner's statistic:
1 in 4 NZ Maori kids suffer from food insecurity
As this seemed more appropriate and interesting to create an interactive experience.
Process phase
As soon as we chose the statistic for this project, I came up with an idea to have four kids running in a race and the "1" out of four kids either collapse or somehow represent that they are less privileged. The three concepts all have similar idea but has different compositions.
Rough concepts of initial ideas:
During the progress check with tutors, I realised the lack of detail in the idea that I drew as we also had to consider the interactions that are required for this project.
Therefore both my partner and I drew up storyboards to better define our idea.
Once discussing with our tutors, we could finalise our idea to the third one where it has the bit about "food banking" as it shows how the player could bring change to our chosen statistic.
Concept video roughly exploring how it flows:
Concept sketch of four kids:
As we chose our overall theme of interaction to have a cartoony style, I drew up simple designs for the four characters. I used three main colours, black, red and white, to represent the Maori culture.
I wanted the overall interaction to be similar to this retro game, where the player has to hit keys to move the character constantly.
Initial sketch exploring the animation sequence of the character:
I also wanted to incorporate the visual of the kids running; hence I worked on drawing each kids frame by frame.
By referring to an existing animation sequence, I drew up each frame of the characters.
Final drawing of one kid running:
Final drawing of three kids running:
Final image for win/lose:
Other assets for the whole interaction:
More processes can be found here:
Final design
Statement of Intent
At the beginning of our process, the ending of this interaction only had a bad ending. However, realising that there is no sense of achievement,l to provide a better representation of how the player could "bring change to the statistic", we decided to add a good ending as well. 1 in 4 Maori kids suffering food insecurity is a huge number of kids; therefore, we wanted to show an example of how we could help them through this interaction - by donating to the food bank.
Final code
as presented by Sydni Che
import processing.sound.*; //import the library
SoundFile backgroundSound; // make a sound variable
SoundFile wingameSound;
SoundFile gameoverSound;
SoundFile coinSound;
PImage trackBackground;
PImage onekidrunning;
PImage onekidcollapse;
PImage threekidsrunning;
PImage keys;
PImage coin;
PImage foodwater;
PImage gameover;
PImage wingame;
PImage [] runnerMaori;
int runnerImage = 0;
int duration = 50;
int time = 0; //to count the time image displayed for
int counter = 0;
int frameNumber = 0;
int value = 0;
int transparency1 = 0;
int speed;
int playerX = 0;
int keytimer;
boolean showCoin = false;
boolean showFoodwater = false;
boolean isrunning = true;
boolean wingameCheck = false;
boolean losegameCheck = false;
void setup() {
size(1080, 1080); //size of our canvas
trackBackground = loadImage("Assets/runningtrack.png");
onekidrunning = loadImage("Assets/onekidrunning.png");
onekidcollapse = loadImage("Assets/onekidcollapse.png");
keys = loadImage("Assets/keys.png");
coin = loadImage("Assets/coin.png");
foodwater = loadImage("Assets/foodwater.png");
gameover = loadImage("Assets/gameover.png");
wingame = loadImage("Assets/wingame.png");
// initialise our array and load images
runnerMaori = new PImage [4];
speed = 3;
keytimer = 0;
runnerMaori [0] = loadImage("Assets/threekidsrunning.png");
runnerMaori [1] = loadImage("Assets/threekidsrunning1.png");
runnerMaori [2] = loadImage("Assets/threekidsrunning2.png");
runnerMaori [3] = loadImage("Assets/threekidsrunning3.png");
backgroundSound = new SoundFile(this, "Assets/backgroundaudio.mp3");
backgroundSound.play(); //plays the sound
wingameSound = new SoundFile(this, "Assets/wingame.mp3");
gameoverSound = new SoundFile(this, "Assets/gameover.mp3");
}
void draw () {
background (0);
float distance = dist(1000, 1000, playerX, 1000);
image (trackBackground, 0, 0); //draw image at the edge
image (keys, 0, 0);
image (foodwater, 0, 0);
image (runnerMaori[runnerImage], 0, 0); //displaying image
if(isrunning){
image (onekidrunning, playerX, 0);
}
if (showCoin == true) {
image (coin, 0, 0);
}
if (distance < 350){
showCoin = false;
image (wingame, 0, 0);
if(wingameCheck == false){
wingameSound.play();
wingameCheck = true;
}
//wingameSound = new SoundFile(this, "Assets/wingame.mp3");
//wingameSound.play(); //plays the sound
}
time += 3; // time counts
if (time > duration) {
if (runnerImage >= runnerMaori.length-1) {
runnerImage = 0;
} else {
runnerImage++;
}
time = 0; //time is reset back at this point
}
if (keytimer >= 100 && distance >= 350) {
image (onekidcollapse, 0, 0);
isrunning = false;
}
keytimer += 1;
if (keytimer >= 100 && distance >= 250) {
image (onekidcollapse, 0, 0);
}
if (keytimer >= 120 && distance >= 300) {
tint (255, transparency1 += 6); //transparency1 just a value to begin with which is 0
image (gameover, 0, 0);//image to be placed on top
if(losegameCheck == false){
gameoverSound.play();
losegameCheck = true;
}
//gameoverSound = new SoundFile(this, "Assets/gameover.mp3");
//gameoverSound.play(); //plays the sound
}
if (keytimer <= 5 && distance >= 300) {
image (coin, 0, 0);
}
}
void keyPressed() {
if (keyCode == LEFT || keyCode == RIGHT) {
keytimer = 0;
playerX += 50;
}
print (key);
if (key == 'a') {
showCoin = true;
}
coinSound = new SoundFile(this, "Assets/collectaudio.mp3");
coinSound.play(); //plays the sound
}