Des 240: Assignment 3

For my third assignment in Design 240, I was tasked with working with a partner/small group of people, in order to produce a short, interactive experience that seeks to inform the user about how they can play a role in changing the status quo of a statistic.

Our Statement of Intent 

This interactive flowchart is based on the statistic “between 2010 and 2015, 3.3 million hectares of forest areas were lost”. After researching some of the causes to this problem, which are the growing population requiring more infrastructure and resources such as paper, books, furniture, food and firewood, a solution we have decided to focus on is to promote more sustainable choices when purchasing, such as recycling, and buying products that were made sustainably. This flowchart we have created serves as a review of the purchases you’ve made, helping you to learn over time to think more about what you are purchasing, and other alternatives such as buying secondhand. It gives you questions to think about when purchasing which will help you to decide whether you should have purchased the item, or whether there were other options. We have given it a childlike aesthetic, as it could be a helpful tool for young shoppers to learn to think sustainably early in life. It could be integrated into interfaces in public places such as shopping malls where lots of consumers will do their shopping. 

Eventually we hope that this will re-train the thought process before making purchases, and promote better choices among consumers. 

Our work in progress

During our initial sessions, we came up with a number of different designs and ideas, many of which never progressed beyond a simple sketch on a scrap piece of paper. An example of one of these early ideas, can be found in the image below:

This image shows a basic slide, showcasing an idea that was eventually scrapped for being too "game like" the opposite of what our interactive experience was supposed to feel like. This unwanted theme was frequent throughout the idea phase, and caused many ideas to be rejected by the group.

We also researched various interaction mechanics that are featured in other games and applications, these included both mobile games and more traditional flash games.

The idea we eventually settled on was to create an interactive flowchart to explain our chosen statistic, this design was agreed upon by the entire group.

As the technical lead I was tasked with creating a working prototype of what the flowchart could look like, our initial idea involved choosing different images, and can be seen in the image above.

However after feedback from the group, we then decided to scrap this idea in favour of written answers. Our final idea was a combination of these two prototypes, featuring short written answers, and can be seen in the GIF at the beginning of the blog.

Code snapshots

//boolean intro = true;

int state = 0;

int won_state = 1;

int lost_state = 2;

int box1_state= 0;

int box2_state= 0;

Our code featured a number of different states, each of which is triggered when the user clicks their mouse in a certain area.

String[] q1 = {"DID I NEED IT?", "Yes", "No", "1"};

String[] q2 = {"COULD I HAVE \nFOUND IT SECONDHAND?", "Yes", "No", "2"};

String[] q3 = {"IS IT MADE SUSTAINABLY?", "Yes", "No", "1"};

String[] q4 = {"COULD I HAVE \nBORROWED IT FROM SOMEONE?", "Yes", "No", "2"};

Our questions are all strings, and the number of, can be easily changed. The answer is set at the end of the string, with either a "1" - meaning that the answer is on the left (first answer) or "2" meaning that the answer is on the right (second answer)

void lost_screen() {

if ( state == lost_state) {

background(end_bg[bgimg]);

Timer +=0.25;

imageMode(CENTER);

image(end_img[question_num], 540, 540);

fill(0);

textSize(32);

text("Press any key to continue", width/2, 760);

score = 0;

if (Timer == 10){

bgimg++;

}

if (Timer == 40){

bgimg++;

}

if (Timer == 70){

bgimg++;

}

The code snippet above showcases the lost state of the code, which triggers when the user answers a question wrong. When this state is called [if ( state == lost_state)] a timer begins counting up from 0, triggering a change in background. These variables are easily changed, meaning that the background can change as quickly/or slowly as the coder wants.

One aspect that I would like to add to the project would be basic animations when the user clicks a button. I was close to adding this, however for various reasons ran out of time.

Full code (For easy copy and paste):

/* Code for 240

*/

//Images

PImage[] end_bg = new PImage[4];

PImage[] end_img = new PImage[4];

PImage good_end_bg;

//Font

PFont ebrima;

//Timer and Score

float Timer = 0;

int score = 0;

int CorrectAns = 0;

int WrongAns = 0;

//boolean intro = true;

int state = 0;

int won_state = 1;

int lost_state = 2;

int box1_state= 0;

int box2_state= 0;

int num_of_questions= 0;

int question_num= 0;

ArrayList<String[]> questions = new ArrayList<String[]>();

int ans1_x = 260;

int ans1_y = 720;

int ans2_x = 810;

int ans2_y = 720;

int bgimg = 0;

//Sound

void setup(){

println("Start Setup");

size(1080,1080);

//Change cursor to a hand

cursor(HAND);

//Load & resize images

end_bg[0] = loadImage("/Users/benboyd/Documents/Processing/Final/Background/Final.png");

end_bg[1] = loadImage("/Users/benboyd/Documents/Processing/Final/Background/Final branches.png");

end_bg[2] = loadImage("/Users/benboyd/Documents/Processing/Final/Background/Final trunks.png");

end_bg[3] = loadImage("/Users/benboyd/Documents/Processing/Final/Background/Background(With clouds).png");

good_end_bg = loadImage("/Users/benboyd/Documents/Processing/Final/Background/Final.png");

good_end_bg.resize(1080,1080);

end_img[0] = loadImage("/Users/benboyd/Documents/Processing/Final/Endscreens/end_screen_1_new.png");

end_img[1] = loadImage("/Users/benboyd/Documents/Processing/Final/Endscreens/end_screenplaceholder2.png");

end_img[2] = loadImage("/Users/benboyd/Documents/Processing/Final/Endscreens/end_screenplaceholder3.png");

end_img[3] = loadImage("/Users/benboyd/Documents/Processing/Final/Endscreens/end_screenplaceholder4.png");

//}

ebrima = createFont("/Users/benboyd/Documents/Processing/Final/ebrima.ttf",64);

//intro_screen();

create_questions();

//set_questions(question_num);

}

void draw(){

background(end_bg[bgimg]);

Answer_boxes();

set_questions(question_num);

lost_screen();

win_screen();

display_score();

}

void create_questions(){

println("Start create_questions");

String[] q1 = {"DID I NEED IT?", "Yes", "No", "1"};

String[] q2 = {"COULD I HAVE \nFOUND IT SECONDHAND?", "Yes", "No", "2"};

String[] q3 = {"IS IT MADE SUSTAINABLY?", "Yes", "No", "1"};

String[] q4 = {"COULD I HAVE \nBORROWED IT FROM SOMEONE?", "Yes", "No", "2"};

questions.add(q1);

questions.add(q2);

questions.add(q3);

questions.add(q4);

num_of_questions= questions.size();

println("create_questions num of q = " + num_of_questions);

}

void set_questions(int qNum){

println("set_questions qnum = " + qNum);

if(qNum < num_of_questions){

display_Question(questions.get(qNum)[0],questions.get(qNum)[1],questions.get(qNum)[2], Integer.parseInt(questions.get(qNum)[3]));

}

}

void display_Question(String question, String answer1, String answer2, int correctBox){

println("display_Question q = " + question);

if(correctBox == 1){

box1_state = won_state;

box2_state = lost_state;

}

else {

box1_state = lost_state;

box2_state = won_state;

}

fill(0);

stroke(0);

textFont(ebrima);

textSize(64);

textAlign(CENTER);

text(question, 540, 200);

//Left answer

textFont(ebrima);

textSize(64);

textAlign(CENTER);

fill(#000000);

text(answer1, ans1_x, ans1_y,50);

//Right answer

textFont(ebrima);

textSize(64);

textAlign(CENTER);

text(answer2, ans2_x, ans2_y, 50);

}

//Click on answer

void mouseReleased(){

if (question_num < num_of_questions){

//if (score == 0 && mouseX > 0 && mouseX < (X+W) && mouseY < (Y+H)){

if (state == 0 && mouseX > 20 && mouseX < (ans1_x+50) && mouseY > 600 && mouseY < (ans1_y+50)){

state = box1_state;

}

else if(state == 0 && mouseX > 750 && mouseX < (ans2_x+50) && mouseY > 600 && mouseY < (ans2_y+50)){

state = box2_state;

}

else if ( state == lost_state || question_num == num_of_questions) {

state = 0;

question_num = 0;

score = 0;

println("keyPressed restart");

set_questions(question_num);

bgimg = 0;

Timer = 0;

}

}

}

void next_question(){

println("next_question state = " + state);

if (state == won_state){

CorrectAns++;

}

else{

WrongAns++;

}

println("next_question question_num = " + question_num);

if (question_num < num_of_questions){

question_num++;

println("next_question question_num now = " + question_num);

println("next_question num_of_questions now = " + num_of_questions);

set_questions(question_num);

}

}

void display_score(){

if (question_num == num_of_questions){

background(good_end_bg);

imageMode(CENTER);

image(end_img[3], 540, 540);

//fill(#3DB21B);

//text("You got " + score + " \nout of " + num_of_questions + " correct", width/2, width/2);

}

}

void win_screen() {

if ( state == won_state ) {

Timer +=0.25;

fill(#3DB21B);

textSize(124);

textAlign(CENTER);

text("Correct", 540, 540);

if (Timer == 15){

//println("null");

Timer = 0;

state = 0;

score++;

next_question();

}

}

}

void lost_screen() {

if ( state == lost_state) {

background(end_bg[bgimg]);

Timer +=0.25;

imageMode(CENTER);

image(end_img[question_num], 540, 540);

fill(0);

textSize(32);

text("Press any key to continue", width/2, 760);

score = 0;

if (Timer == 10){

bgimg++;

}

if (Timer == 40){

bgimg++;

}

if (Timer == 70){

bgimg++;

}

}

}

void keyPressed(){

if ( state == lost_state || question_num == num_of_questions) {

state = 0;

question_num = 0;

score = 0;

bgimg = 0;

Timer = 0;

println("keyPressed restart");

set_questions(question_num);

}

else if(num_of_questions <= question_num){

println("keyPressed stop");

}

}