ArrayList
http://processing.org/reference/ArrayList.html

has a property isEmpty

http://docs.oracle.com/javase/1.4.2/docs/api/java/util/ArrayList.html#isEmpty%28%29

so check if it is empty

if yes restart.

in theory
you take your stuff out of setup

1.   for (int i = 0; i < nbBrickH; i++)
2. 
   
3.   {
4. 
   
5.     for (int j = 0; j < nbBrickV; j++)
6. 
   
7.     {
8. 
   
9.       bricks.add(new Brick(i+1, j+1, color(55, 40 + 30 * j, 255 - 30 * j)));
10. 
    
11.     }
12.   }

Thanks for responding.

Can you please give me a simple example, that when I remove all brick for example the void drawrect() will execute? And please put the code inside the code that I sent. And use switch() in it, please.

Void drawrect()

{

rect(10,10,20,20);

}

//then another void excecute—second screen

void drawellipse() {

  if (mousePressed == true) {

    fill(0);

  } else {

    fill(255);

  }

  ellipse(25, 25, 50, 50);

}

Sorry, I’m very new in processing, and I don’t know where I should put switch() in draw or…

I am talking about this

1. void draw()
2. 
   
3. {
4. 
   
5.   background(255);
6. 
   
7.   for (Brick brick : bricks)
8. 
   
9.   {
10. 
    
11.     brick.draw();
12. 
    
13.   }
14. }

I now have put some states for the program in your Code.

You also have different levels.

Greetings, Chrisir

1. // Constants of the brick wall
2. final int marginX = 20;
3. final int marginY = 20;
4. final int intervalH = 20;
5. final int intervalV = 10;
6. final int nbBrickH = 4;
7. final int nbBrickV = 3;
8. // program states
9. final int stateInit=0;
10. final int stateGame=1;
11. final int stateBetweenLevels=2;
12. final int stateGameFinishedWon=3;
13. final int stateStarting=4;
14. int state=stateStarting;
15. // Levels
16. int numberOfCurrentLevel = 1;
17. int maxLevel=4;
18. // Timers for texts that are there for a few seconds only
19. int stateBetweenLevelsTimer=0;
20. int stateStartingTimer=0;
21. // ===============================================
22. class Brick
23. {
24.   // Constants of the brick
25.   final int sizeX = 30;
26.   final int sizeY = 20;
27.   int posX;
28.   int posY;
29.   color c;
30.   public Brick(int x, int y, color bc)
31.   {
32.     posX = x;
33.     posY = y;
34.     c = bc; // brick color...
35.   }
36.   public void draw()
37.   {
38.     pushStyle(); // Avoid to alter settings of other classes (if any)
39.     rectMode(CORNER);
40.     noStroke();
41.     fill(c);
42.     rect(getX(), getY(), sizeX, sizeY);
43.     popStyle();
44.   }
45.   public int getX()
46.   {
47.     return marginX + (intervalH + sizeX) * (posX - 1);
48.   }
49.   public int getY()
50.   {
51.     return marginY + (intervalV + sizeY) * (posY - 1);
52.   }
53.   public boolean isOver()
54.   {
55.     int x = getX();
56.     int y = getY();
57.     return mouseX >= x && mouseX < x + sizeX && mouseY >= y && mouseY < y + sizeY;
58.   }
59. }
60. // ===============================================
61. ArrayList<Brick> bricks = new ArrayList<Brick>();
62. void setup()
63. {
64.   size(600, 800);
65.   stateStartingTimer=millis();
66. } // func
67. void draw()
68. {
69.   background(255);
70.   if (state==stateInit) {
71.     // set first or next level and go to play
72.     setGameToLevel() ;
73.     state = stateGame;
74.   } // if stateInit
75.   else if (state==stateStarting) {
76.     // Welcome screen at begin
77.     textOutput ( "Welcome! \nPrepare to play!" );
78.     if (stateStartingTimer+2100<millis() ) {
79.       state=stateInit;
80.     } // if
81.   } // if stateStarting
82.   else if (state==stateBetweenLevels) {
83.     // show message between levels
84.     textOutput ( "Hurray! Next Level is Level #" +
85.       numberOfCurrentLevel + "!" );
86.     // show only for some time 
87.     if (stateBetweenLevelsTimer+1900<millis() ) {
88.       state=stateInit;
89.     } // if
90.   } // else stateBetweenLevels
91.   else if (state==stateGame) {
92.     // normal game
93.     for (Brick brick : bricks)
94.     {
95.       brick.draw();
96.     } // for
97.     if (bricks.isEmpty()) {
98.       state=stateBetweenLevels;
99.       numberOfCurrentLevel++;
100.       stateBetweenLevelsTimer=millis();
101.       if (numberOfCurrentLevel==maxLevel) {
102.         state=stateGameFinishedWon;
103.       } // if
104.     } // if
105.   } // else stateGame
106.   else if (state==stateGameFinishedWon) {
107.     // Game finished, last level done
108.     fill(2, 233, 22);
109.     textSize(20);
110.     textOutput ("Game finished - you won." );
111.   } // else stateGameFinishedWon
112.   else
113.   {
114.     // error
115.     println ("Code shouldn't get here Error#67");
116.   } // else / error
117. } // func
118. // =======================================================
119. // Levels
120. void setGameToLevel () {
121.   switch (numberOfCurrentLevel) {
122.   case 1:
123.     GameLevel1() ;
124.     break;
125.   case 2:
126.     GameLevel2() ;
127.     break;
128.   case 3:
129.     GameLevel3() ;
130.     break;   
131.   default:
132.     println ("Code shouldn't get here; Error#66");
133.     break;
134.   } // switch
135. }
136. void GameLevel1() {
137.   for (int i = 0; i < nbBrickH; i++)
138.   {
139.     for (int j = 0; j < nbBrickV; j++)
140.     {
141.       bricks.add(new Brick(i+1, j+1, color(55, 40 + 30 * j, 255 - 30 * j)));
142.     }
143.   }
144. }
145. void GameLevel2() {
146.   for (int i = 0; i < nbBrickH; i+=2)
147.   {
148.     for (int j = 0; j < nbBrickV; j+=2)
149.     {
150.       bricks.add(new Brick(i+1, j+1, color(55, 140 + 30 * j, 3 * j)));
151.     }
152.   }
153. }
154. void GameLevel3() {
155.   for (int i = 0; i < nbBrickH; i++) {
156.     bricks.add(new Brick(i+1, 1, color(i*40 + 100, 10, 10 )));
157.   }
158. }
159. // =======================================================
160. // Inputs
161. void mouseReleased() {
162.   if (state==stateGame) {
163.     for (Brick brick : bricks) {
164.       if (brick.isOver()) {
165.         bricks.remove(brick);
166.         break; // Can be over only one brick
167.       }
168.     } // for
169.   } // if
170. } // func
171. // =======================================================
172. // Tools
173. void textOutput (String myText) {
174.   fill(2, 233, 22);
175.   textSize(20);
176.   text( myText, 122, 110 );
177. } // func

Thank you very much

I really appreciate your attention. These codes are very useful for me. I’ll study them precisely as soon as possible.

Thank you again!

// This shows a game to destroy bricks.
// When this program grows up it might become
// Breakout / arkanoid-like game.

// Now it demonstrates that a program can have
// different "states" (in the sense of
// State of matter, solid, liquid or
// vapour phases of matter). One state for playing,
// One for defining a new level.
// One for the Message at startup of program,
// One for the Message between the Levels.

// The program changes between the states
// after a certain period of time (when
// displaing a message) or after all bricks
// from a level have been destroyed.

// The current state gets evaluated in draw.

// Another control variable is the level counter
// which makes sure that it gets from one level
// to the next. This is just a counter, not a state.

I want to add score. And after destroying any brick, 1 score increase. Where and How and I should define variable?

How after moving to another level the score reset, but at the end of game when message of you won appear we see the score of all levels.

Have a global variable for the score, increment it on each brick hit.
Have an array of scores, whose size is the number of levels. After each level completion, put the score in the corresponding slot.

Hi,

yes, phi.lho is correct.

Try to read and understand the program slowly.

What passage has which function?

Then you'll see where the passage is for when a brick is hit .
Then insert there something like

1. currentScore++;

Define currentScore as global var before

1. int currentScore = 0;

then read on and find the passage for when a level is completed

1. arrayOfScores[currentLevel]=currentScore; // list of all level scores
   
2. currentScore=0;

Have a section where the score is displayed:

1. text(currentScore,140,30);

We could do it for you but you have to learn and understand the program.

You can do it! 

But  I have a question: you wrote

at the end of game when message of you won appear we see the score of all levels.

Do you want the score of all levels in a list (like phi.lho thinks) or the number as a sum of all levels (one single number)?

Greetings, Chrisir

  Thanks for prompt responding. Actually my game is more complex than the code of the game in this discussion. I get inspire from code you write and learn how to use codes and then apply to my game. My game has different class, maybe because of this I’m confused and encounter problem. But I’ll try to do this.

BTW, I want to use keyPressed or mouse instead of if (stateStartingTimer+2100<millis() ) in different levels.

Instead of line 78 I could put:  if (mousePressed == true) and it worked.

Instead of line 87 I write if (keyCode == ENTER) {    but this code destruct the next level. How can I fix the problem?

….. Another small question:  Should we use all these if and else if in main draw() ?

you can...

quote

The keys included in the ASCII specification (BACKSPACE, TAB, ENTER, RETURN, ESC, and DELETE) do not require checking to see if they key is coded, and you should simply use the key variable instead of keyCode

If you're making cross-platform projects, note that the ENTER key is commonly used on PCs and Unix and the RETURN key is used instead on Macintosh. Check for both ENTER and RETURN to make sure your program will work for all platforms.

from http://processing.org/reference/key.html

so use

1. if (key == ENTER || key == RETURN) {

Next question

1. 
   

   Should we use all these if and else if in main draw() ?

   
   

definitely No, better use

1. switch (state) {

etc.

Greetings,

Chrisir

What should I do if I want o start the game again? I try several ways. But it doesn’t work correctly!

state=stateStarting;
etc.

1. // This shows a game to destroy bricks.
2. // When this program grows up it might become
3. // Breakout / arkanoid-like game.
4. // Now it demonstrates that a program can have
5. // different "states" (in the sense of
6. // State of matter, solid, liquid or
7. // vapour phases of matter). One state for playing,
8. // One for defining a new level.
9. // One for the Message at startup of program,
10. // One for the Message between the Levels.
11. // The program changes between the states
12. // after a certain period of time (when
13. // displaing a message) or after all bricks
14. // from a level have been destroyed.
15. // The current state gets evaluated in draw.
16. // Another control variable is the level counter
17. // which makes sure that it gets from one level
18. // to the next. This is just a counter, not a state.
19. // see
20. // https://forum.processing.org/topic/displaying-new-screen
21. // Constants of the brick wall
22. final int marginX = 20;
23. final int marginY = 20;
24. final int intervalH = 20;
25. final int intervalV = 10;
26. final int nbBrickH = 4;
27. final int nbBrickV = 3;
28. // program states: consts
29. final int stateInitALevel=0; // define next level
30. final int stateGame=1; // normal play
31. final int stateBetweenLevels=2; // message
32. final int stateGameFinishedWon=3; // end
33. final int stateStarting=4; // Welcome screen
34. int state=stateStarting; // variable
35. // Levels
36. int numberOfCurrentLevel = 1;
37. int maxLevel=4;
38. // Timers for texts that are there for a few seconds only
39. int stateBetweenLevelsTimer=0;
40. int stateStartingTimer=0;
41. // ===============================================
42. class Brick
43. {
44.   // Constants of the brick
45.   final int sizeX = 30;
46.   final int sizeY = 20;
47.   int posX;
48.   int posY;
49.   color c;
50.   public Brick(int x, int y, color bc)
51.   {
52.     posX = x;
53.     posY = y;
54.     c = bc; // brick color...
55.   }
56.   public void draw()
57.   {
58.     pushStyle(); // Avoid to alter settings of other classes (if any)
59.     rectMode(CORNER);
60.     noStroke();
61.     fill(c);
62.     rect(getX(), getY(), sizeX, sizeY);
63.     popStyle();
64.   }
65.   public int getX()
66.   {
67.     return marginX + (intervalH + sizeX) * (posX - 1);
68.   }
69.   public int getY()
70.   {
71.     return marginY + (intervalV + sizeY) * (posY - 1);
72.   }
73.   public boolean isOver()
74.   {
75.     int x = getX();
76.     int y = getY();
77.     return mouseX >= x && mouseX < x + sizeX && mouseY >= y && mouseY < y + sizeY;
78.   }
79. }
80. // ===============================================
81. ArrayList<Brick> bricks = new ArrayList<Brick>();
82. void setup()
83. {
84.   size(600, 800);
85.   stateStartingTimer=millis();
86. } // func
87. void draw()
88. {
89.   background(255);
90.   if (state==stateInitALevel) {
91.     // set first or next level and go to play
92.     setGameToLevel() ;
93.     state = stateGame;
94.   } // if stateInit
95.   else if (state==stateStarting) {
96.     // Welcome screen at begin
97.     textOutput ( "Welcome! \nPrepare to play!" );
98.     if (stateStartingTimer+2100<millis() ) {
99.       state = stateInitALevel;
100.     } // if
101.   } // if stateStarting
102.   else if (state==stateBetweenLevels) {
103.     // show message between levels
104.     textOutput ("Hurray! Next Level is Level #" +
105.       numberOfCurrentLevel + "!" );
106.     // show only for some time 
107.     if (stateBetweenLevelsTimer+1900<millis() ) {
108.       state = stateInitALevel;
109.     } // if
110.   } // else stateBetweenLevels
111.   else if (state==stateGame) {
112.     // normal game
113.     for (Brick brick : bricks)
114.     {
115.       brick.draw(); // draw bricks
116.     } // for
117.     // ****************************
118.     // if all bricks are destroyed
119.     // ****************************
120.     if (bricks.isEmpty()) {
121.       // change state to stateBetweenLevels
122.       state=stateBetweenLevels;
123.       numberOfCurrentLevel++;
124.       stateBetweenLevelsTimer=millis();
125.       if (numberOfCurrentLevel==maxLevel) {
126.         state = stateGameFinishedWon;
127.       } // if
128.     } // if
129.   } // else stateGame
130.   else if (state==stateGameFinishedWon) {
131.     // Game finished, last level done
132.     textOutput ("Game finished - you won." );
133.   } // else stateGameFinishedWon
134.   else
135.   {
136.     // error
137.     println ("Code shouldn't get here Error#67");
138.   } // else / error
139. } // func
140. // =======================================================
141. // Levels
142. void setGameToLevel () {
143.   switch (numberOfCurrentLevel) {
144.   case 1:
145.     GameLevel1() ;
146.     break;
147.   case 2:
148.     GameLevel2() ;
149.     break;
150.   case 3:
151.     GameLevel3() ;
152.     break;   
153.   default:
154.     println ("Code shouldn't get here; Error#66");
155.     break;
156.   } // switch
157. }
158. void GameLevel1() {
159.   for (int i = 0; i < nbBrickH; i++)
160.   {
161.     for (int j = 0; j < nbBrickV; j++)
162.     {
163.       bricks.add(new Brick(i+1, j+1, color(55, 40 + 30 * j, 255 - 30 * j)));
164.     }
165.   }
166. }
167. void GameLevel2() {
168.   for (int i = 0; i < nbBrickH; i+=2)
169.   {
170.     for (int j = 0; j < nbBrickV; j+=2)
171.     {
172.       bricks.add(new Brick(i+1, j+1, color(55, 140 + 30 * j, 3 * j)));
173.     }
174.   }
175. }
176. void GameLevel3() {
177.   for (int i = 0; i < nbBrickH; i++) {
178.     bricks.add(new Brick(i+1, 1, color(i*40 + 100, 10, 10 )));
179.   }
180. }
181. // =======================================================
182. // Inputs
183. void mouseReleased() {
184.   if (state==stateGame) {
185.     for (Brick brick : bricks) {
186.       if (brick.isOver()) {
187.         bricks.remove(brick);
188.         break; // Can be over only one brick
189.       } // if
190.     } // for
191.   } // if
192.   else if  (state==stateGameFinishedWon) {
193.     state=stateStarting;   
194.     stateStartingTimer=millis();
195.     numberOfCurrentLevel = 1;
196.   }
197. } // func
198. // =======================================================
199. // minor Tools
200. void textOutput (String myText) {
201.   // text output in a small box. e.g. between levels
202.   fill (0);
203.   stroke(255, 2, 2);
204.   rect ( 100, 80, textWidth (myText) + 10 + 22, 100 + 20 );
205.   fill(2, 233, 22);
206.   textSize(20);
207.   text( myText, 122, 110 );
208. } // func

Thank you. I'll try it my game

Chrisir, thank you so much for all your help! After hours of searching and experimenting, I found this topic and I immediately adopted the 'displaying a new screen' into my 'program' and with succes! Now I'm facing a new problem though, my photo array and text box don't work anymore within their new screen. I hope it's alright if I ask my question here.

I would add a .zip of my files since the photo array won't work without the photo's, but perhaps just the code will do:

int currentScreen;
PFont f;
PFont font;
int maxImages = 27;
int imageIndex = 0;
PImage[] images = new PImage[27];
String myText = "Type something";
    //array maken met woorden
  String[] cat=new String[7];

void setup() {
size(600, 600);
noStroke();
smooth();
f = createFont("Arial", 20, true);

}
  
void draw() {
     setNextScreen() ;

}
void setNextScreen () {
switch(currentScreen) {
case 0: drawScreenZero(); break;
case 1: drawScreenOne(); break;
case 2: drawScreenTwo(); break;
case 3: drawScreenThree(); break;
case 4: drawScreenFour(); break;
case 5: drawScreenFive(); break;
default: background(255); break;
 }
 } 
 
void mouseClicked() {
 currentScreen++;
 if (currentScreen > 5) { currentScreen = 0;}
}
void drawScreenZero() {
 background(255);
 fill(0);
 textFont(f,25);
 text("Emoties",10,50);
 textFont(f,15);
 text("‘Wie ogen heeft om te zien en oren om te horen, kan zich ervan overtuigen dat de stervelingen geen geheim kunnen verbergen. Wanneer iemands lippen zwijgen, kletst hij met zijn vingertoppen; uit alle poriën dringt het verraad naar buiten’.",10,70,width-20,90);
 text("- freud",10,140,width,120);
 text("De gevoeligheid voor het lezen van lichaamstaal en gezichtsuitdrukkingen is een aangeboren mogelijkheid om op indringende en directe wijze met anderen te communiceren. Lichaamstaal is niet altijd handig. Zoals Freud schreef ‘uit alle poriën dringt het verraad naar buiten’; het kan moeilijk zijn om je lichaamstaal te laten corresponderen met je verbale taal. Zonder lichaamstaal, en dan met name gezichtsuitdrukkingen, zou communiceren echter erg lastig worden! Gezichtsuitdrukkingen zijn essentieel om emoties te kunnen communiceren. Pakweg 80% van onze communicatie verloopt via lichaamstaal en zonder zou voor veel miscommunicatie zorgen. Het is niet voor niets dat er tegenwoordig ook via schriftelijke communicatie gebruik wordt gemaakt van emoticons. Toch komt miscommunicatie nog veelvuldig voor. Eén van de redenen daarvoor zou kunnen zijn dat bepaalde gezichtsuitdrukkingen (en emoticons) moeilijker zijn te interpreteren dan andere. Als dat zo is, dan zal deze ZAP dat kunnen aantonen. Naderhand zal een toelichting gegeven worden.",10,190,width-20,height);
}
 
 void drawScreenOne() {
 background(255);
 fill(0);
 textFont(f,25);
 text("Instructie",10,50);
 textFont(f,15);
 text("In dit experiment krijg je na elkaar 28 foto’s te zien waarop verschillende mensen, verschillende emoties uitbeelden. Geef aan welke emotie jij denkt dat de persoon op de foto uitbeeldt door een keuze te maken uit een lijstje van beschikbare emoties. Let wel, zodra je een emotie uit het lijstje hebt aangeklikt ga je onmiddellijk door naar de volgende foto; je kunt je keuze niet herstellen. Denk dus eerst goed na en klik dan pas een emotie aan!",10,70,width-20,height);
 }
 
 void drawScreenTwo() {
 
   background(255);
 font = loadFont("BellMT-48.vlw");
  textFont(font,30);
  fill(0);
  cat[0]="blijheid";
  cat[1]="angst";
  cat[2]="walging";
  cat[3]="verdriet";
  cat[4]="verassing";
  cat[5]="verachting";
  cat[6]="woede";
 //rectangle tekenen, eerst variabele aanmaken
  int rectangleY= 165;
  rectMode(CORNER);
    //lettertype en grootte
    font = loadFont("BellMT-48.vlw");
  textFont(font,30);
    for(int i=1; i<8; i=i+1){
    fill(249, 203, 202);
    rect(445,rectangleY, 150, 45);
    fill(0);
    text (cat[i-1],450,rectangleY+35);
    rectangleY =rectangleY+45;
 }
  for (int i = 0; i < images.length; i++) {
  images[i] = loadImage("a" + i + ".JPG");
  }
  image(images[imageIndex],100, 100, width/2, height/1.5);
 
 if(mousePressed);
  if ((mouseX<595)&&(mouseX>445) && (mouseY<480)&&(mouseY>165))
 { int CatPressed = floor((mouseY-165)/ 45);
    println (cat[CatPressed]);
    println (images[imageIndex]); 
 imageIndex = int(random(images.length));
 }
 }
 
 void drawScreenThree() {
 background(255);
 fill(0);
 textFont(f,25);
 text("Jouw antwoorden",10,50);
 }
 
 void drawScreenFour(){
 background(255);
 fill(0);
 textFont(f,25);
 text("Theorie",10,50);
 textFont(f,15);
 text("In de psychologie is er lange tijd onenigheid geweest over wanneer van emoties gesproken kan worden en hoeveel emoties er eigenlijk bestaan. Hanteren we voor het bepalen van emoties bijvoorbeeld de mate van opwinding of bijvoorbeeld de mate waarin een gebeurtenis subjectief wordt ervaren? De psycholoog Paul Ekman beargumenteerde dat het aantal basisemoties gelijk is aan het aantal gezichtsuitdrukkingen die we kunnen onderscheiden. Aangetoond is dat de gezichtsuitdrukkingen woede, angst, walging, verdriet en blijheid universeel zijn. Volgens Ekman kunnen we deze gezichtsuitdrukkingen daarom als emoties doen gelden. Voor de gezichtsuitdrukkingen verassing en verachting is minder bewijs dat zij algemeen herkent en erkent worden als emoties. Meestal blijkt dan ook dat mensen meer moeite hebben met het herkennen of juist interpreteren van de gezichtsuitdrukkingen voor ‘verachting’ en ‘verassing’ dan met die voor ‘blijheid’ en ‘verdriet’. Om gezichtsuitdrukkingen juist te kunnen interpreteren, zo stelt de psychologe Lisa Feldman Barrett, is het kennen van de context onontbeerlijk.",10,70,width-20,height);
 text("Gezichtsuitdrukkingen worden gevormd door gezichtsspieren die via zenuwen met de hersenen verbonden zijn en van daaruit worden gecoördineerd. Emoties en gezichtsuitdrukkingen lopen daarom hand in hand. Gebleken is dat, als je oprecht een emotie voelt, je andere gezichtsspieren gebruikt bij het uitdrukken ervan, dan wanneer je een emotie nadoet. Uit onderzoek blijkt dat mensen heel redelijk kunnen inschatten of iemand bijvoorbeeld echt lacht of doet alsof. Verder is gebleken dat, wanneer je een emotie uitbeeld, je deze emotie ook daadwerkelijk gaat ervaren. Dit wordt de ‘facial feedback hypothese’ genoemd. Mensen met een pen tussen de tanden beoordeelden een cartoon bijvoorbeeld als humoristischer dan mensen zonder pen tussen de tanden: de James-Lange theorie. ",10,360,width-20,height);
 }
 
 
 void drawScreenFive(){
 background(255);
 fill(0);
 text("type iets",300,400);
 }
 void keyPressed() {
 if (keyCode == BACKSPACE) {
if (myText.length() > 0) {
 myText = myText.substring(0, myText.length()-1);
 }
 } else if (keyCode == DELETE) {
  myText = "";
} else if (keyCode != SHIFT && keyCode != CONTROL && keyCode != ALT) {
  myText = myText + key;

   }
  }

My appologies for the Dutch text, do try to ignore that.
Now the intention is that the pictures only go from one picture to the next when you click on one of the words beside the pic. I had this working before I put the code inside a different screen. It seems that mousePressed refuses to work within a new screen. Could someone please help me out?

Sorry I am on a journey.

So I can't look at it properly.

Anyway, couldn't you set currentScreen to 0 in setup() first?

Also function mousePressed interferes with the image bit

Try to check whether you are in the screen where you just want to move on (as you do now) or if you don't want to (since you are in the image screen)

Cheers

like this...

1. void mouseClicked() {
2.   if (currentScreen != 2)
3.   {
4.     currentScreen++;
5.     if (currentScreen > 5) {
6.       currentScreen = 0;
7.     }
8.   }
9. }

but then in screen 2 you have to find another way to go further...

P.S.
!= means not the same as

Thanks for your reply!

I think I do need the currentScreen !=2, indeed. Now it stops in screen 2 and the pictures are still moving by their own free will. So now that it stops at screen 2, I want to click the pictures until the end of the picture array and then say 'next screen'.

I just tried different versions of the following but they all gave errors, mostly saying "unexpected token: void":

void mouseClicked() {
    if(currentScreen !=2) {
 currentScreen++;
 if (currentScreen > 5) {
 currentScreen = 0;
   if(currentScreen=2 && (mouseX<595)&&(mouseX>445) && (mouseY<480)&&(mouseY>165)){
    int CatPressed = floor((mouseY-165)/ 45);
    println (cat[CatPressed]);
    println (images[imageIndex]); 
 imageIndex = int(random(images.length));
 }
   }

I really appreciate any help :) Do enjoy your journey though!

hm... at last there was one } missing

and instead of

1. if (currentScreen=2

there's

1. if (currentScreen==2

with ==

1. void mouseClicked() {
2.   if (currentScreen !=2) {
3.     currentScreen++;
4.     if (currentScreen > 5) {
5.       currentScreen = 0;
6.       if (currentScreen==2 &&
7.       (mouseX<595)&&(mouseX>445) &&
8.       (mouseY<480)&&(mouseY>165)) {
9.         int CatPressed = floor((mouseY-165)/ 45);
10.         println (cat[CatPressed]);
11.         println (images[imageIndex]);
12.         imageIndex = int(random(images.length));
13.       }
14.     }
15.   }
16. }
17. //

Oh jeeh Chrisir , it works! It actually works! :""""))) I can't thank you enough!

Now I only need to figure out how to say 'when the end of the photo array is reached, continue on to the next page'. I'm quite sure I need to place that code under the following code (I had to split up the above code for it to work in the right order):


 }
  for (int i = 0; i < images.length; i++) {
  images[i] = loadImage("a" + i + ".JPG");
  }
  image(images[imageIndex],100, 100, width/2, height/1.5);
  } 
  void mousePressed(){
        if (currentScreen==2 && (mouseX<595)&&(mouseX>445) && (mouseY<480)&&(mouseY>165)) {
        int CatPressed = floor((mouseY-165)/ 45);
        println (cat[CatPressed]);
        println (images[imageIndex]);
        imageIndex = int(random(images.length));
        }
  }


But I'm more then happy for now :)

Ok, you need

1. If (something)
2.     currentScreen++;

The something is the hard part.
Since you take the images randomly, it's hard to tell when the last image is reached. More precise is "all images have been shown".
To get this you can have another array boolean [] hasBeenShown (all false at start) parallel to your Image array and set the values to true when the image of same Index has been shown.
In a loop then check whether all values in hasBeenShown are true. That is your "something".

More easy: just count the images shown and when they are same as the whole number (or let's say 2 higher), go to next screen.
This is not totally reliable though because in your random afaik you don't check if an image is shown twice. But it would be good enough!

Great job btw!

The pictures going randomly wasn't really wanted, I guess I just didn't know how else to do it. But I think I figured that out now by doing imageIndex = (imageIndex + 1) % images.length; Now I know this sign '%' says 'start all over' and that's exactly what I don't want, I want it to stop. But when I remove the sign or replace it with something else it simply skips the pictures all together. Here is the code to show the things I tried behind the //.

  for (int i = 0; i < images.length; i++) {
  images[i] = loadImage("a" + i + ".JPG");
  }
  image(images[imageIndex],100, 100, width/2, height/1.5);
  } 
  void mousePressed(){
        if (currentScreen==2 && (mouseX<595)&&(mouseX>445) && (mouseY<480)&&(mouseY>165)) {
        int CatPressed = floor((mouseY-165)/ 45);
        println (cat[CatPressed]);
        println (images[imageIndex]);
        //imageIndex = int(random(images.length));
        imageIndex = (imageIndex + 1) % images.length;
        //if(count%images.length ==27)count=0;       
        //for (int i = 0; i < images.length; i--){
        //if (images.length > 27){
        currentScreen++;
        }  //als alle foto's zijn langsgekomen, stop dan en doe: currentScreen++ }
        }
        }

Ofc, since the picture array is being repeated all the time, it never comes to the currentScreen++;  :/

I hope you like helping, cause I'm starting to feel pretty guilty asking so much :$ I really do appreciate your help!

=''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''DDDDDD !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! HET WERKT! IT WORKS! :''')) This is the second morning where you made me incredibly happy, but this time I'm entirely done! From the things you taught me I even managed to get the textBox working! I honestly didn't think I would ever get this done. I kept staring at it but the solution wouldn't hit in. Thank you so much for borrowing me your brain! Thanks so much for helping :)

Just to perhaps help some future strugglers I'll put down my entire code here with some //explaining
Because you won't be able to see the beautiful(!) picture array, here is what it somewhat looks like: http://zap.psy.utwente.nl/zaps/zaps/zaps/herkennen_emoties.res/frames.html
With a lot of thanks to Chrisir :)

int currentScreen;
PFont f;
PFont font;
int maxImages = 27;
int imageIndex = 0;
PImage[] images = new PImage[27];
String myText = "Type hier je naam en leeftijd";
    //array maken met woorden
  String[] cat=new String[7];

void setup() {
  //what you want your screen and lettertype to look like. Don't forget to 'create font' first (under tools)
size(600, 600);
noStroke();
smooth();
f = createFont("Arial", 20, true);
}
  
void mouseClicked() {
  //continue on to the next screen, unless ur on screen 2
  if (currentScreen !=2) {
    currentScreen++;
      if (currentScreen > 5) {
      currentScreen = 0;
      //stop at screen 5, that's where the program should end instead of starting from the beginning
      if (currentScreen !=5){
        currentScreen = 5;
      }
      }
  }
}

void draw() {
  //present your code in different screens
     setNextScreen() ;

}
void setNextScreen () {
switch(currentScreen) {
case 0: drawScreenZero(); break;
case 1: drawScreenOne(); break;
case 2: drawScreenTwo(); break;
case 3: drawScreenThree(); break;
case 4: drawScreenFour(); break;
case 5: drawScreenFive(); break;
default: background(255); break;
 }
 } 
 
 //draw the first screen
void drawScreenZero() {
 background(255);
 fill(0);
 textFont(f,25);
 text("Emoties",10,50);
 textFont(f,15);
 text("‘Wie ogen heeft om te zien en oren om te horen, kan zich ervan overtuigen dat de stervelingen geen geheim kunnen verbergen. Wanneer iemands lippen zwijgen, kletst hij met zijn vingertoppen; uit alle poriën dringt het verraad naar buiten’.",10,70,width-20,90);
 text("- freud",10,140,width,120);
 text("De gevoeligheid voor het lezen van lichaamstaal en gezichtsuitdrukkingen is een aangeboren mogelijkheid om op indringende en directe wijze met anderen te communiceren. Lichaamstaal is niet altijd handig. Zoals Freud schreef ‘uit alle poriën dringt het verraad naar buiten’; het kan moeilijk zijn om je lichaamstaal te laten corresponderen met je verbale taal. Zonder lichaamstaal, en dan met name gezichtsuitdrukkingen, zou communiceren echter erg lastig worden! Gezichtsuitdrukkingen zijn essentieel om emoties te kunnen communiceren. Pakweg 80% van onze communicatie verloopt via lichaamstaal en zonder zou voor veel miscommunicatie zorgen. Het is niet voor niets dat er tegenwoordig ook via schriftelijke communicatie gebruik wordt gemaakt van emoticons. Toch komt miscommunicatie nog veelvuldig voor. Eén van de redenen daarvoor zou kunnen zijn dat bepaalde gezichtsuitdrukkingen (en emoticons) moeilijker zijn te interpreteren dan andere. Als dat zo is, dan zal deze ZAP dat kunnen aantonen. Naderhand zal een toelichting gegeven worden.",10,190,width-20,height);
}
 
 void drawScreenOne() {
 background(255);
 fill(0);
 textFont(f,25);
 text("Instructie",10,50);
 textFont(f,15);
 text("In dit experiment krijg je na elkaar 28 foto’s te zien waarop verschillende mensen, verschillende emoties uitbeelden. Geef aan welke emotie jij denkt dat de persoon op de foto uitbeeldt door een keuze te maken uit een lijstje van beschikbare emoties. Let wel, zodra je een emotie uit het lijstje hebt aangeklikt ga je onmiddellijk door naar de volgende foto; je kunt je keuze niet herstellen. Denk dus eerst goed na en klik dan pas een emotie aan!",10,70,width-20,height);
 }
 
 void drawScreenTwo() {
  background(255);
  font = loadFont("BellMT-48.vlw");
  textFont(font,30);
  fill(0);
  //put the pictures from the picture array in different categories
  cat[0]="blijheid";
  cat[1]="angst";
  cat[2]="walging";
  cat[3]="verdriet";
  cat[4]="verassing";
  cat[5]="verachting";
  cat[6]="woede";
 //rectangle tekenen, eerst variabele aanmaken
  int rectangleY= 165;
  rectMode(CORNER);
    //lettertype en grootte
    font = loadFont("BellMT-48.vlw");
  textFont(font,30);
  //keep track of the answers people give
    for(int i=1; i<8; i=i+1){
    fill(249, 203, 202);
    rect(445,rectangleY, 150, 45);
    fill(0);
    text (cat[i-1],450,rectangleY+35);
    rectangleY =rectangleY+45;
 }
 //make a picture array
 for (int i = 0; i < images.length; i++) {
 images[i] = loadImage("a" + i + ".JPG");
  }
  //pictures all the same size
 image(images[imageIndex],100, 100, width/2, height/1.5);
 } 
  void mousePressed(){
    //when you press the mouse within these boundaries, go on to the next picture
        if (currentScreen==2 && (mouseX<595)&&(mouseX>445) && (mouseY<480)&&(mouseY>165)) {
        int CatPressed = floor((mouseY-165)/ 45);
        println (cat[CatPressed]);
        println (images[imageIndex]);
        imageIndex = (imageIndex + 1);
        //go through all the pictures of the array, and when you've shown the last picture, continue on to the next screen
        if (imageIndex>=images.length){
        currentScreen++;
        } 
        }
        }

 void drawScreenThree() {
 background(255);
 fill(0);
 textFont(f,25);
 text("Jouw antwoorden",10,50);
 }
 
 void drawScreenFour(){
 background(255);
 fill(0);
 textFont(f,25);
 text("Theorie",10,50);
 textFont(f,15);
 text("In de psychologie is er lange tijd onenigheid geweest over wanneer van emoties gesproken kan worden en hoeveel emoties er eigenlijk bestaan. Hanteren we voor het bepalen van emoties bijvoorbeeld de mate van opwinding of bijvoorbeeld de mate waarin een gebeurtenis subjectief wordt ervaren? De psycholoog Paul Ekman beargumenteerde dat het aantal basisemoties gelijk is aan het aantal gezichtsuitdrukkingen die we kunnen onderscheiden. Aangetoond is dat de gezichtsuitdrukkingen woede, angst, walging, verdriet en blijheid universeel zijn. Volgens Ekman kunnen we deze gezichtsuitdrukkingen daarom als emoties doen gelden. Voor de gezichtsuitdrukkingen verassing en verachting is minder bewijs dat zij algemeen herkent en erkent worden als emoties. Meestal blijkt dan ook dat mensen meer moeite hebben met het herkennen of juist interpreteren van de gezichtsuitdrukkingen voor ‘verachting’ en ‘verassing’ dan met die voor ‘blijheid’ en ‘verdriet’. Om gezichtsuitdrukkingen juist te kunnen interpreteren, zo stelt de psychologe Lisa Feldman Barrett, is het kennen van de context onontbeerlijk.",10,70,width-20,height);
 text("Gezichtsuitdrukkingen worden gevormd door gezichtsspieren die via zenuwen met de hersenen verbonden zijn en van daaruit worden gecoördineerd. Emoties en gezichtsuitdrukkingen lopen daarom hand in hand. Gebleken is dat, als je oprecht een emotie voelt, je andere gezichtsspieren gebruikt bij het uitdrukken ervan, dan wanneer je een emotie nadoet. Uit onderzoek blijkt dat mensen heel redelijk kunnen inschatten of iemand bijvoorbeeld echt lacht of doet alsof. Verder is gebleken dat, wanneer je een emotie uitbeeld, je deze emotie ook daadwerkelijk gaat ervaren. Dit wordt de ‘facial feedback hypothese’ genoemd. Mensen met een pen tussen de tanden beoordeelden een cartoon bijvoorbeeld als humoristischer dan mensen zonder pen tussen de tanden: de James-Lange theorie. ",10,360,width-20,height);
 }
 
 
 void drawScreenFive(){
 background(255);
 fill(0);
 textFont(f,25);
 //be sure to use the generelized variable 'myText', otherwise it won't work
 text(myText, 160, 250, width, height);
 }
 void keyPressed() {
   //make a beautiful textbox :)
 if (keyCode == BACKSPACE) {
if (myText.length() > 0) {
 myText = myText.substring(0, myText.length()-1);
 }
 } else if (keyCode == DELETE) {
  myText = "";
} else if (keyCode != SHIFT && keyCode != CONTROL && keyCode != ALT) {
  myText = myText + key;
   }
  }

I am very glad I could help you a little!
Thanks for your words.

If you find time you could also put your program on http://www.openprocessing.org


Cheers! Chrisir

I'll try and make it look a bit fancier first, but after that I'll see if I can manage to put it on there :) Although it's definitely worth looking forward to , do try to not lie awake until then, hehe :p

You did help me more then a little btw. The big codes are easy to find, but to figure out the small changes is the hard part!

Good night! =)

You're great!


You can say instead of

1. imageIndex++;

Cheers!

:))

I'll let you know what grade we got for this, if you want ^^

Just one last question. The code above makes up a test and the given answers are already recorded. Do you have a code for showing the given answers in a table or graphic orso? Please don't spend any time on figuring it out. Only if you have the code, it would be nice if you could pass it on :)

Cheers mate! (that's typical English, innit? ^^)

hi again  ;-)

the given answers are already recorded.

Is that in your code above? I couldn't spot it.

It depends from the given answers whether to make a table from it....

Can you show the code of the record of the given answers? 

This eg. is probably not helpful for you:




btw.
there are ways to make your program faster / running more fluently.
In drawScreenTwo() you load the font and you load all the images.
Rememeber since drawScreenTwo() gets called by draw() this happens
60 times per second and can slow things down a bit.
Thus it would be wise to do such stuff only once, that's in setup().

Cheers mate! 

Ah geweldig! That works much smoother! Thank you!! =)

I changed the code again (like I promised, working on the looks now :p). Hmm, it would be nice if I could show you what it looks like... Isn't there a way to upload a ZIP file in here?

Anyway, here is the code. I'll give the part that should record the answers a nice color. At least, it should be somewhere there, that's the only part of the code that my fellow student made.

int currentScreen;
PFont f;
PFont font;
int maxImages = 27;
int imageIndex = 0;
PImage[] images = new PImage[27];
String myText = "Type hier je naam en leeftijd";
    //array maken met woorden
  String[] cat=new String[7];
float x = 0;
float y = 0;
float speed = 1;

void setup() {
  //what you want your screen and lettertype to look like. Don't forget to 'create font' first (under tools)
size(600, 600);
noStroke();
smooth();
f = createFont("Arial", 20, true);
//lettertype en grootte
font = loadFont("BellMT-48.vlw");
font = loadFont("BellMT-48.vlw");
 //make a picture array
 for (int i = 0; i < images.length; i++) {
 images[i] = loadImage("a" + i + ".JPG");
  }
}

  
void mouseClicked() {
  //continue on to the next screen by clicking on the arrow, unless ur on screen 3
  if (currentScreen !=3 && (mouseX<585)&&(mouseX>540) && (mouseY<580)&&(mouseY>550)) {
    currentScreen++;
      if (currentScreen > 6)  {
      currentScreen = 0;
      //stop at screen 6, that's where the program should end instead of starting from the beginning
      if (currentScreen !=6){
        currentScreen = 6;
      }
      }
  }
}

void draw() {
  //present your code in different screens
     setNextScreen() ;
}
void setNextScreen () {
switch(currentScreen) {
case 0: drawScreenZero(); break;
case 1: drawScreenOne(); break;
case 2: drawScreenTwo(); break;
case 3: drawScreenThree(); break;
case 4: drawScreenFour(); break;
case 5: drawScreenFive(); break;
case 6: drawScreenSix(); break;
default: background(255); break;
 }
 } 
 
 //draw the first screen
 
void drawScreenZero() {
  background(255);
  fill(0);
  //arrow
 triangle(565,555,585,567,565,580);
 stroke(0);
 strokeWeight(3);
 line(540,567,565,567);
 fill(73,185,240);
 textFont(f,40);
 text("Herkennen van Emoties",100,295);
line(300,0,300,600);
line(0,300,600,300);
fill(255,231,5,200);
if (mouseX  <  300 && mouseY  <  300) {
fill(250,8,24,200);
rect(0,0,300,300);
} else if (mouseX  >  300 && mouseY  <  300) {
  fill(8,45,250,200);
rect(300,0,300,300);
} else if (mouseX  <  300 && mouseY  >  300) {
  fill(20,211,37);
rect(0,300,300,300);
} else if (mouseX  >  300 && mouseY  >  300) {
rect(300,300,300,300);
 }
}

void drawScreenOne() {
 background(255);
 //arrow
 triangle(565,555,585,567,565,580);
 stroke(0);
 strokeWeight(3);
 line(540,567,565,567);
 fill(0);
 textFont(f,25);
 text("Emoties",10,50);
 textFont(f,15);
 text("‘Wie ogen heeft om te zien en oren om te horen, kan zich ervan overtuigen dat stervelingen geen geheim kunnen verbergen. Wanneer iemands lippen zwijgen, kletst hij met zijn vingertoppen; uit alle poriën dringt het verraad naar buiten’.",10,70,width-20,90);
 text("- freud",10,140,width,120);
 text("De gevoeligheid voor het lezen van lichaamstaal en gezichtsuitdrukkingen is een aangeboren mogelijkheid om op indringende en directe wijze met anderen te communiceren. Lichaamstaal is niet altijd handig. Zoals Freud schreef ‘uit alle poriën dringt het verraad naar buiten’; het kan moeilijk zijn om je lichaamstaal te laten corresponderen met je verbale taal. Zonder lichaamstaal, en dan met name gezichtsuitdrukkingen, zou communiceren echter erg lastig worden! Gezichtsuitdrukkingen zijn essentieel om emoties te kunnen communiceren. Pakweg 80% van onze communicatie verloopt via lichaamstaal en zonder zou voor veel miscommunicatie zorgen. Het is niet voor niets dat er tegenwoordig ook via schriftelijke communicatie gebruik wordt gemaakt van emoticons. Toch komt miscommunicatie nog veelvuldig voor. Eén van de redenen daarvoor zou kunnen zijn dat bepaalde gezichtsuitdrukkingen (en emoticons) moeilijker zijn te interpreteren dan andere. Als dat zo is, dan zal deze ZAP dat kunnen aantonen. Naderhand zal een toelichting gegeven worden.",10,190,width-20,height);
}
 
 void drawScreenTwo() {
 background(255);
 fill(0);
 triangle(565,555,585,567,565,580);
 stroke(0);
 strokeWeight(3);
 line(540,567,565,567);
 textFont(f,25);
 text("Instructie",10,50);
 textFont(f,15);
 text("In dit experiment krijg je na elkaar 28 foto’s te zien waarop verschillende mensen, verschillende emoties uitbeelden. Geef aan welke emotie jij denkt dat de persoon op de foto uitbeeldt door een keuze te maken uit een lijstje van beschikbare emoties. Let wel, zodra je een emotie uit het lijstje hebt aangeklikt ga je onmiddellijk door naar de volgende foto; je kunt je keuze niet herstellen. Denk dus eerst goed na en klik dan pas een emotie aan!",10,70,width-20,height);
 }
 
 void drawScreenThree() {
  background(255); 
  textFont(font,30);
  strokeWeight(1);
  fill(0);
  //put the pictures from the picture array in different categories
  cat[0]="blijheid";
  cat[1]="angst";
  cat[2]="walging";
  cat[3]="verdriet";
  cat[4]="verassing";
  cat[5]="verachting";
  cat[6]="woede";
 //rectangle tekenen, eerst variabele aanmaken
  int rectangleY= 150;
  rectMode(CORNER);
  textFont(font,30);
  //keep track of the answers people give
    for(int i=1; i<8; i=i+1){
    fill(236, 237, 218);
    rect(445,rectangleY, 150, 45);
    fill(0);
    text (cat[i-1],450,rectangleY+35);
    rectangleY =rectangleY+45;
     //pictures all the same size
 image(images[imageIndex],100, 100, width/2, height/1.5);
 } 
 }
 
  void mousePressed(){
    //when you press the mouse within these boundaries, go on to the next picture
        if (currentScreen==3 && (mouseX<595)&&(mouseX>445) && (mouseY<480)&&(mouseY>165)) {
        int CatPressed = floor((mouseY-165)/ 45);
        println (cat[CatPressed]);
        println (images[imageIndex]);
        imageIndex++;
        //go through all the pictures of the array, and when you've shown the last picture, continue on to the next screen
        if (imageIndex>=images.length){
        currentScreen++;
        } 
        }
        }

 void drawScreenFour() {
 background(255);
 fill(0);
 triangle(565,555,585,567,565,580);
 stroke(0);
 strokeWeight(3);
 line(540,567,565,567);
 textFont(f,25);
 text("Jouw antwoorden",10,50);
 }
 
 void drawScreenFive(){
 background(255);
 fill(0);
 triangle(565,555,585,567,565,580);
 stroke(0);
 strokeWeight(3);
 line(540,567,565,567);
 textFont(f,25);
 text("Theorie",10,50);
 textFont(f,15);
 text("In de psychologie is er lange tijd onenigheid geweest over wanneer van emoties gesproken kan worden en hoeveel emoties er eigenlijk bestaan. Hanteren we voor het bepalen van emoties bijvoorbeeld de mate van opwinding of bijvoorbeeld de mate waarin een gebeurtenis subjectief wordt ervaren? De psycholoog Paul Ekman beargumenteerde dat het aantal basisemoties gelijk is aan het aantal gezichtsuitdrukkingen die we kunnen onderscheiden. Aangetoond is dat de gezichtsuitdrukkingen woede, angst, walging, verdriet en blijheid universeel zijn. Volgens Ekman kunnen we deze gezichtsuitdrukkingen daarom als emoties doen gelden. Voor de gezichtsuitdrukkingen verassing en verachting is minder bewijs dat zij algemeen herkent en erkent worden als emoties. Meestal blijkt dan ook dat mensen meer moeite hebben met het herkennen of juist interpreteren van de gezichtsuitdrukkingen voor ‘verachting’ en ‘verassing’ dan met die voor ‘blijheid’ en ‘verdriet’. Om gezichtsuitdrukkingen juist te kunnen interpreteren, zo stelt de psychologe Lisa Feldman Barrett, is het kennen van de context onontbeerlijk.",10,70,width-20,height);
 text("Gezichtsuitdrukkingen worden gevormd door gezichtsspieren die via zenuwen met de hersenen verbonden zijn en van daaruit worden gecoördineerd. Emoties en gezichtsuitdrukkingen lopen daarom hand in hand. Gebleken is dat, als je oprecht een emotie voelt, je andere gezichtsspieren gebruikt bij het uitdrukken ervan, dan wanneer je een emotie nadoet. Uit onderzoek blijkt dat mensen heel redelijk kunnen inschatten of iemand bijvoorbeeld echt lacht of doet alsof. Verder is gebleken dat, wanneer je een emotie uitbeeld, je deze emotie ook daadwerkelijk gaat ervaren. Dit wordt de ‘facial feedback hypothese’ genoemd. Mensen met een pen tussen de tanden beoordeelden een cartoon bijvoorbeeld als humoristischer dan mensen zonder pen tussen de tanden: de James-Lange theorie. ",10,360,width-20,height);
 }
 
 
 void drawScreenSix(){
 background(255);
 fill(0);
 textFont(f,25);
 //be sure to use the generelized variable 'myText', otherwise it won't work
 text(myText, 160, 250, width, height);
 }
 void keyPressed() {
   //make a beautiful textbox :)
 if (keyCode == BACKSPACE) {
if (myText.length() > 0) {
 myText = myText.substring(0, myText.length()-1);
 }
 } else if (keyCode == DELETE) {
  myText = "";
} else if (keyCode != SHIFT && keyCode != CONTROL && keyCode != ALT) {
  myText = myText + key;

   }
  }


This test asks people to estimate what emotions the people in the photo array show. It would be nice if after the test, they could see which emotions they estimated correct the most and which emotions they estimated wrong most. A table or a graph are both possible. But seriously, it's not most important so, make sure to not break your head over it!


Thanks mate! (you can also call girls your mate?)

see which emotions they estimated correct the most and which emotions they estimated wrong

you need

• a static list saying which image shows which emotion to check which one they estimated correct (if ( (cat[CatPressed] / answer of the user == correctAnswer) currentEmotionAnsweredCorrect++;)
  
• then you need a array as a counter for each emotion (x times wrong, x times right)
• then you can display array counter

1. int currentScreen;
2. PFont f;
3. PFont font;
4. int maxImages = 27;
5. int imageIndex = 0;
6. PImage[] images = new PImage[27];
7. String myText = "Type hier je naam en leeftijd";
8.     //array maken met woorden
9.   String[] cat=new String[7];
10. float x = 0;
11. float y = 0;
12. float speed = 1;
13. void setup() {
14.   //what you want your screen and lettertype to look like. Don't forget to 'create font' first (under tools)
15. size(600, 600);
16. noStroke();
17. smooth();
18. f = createFont("Arial", 20, true);
19. //lettertype en grootte
20. font = loadFont("BellMT-48.vlw");
21. font = loadFont("BellMT-48.vlw");
22.  //make a picture array
23.  for (int i = 0; i < images.length; i++) {
24.  images[i] = loadImage("a" + i + ".JPG");
25.   }
26. }
27.   
28. void mouseClicked() {
29.   //continue on to the next screen by clicking on the arrow, unless ur on screen 3
30.   if (currentScreen !=3 && (mouseX<585)&&(mouseX>540) && (mouseY<580)&&(mouseY>550)) {
31.     currentScreen++;
32.       if (currentScreen > 6)  {
33.       currentScreen = 0;
34.       //stop at screen 6, that's where the program should end instead of starting from the beginning
35.       if (currentScreen !=6){
36.         currentScreen = 6;
37.       }
38.       }
39.   }
40. }
41. void draw() {
42.   //present your code in different screens
43.      setNextScreen() ;
44. }
45. void setNextScreen () {
46. switch(currentScreen) {
47. case 0: drawScreenZero(); break;
48. case 1: drawScreenOne(); break;
49. case 2: drawScreenTwo(); break;
50. case 3: drawScreenThree(); break;
51. case 4: drawScreenFour(); break;
52. case 5: drawScreenFive(); break;
53. case 6: drawScreenSix(); break;
54. default: background(255); break;
55.  }
56.  } 
57.  
58.  //draw the first screen
59.  
60. void drawScreenZero() {
61.   background(255);
62.   fill(0);
63.   //arrow
64.  triangle(565,555,585,567,565,580);
65.  stroke(0);
66.  strokeWeight(3);
67.  line(540,567,565,567);
68.  fill(73,185,240);
69.  textFont(f,40);
70.  text("Herkennen van Emoties",100,295);
71. line(300,0,300,600);
72. line(0,300,600,300);
73. fill(255,231,5,200);
74. if (mouseX  <  300 && mouseY  <  300) {
75. fill(250,8,24,200);
76. rect(0,0,300,300);
77. } else if (mouseX  >  300 && mouseY  <  300) {
78.   fill(8,45,250,200);
79. rect(300,0,300,300);
80. } else if (mouseX  <  300 && mouseY  >  300) {
81.   fill(20,211,37);
82. rect(0,300,300,300);
83. } else if (mouseX  >  300 && mouseY  >  300) {
84. rect(300,300,300,300);
85.  }
86. }
87. void drawScreenOne() {
88.  background(255);
89.  //arrow
90.  triangle(565,555,585,567,565,580);
91.  stroke(0);
92.  strokeWeight(3);
93.  line(540,567,565,567);
94.  fill(0);
95.  textFont(f,25);
96.  text("Emoties",10,50);
97.  textFont(f,15);
98.  text("‘Wie ogen heeft om te zien en oren om te horen, kan zich ervan overtuigen dat stervelingen geen geheim kunnen verbergen. Wanneer iemands lippen zwijgen, kletst hij met zijn vingertoppen; uit alle poriën dringt het verraad naar buiten’.",10,70,width-20,90);
99.  text("- freud",10,140,width,120);
100.  text("De gevoeligheid voor het lezen van lichaamstaal en gezichtsuitdrukkingen is een aangeboren mogelijkheid om op indringende en directe wijze met anderen te communiceren. Lichaamstaal is niet altijd handig. Zoals Freud schreef ‘uit alle poriën dringt het verraad naar buiten’; het kan moeilijk zijn om je lichaamstaal te laten corresponderen met je verbale taal. Zonder lichaamstaal, en dan met name gezichtsuitdrukkingen, zou communiceren echter erg lastig worden! Gezichtsuitdrukkingen zijn essentieel om emoties te kunnen communiceren. Pakweg 80% van onze communicatie verloopt via lichaamstaal en zonder zou voor veel miscommunicatie zorgen. Het is niet voor niets dat er tegenwoordig ook via schriftelijke communicatie gebruik wordt gemaakt van emoticons. Toch komt miscommunicatie nog veelvuldig voor. Eén van de redenen daarvoor zou kunnen zijn dat bepaalde gezichtsuitdrukkingen (en emoticons) moeilijker zijn te interpreteren dan andere. Als dat zo is, dan zal deze ZAP dat kunnen aantonen. Naderhand zal een toelichting gegeven worden.",10,190,width-20,height);
101. }
102.  
103.  void drawScreenTwo() {
104.  background(255);
105.  fill(0);
106.  triangle(565,555,585,567,565,580);
107.  stroke(0);
108.  strokeWeight(3);
109.  line(540,567,565,567);
110.  textFont(f,25);
111.  text("Instructie",10,50);
112.  textFont(f,15);
113.  text("In dit experiment krijg je na elkaar 28 foto’s te zien waarop verschillende mensen, verschillende emoties uitbeelden. Geef aan welke emotie jij denkt dat de persoon op de foto uitbeeldt door een keuze te maken uit een lijstje van beschikbare emoties. Let wel, zodra je een emotie uit het lijstje hebt aangeklikt ga je onmiddellijk door naar de volgende foto; je kunt je keuze niet herstellen. Denk dus eerst goed na en klik dan pas een emotie aan!",10,70,width-20,height);
114.  }
115.  
116.  void drawScreenThree() {
117.   background(255); 
118.   textFont(font,30);
119.   strokeWeight(1);
120.   fill(0);
121.   //put the pictures from the picture array in different categories
122.   cat[0]="blijheid";
123.   cat[1]="angst";
124.   cat[2]="walging";
125.   cat[3]="verdriet";
126.   cat[4]="verassing";
127.   cat[5]="verachting";
128.   cat[6]="woede";
129.  //rectangle tekenen, eerst variabele aanmaken
130.   int rectangleY= 150;
131.   rectMode(CORNER);
132.   textFont(font,30);
133.   //keep track of the answers people give
134.     for(int i=1; i<8; i=i+1){
135.     fill(236, 237, 218);
136.     rect(445,rectangleY, 150, 45);
137.     fill(0);
138.     text (cat[i-1],450,rectangleY+35);
139.     rectangleY =rectangleY+45;
140.      //pictures all the same size
141.  image(images[imageIndex],100, 100, width/2, height/1.5);
142.  } 
143.  }
144.  
145.   void mousePressed(){
146.     //when you press the mouse within these boundaries, go on to the next picture
147.         if (currentScreen==3 && (mouseX<595)&&(mouseX>445) && (mouseY<480)&&(mouseY>165)) {
148.         int CatPressed = floor((mouseY-165)/ 45);
149.         println (cat[CatPressed]);
150.         println (images[imageIndex]);
151.         imageIndex++;
152.         //go through all the pictures of the array, and when you've shown the last picture, continue on to the next screen
153.         if (imageIndex>=images.length){
154.         currentScreen++;
155.         } 
156.         }
157.         }
158.  void drawScreenFour() {
159.  background(255);
160.  fill(0);
161.  triangle(565,555,585,567,565,580);
162.  stroke(0);
163.  strokeWeight(3);
164.  line(540,567,565,567);
165.  textFont(f,25);
166.  text("Jouw antwoorden",10,50);
167.  }
168.  
169.  void drawScreenFive(){
170.  background(255);
171.  fill(0);
172.  triangle(565,555,585,567,565,580);
173.  stroke(0);
174.  strokeWeight(3);
175.  line(540,567,565,567);
176.  textFont(f,25);
177.  text("Theorie",10,50);
178.  textFont(f,15);
179.  text("In de psychologie is er lange tijd onenigheid geweest over wanneer van emoties gesproken kan worden en hoeveel emoties er eigenlijk bestaan. Hanteren we voor het bepalen van emoties bijvoorbeeld de mate van opwinding of bijvoorbeeld de mate waarin een gebeurtenis subjectief wordt ervaren? De psycholoog Paul Ekman beargumenteerde dat het aantal basisemoties gelijk is aan het aantal gezichtsuitdrukkingen die we kunnen onderscheiden. Aangetoond is dat de gezichtsuitdrukkingen woede, angst, walging, verdriet en blijheid universeel zijn. Volgens Ekman kunnen we deze gezichtsuitdrukkingen daarom als emoties doen gelden. Voor de gezichtsuitdrukkingen verassing en verachting is minder bewijs dat zij algemeen herkent en erkent worden als emoties. Meestal blijkt dan ook dat mensen meer moeite hebben met het herkennen of juist interpreteren van de gezichtsuitdrukkingen voor ‘verachting’ en ‘verassing’ dan met die voor ‘blijheid’ en ‘verdriet’. Om gezichtsuitdrukkingen juist te kunnen interpreteren, zo stelt de psychologe Lisa Feldman Barrett, is het kennen van de context onontbeerlijk.",10,70,width-20,height);
180.  text("Gezichtsuitdrukkingen worden gevormd door gezichtsspieren die via zenuwen met de hersenen verbonden zijn en van daaruit worden gecoördineerd. Emoties en gezichtsuitdrukkingen lopen daarom hand in hand. Gebleken is dat, als je oprecht een emotie voelt, je andere gezichtsspieren gebruikt bij het uitdrukken ervan, dan wanneer je een emotie nadoet. Uit onderzoek blijkt dat mensen heel redelijk kunnen inschatten of iemand bijvoorbeeld echt lacht of doet alsof. Verder is gebleken dat, wanneer je een emotie uitbeeld, je deze emotie ook daadwerkelijk gaat ervaren. Dit wordt de ‘facial feedback hypothese’ genoemd. Mensen met een pen tussen de tanden beoordeelden een cartoon bijvoorbeeld als humoristischer dan mensen zonder pen tussen de tanden: de James-Lange theorie. ",10,360,width-20,height);
181.  }
182.  
183.  
184.  void drawScreenSix(){
185.  background(255);
186.  fill(0);
187.  textFont(f,25);
188.  //be sure to use the generelized variable 'myText', otherwise it won't work
189.  text(myText, 160, 250, width, height);
190.  }
191.  void keyPressed() {
192.    //make a beautiful textbox :)
193.  if (keyCode == BACKSPACE) {
194. if (myText.length() > 0) {
195.  myText = myText.substring(0, myText.length()-1);
196.  }
197.  } else if (keyCode == DELETE) {
198.   myText = "";
199. } else if (keyCode != SHIFT && keyCode != CONTROL && keyCode != ALT) {
200.   myText = myText + key;
201.    }
202.   }

that would be a possible graph when you have the correct answers counted

• you now need a way to get the correct answers counted (I have an array for that in line 3 and just filled it in line 17 ff)

I am away tonight but can look tomorrow evening

1. //array maken met woorden
2. String[] cat=new String[7];
3. int[] correctAnswers=new int[7];
4. 
   
5. PFont f;
6. PFont font;
7. size(900, 900);
8. //lettertype en grootte
9. font = createFont("Arial", 12);
10. cat[0]="blijheid";
11. cat[1]="angst";
12. cat[2]="walging";
13. cat[3]="verdriet";
14. cat[4]="verassing";
15. cat[5]="verachting";
16. cat[6]="woede";
17. correctAnswers[0]=3;
18. correctAnswers[1]=9;
19. correctAnswers[2]=0;
20. correctAnswers[3]=7;
21. correctAnswers[4]=3;
22. correctAnswers[5]=2;
23. correctAnswers[6]=12;
24. //rectangle tekenen, eerst variabele aanmaken
25. int rectangleY= 150;
26. rectMode(CORNER);
27. textFont(font, 30);
28. text("Your Answers", width/2-120, 90);
29. //keep track of the answers people give
30. for (int i=1; i<8; i=i+1) {
31.   fill(236, 237, 218);
32.   rect(45, rectangleY, 150, 45);
33.   fill(255, 2, 2);
34.   rect(205, rectangleY, correctAnswers[i-1]*20, 45);
35.   text (correctAnswers[i-1], 205 + 10 + correctAnswers[i-1]*20, rectangleY+35);
36.   fill(0);
37.   text (cat[i-1], 50, rectangleY+35);
38.   rectangleY =rectangleY+45;
39. }

that would be the idea...
I made the changes bold

• In line 40 ff you need to enter the exact number of the right emotion for all images (the right answer).
• These are tested against the answer that is entered via mouse... line 310
• The results are stored in correctAnswers: when it's right, the emotion gets one point more.

The result of the person is shown when he finished all images in the function displayGraphicOfTheAnswersForEmotions()


Other changes
In fact I made some other changes:

• I ordered all the functions so that all screen-related functions are en bloc, all input functions for mouse and keyboard together etc.
• I splitted the very long texts over a few lines by ......."+"...........  - better readable imho
• I separated myTextQuestion from myText because otherwise with backspace one could delete the text "Type hier je naam en leeftijd" as well...
• in setNextScreen I added an exit() at the end (how does the program end anyway? Is the name I enter stored somehow? When I type Enter after my name, the program could move on, save it and terminate or so...)

Cheers, Chrisir   

1. // different screens lead you through a test for recognizing
2. // emotions
3. // -------------------------------------------------------------------
4. // all global variables
5. // screen number
6. int currentScreen;
7. // fonts
8. PFont f;
9. PFont font;
10. int maxImages = 27;
11. int imageIndex = 0;
12. // the images
13. PImage[] images = new PImage[27];
14. int[] rightAnswerPerImages = new int[27];
15. // for drawScreenSix
16. String myTextQuestion = "Type hier je naam en leeftijd";
17. String myText = "";
18. //array maken met woorden
19. String[] cat = new String[7]; // emotions
20. // array
21. int[] correctAnswers = new int[7];  // corrct answers for each emotion
22. float x = 0;
23. float y = 0;
24. float speed = 1;
25. // -------------------------------------------------------------------
26. // the main funcs setup() and draw()
27. void setup() {
28.   //what you want your screen and lettertype to look like.
29.   //Don't forget to 'create font' first (under tools)
30.   size(600, 600);
31.   noStroke();
32.   smooth();
33.   f = createFont("Arial", 20, true);
34.   //lettertype en grootte
35.   font = loadFont("BellMT-48.vlw");
36.   //make a picture array
37.   for (int i = 0; i < images.length; i++) {
38.     images[i] = loadImage("a" + i + ".JPG");
39.   }
40.   rightAnswerPerImages[0] = 7;
41.   rightAnswerPerImages[1] = 2;
42.   rightAnswerPerImages[2] = 2;
43.   rightAnswerPerImages[3] = 1;
44.   rightAnswerPerImages[4] = 0;
45.   rightAnswerPerImages[5] = 4;
46.   rightAnswerPerImages[6] = 5;
47.   rightAnswerPerImages[7] = 6;
48.   rightAnswerPerImages[8] = 7;
49.   rightAnswerPerImages[9] = 1;
50.   rightAnswerPerImages[10] = 2;
51.   rightAnswerPerImages[11] = 7;
52.   rightAnswerPerImages[12] = 7;
53.   rightAnswerPerImages[13] = 7;
54.   rightAnswerPerImages[14] = 7;
55.   rightAnswerPerImages[15] = 7;
56.   rightAnswerPerImages[16] = 7;
57.   rightAnswerPerImages[17] = 7;
58.   rightAnswerPerImages[18] = 7;
59.   rightAnswerPerImages[19] = 7;
60.   rightAnswerPerImages[20] = 7;
61.   rightAnswerPerImages[21] = 7;
62.   rightAnswerPerImages[22] = 7;
63.   rightAnswerPerImages[23] = 7;
64.   rightAnswerPerImages[24] = 7;
65.   rightAnswerPerImages[25] = 7;
66.   rightAnswerPerImages[26] = 7;
67.   //
68. } // func
69. void draw() {
70.   //present your code in different screens
71.   setNextScreen() ;
72. }
73. // -------------------------------------------------------------------
74. // All funcs for the different screens:
75. void setNextScreen () {
76.   switch(currentScreen) {
77.   case 0:
78.     drawScreenZero();
79.     break;
80.   case 1:
81.     drawScreenOne();
82.     break;
83.   case 2:
84.     drawScreenTwo();
85.     break;
86.   case 3:
87.     drawScreenThree();
88.     break;
89.   case 4:
90.     drawScreenFour();
91.     break;
92.   case 5:
93.     drawScreenFive();
94.     break;
95.   case 6:
96.     drawScreenSix();
97.     break;
98.   default:
99.     background(255);
100.     println("Error");
101.     exit();
102.     break;
103.   }
104. } 
105. //draw the first screen
106. void drawScreenZero() {
107.   background(255);
108.   fill(0);
109.   //arrow
110.   triangle(565, 555, 585, 567, 565, 580);
111.   stroke(0);
112.   strokeWeight(3);
113.   line(540, 567, 565, 567);
114.   fill(73, 185, 240);
115.   textFont(f, 40);
116.   text("Herkennen van Emoties", 100, 295);
117.   line(300, 0, 300, 600);
118.   line(0, 300, 600, 300);
119.   fill(255, 231, 5, 200);
120.   if (mouseX  <  300 && mouseY  <  300) {
121.     fill(250, 8, 24, 200);
122.     rect(0, 0, 300, 300);
123.   }
124.   else if (mouseX  >  300 && mouseY  <  300) {
125.     fill(8, 45, 250, 200);
126.     rect(300, 0, 300, 300);
127.   }
128.   else if (mouseX  <  300 && mouseY  >  300) {
129.     fill(20, 211, 37);
130.     rect(0, 300, 300, 300);
131.   }
132.   else if (mouseX  >  300 && mouseY  >  300) {
133.     rect(300, 300, 300, 300);
134.   }
135. }
136. void drawScreenOne() {
137.   background(255);
138.   //arrow
139.   triangle(565, 555, 585, 567, 565, 580);
140.   stroke(0);
141.   strokeWeight(3);
142.   line(540, 567, 565, 567);
143.   fill(0);
144.   textFont(f, 25);
145.   text("Emoties", 10, 50);
146.   textFont(f, 15);
147.   text("‘Wie ogen heeft om te zien en oren om te horen, "+
148.     "kan zich ervan overtuigen dat stervelingen geen geheim kunnen verbergen. "+
149.     "Wanneer iemands lippen zwijgen, kletst hij met zijn vingertoppen; "+
150.     "uit alle poriën dringt het verraad naar buiten’.",
151.   10, 70, width-20, 90);
152.   text("- freud", 10, 140, width, 120);
153.   text("De gevoeligheid voor het lezen van lichaamstaal en gezichtsuitdrukkingen "+
154.     "is een aangeboren mogelijkheid om op indringende en directe wijze met anderen "+
155.     "te communiceren. Lichaamstaal is niet altijd handig. Zoals Freud schreef ‘uit alle "+
156.     "poriën dringt het verraad naar buiten’; het kan moeilijk zijn om je lichaamstaal te "+
157.     "laten corresponderen met je verbale taal. Zonder lichaamstaal, en dan met name "+
158.     "gezichtsuitdrukkingen, zou communiceren echter erg lastig worden! Gezichtsuitdrukkingen "+
159.     "zijn essentieel om emoties te kunnen communiceren. Pakweg 80% van onze communicatie verloopt "+
160.     "via lichaamstaal en zonder zou voor veel miscommunicatie zorgen. Het is niet voor niets dat "+
161.     "er tegenwoordig ook via schriftelijke communicatie gebruik wordt gemaakt van emoticons. "+
162.     "Toch komt miscommunicatie nog veelvuldig voor. Eén van de redenen daarvoor zou kunnen zijn "+
163.     "dat bepaalde gezichtsuitdrukkingen (en emoticons) moeilijker zijn te interpreteren dan andere. "+
164.     "Als dat zo is, dan zal deze ZAP dat kunnen aantonen. Naderhand zal een toelichting gegeven worden.",
165.   10, 190, width-20, height);
166. }
167. void drawScreenTwo() {
168.   background(255);
169.   fill(0);
170.   triangle(565, 555, 585, 567, 565, 580);
171.   stroke(0);
172.   strokeWeight(3);
173.   line(540, 567, 565, 567);
174.   textFont(f, 25);
175.   text("Instructie", 10, 50);
176.   textFont(f, 15);
177.   text("In dit experiment krijg je na elkaar 28 foto’s te zien "+
178.     "waarop verschillende mensen, verschillende emoties uitbeelden. "+
179.     "Geef aan welke emotie jij denkt dat de persoon op de foto uitbeeldt "+
180.     "door een keuze te maken uit een lijstje van beschikbare emoties. Let wel, "+
181.     "zodra je een emotie uit het lijstje hebt aangeklikt ga je onmiddellijk door "+
182.     "naar de volgende foto; je kunt je keuze niet herstellen. Denk dus eerst goed "+
183.     "na en klik dan pas een emotie aan!",
184.   10, 70, width-20, height);
185. }
186. void drawScreenThree() {
187.   background(255); 
188.   textFont(font, 30);
189.   strokeWeight(1);
190.   fill(0);
191.   //put the pictures from the picture array in different categories
192.   cat[0]="blijheid";
193.   cat[1]="angst";
194.   cat[2]="walging";
195.   cat[3]="verdriet";
196.   cat[4]="verassing";
197.   cat[5]="verachting";
198.   cat[6]="woede";
199.   //rectangle tekenen, eerst variabele aanmaken
200.   int rectangleY= 150;
201.   rectMode(CORNER);
202.   textFont(font, 30);
203.   text ("Choose the emotion of the picture", 100, 40);
204.   //keep track of the answers people give
205.   for (int i=1; i<8; i=i+1) {
206.     fill(236, 237, 218);
207.     rect(445, rectangleY, 150, 45);
208.     fill(0);
209.     text (cat[i-1], 450, rectangleY+35);
210.     rectangleY =rectangleY+45;
211.     //pictures all the same size
212.     image(images[imageIndex], 100, 100, width/2, height/1.5);
213.   }
214. }
215. void drawScreenFour() {
216.   background(255);
217.   fill(0);
218.   triangle(565, 555, 585, 567, 565, 580);
219.   stroke(0);
220.   strokeWeight(3);
221.   line(540, 567, 565, 567);
222.   textFont(f, 25);
223.   text("Jouw antwoorden", 10, 50);
224.   displayGraphicOfTheAnswersForEmotions();
225. }
226. void drawScreenFive() {
227.   background(255);
228.   fill(0);
229.   triangle(565, 555, 585, 567, 565, 580);
230.   stroke(0);
231.   strokeWeight(3);
232.   line(540, 567, 565, 567);
233.   textFont(f, 25);
234.   text("Theorie", 10, 50);
235.   textFont(f, 15);
236.   text("In de psychologie is er lange tijd onenigheid geweest over "+
237.     "wanneer van emoties gesproken kan worden en hoeveel emoties er "+
238.     "eigenlijk bestaan. Hanteren we voor het bepalen van emoties bijvoorbeeld "+
239.     "de mate van opwinding of bijvoorbeeld de mate waarin een gebeurtenis "+
240.     "subjectief wordt ervaren? De psycholoog Paul Ekman beargumenteerde dat "+
241.     "het aantal basisemoties gelijk is aan het aantal gezichtsuitdrukkingen "+
242.     "die we kunnen onderscheiden. Aangetoond is dat de gezichtsuitdrukkingen "+
243.     "woede, angst, walging, verdriet en blijheid universeel zijn. Volgens "+
244.     "Ekman kunnen we deze gezichtsuitdrukkingen daarom als emoties doen gelden. "+
245.     "Voor de gezichtsuitdrukkingen verassing en verachting is minder bewijs dat "+
246.     "zij algemeen herkent en erkent worden als emoties. Meestal blijkt dan ook "+
247.     "dat mensen meer moeite hebben met het herkennen of juist interpreteren van "+
248.     "de gezichtsuitdrukkingen voor ‘verachting’ en ‘verassing’ dan met die voor ‘blijheid’ "+
249.     "en ‘verdriet’. Om gezichtsuitdrukkingen juist te kunnen interpreteren, zo stelt de "+
250.     "psychologe Lisa Feldman Barrett, is het kennen van de context onontbeerlijk.",
251.   10, 70, width-20, height);
252.   text("Gezichtsuitdrukkingen worden gevormd door gezichtsspieren die via "+
253.     "zenuwen met de hersenen verbonden zijn en van daaruit worden gecoördineerd. "+
254.     "Emoties en gezichtsuitdrukkingen lopen daarom hand in hand. Gebleken is dat, "+
255.     "als je oprecht een emotie voelt, je andere gezichtsspieren gebruikt bij het "+
256.     "uitdrukken ervan, dan wanneer je een emotie nadoet. Uit onderzoek blijkt dat "+
257.     "mensen heel redelijk kunnen inschatten of iemand bijvoorbeeld echt lacht of doet "+
258.     "alsof. Verder is gebleken dat, wanneer je een emotie uitbeeld, je deze emotie ook "+
259.     "daadwerkelijk gaat ervaren. Dit wordt de ‘facial feedback hypothese’ genoemd. "+
260.     "Mensen met een pen tussen de tanden beoordeelden een cartoon bijvoorbeeld als "+
261.     "humoristischer dan mensen zonder pen tussen de tanden: de James-Lange theorie. ",
262.   10, 360, width-20, height);
263. }
264. void drawScreenSix() {
265.   background(255);
266.   fill(0);
267.   textFont(f, 25);
268.   //be sure to use the generalized variable 'myText', otherwise it won't work
269.   text(myTextQuestion, 160, 280, width, height);
270.   text(myText, 160, 350, width, height);
271. }
272. // -----------------------------------------------------------------------------------
273. // All Inputs come here:
274. void mouseClicked() {
275.   //continue on to the next screen by clicking on the arrow, unless ur on screen 3
276.   if (currentScreen !=3 && (mouseX<585)&&(mouseX>540) && (mouseY<580)&&(mouseY>550)) {
277.     currentScreen++;
278.     if (currentScreen > 6) {
279.       currentScreen = 0;
280.       //stop at screen 6, that's where the program should end instead of starting from the beginning
281.       if (currentScreen !=6) {
282.         currentScreen = 6;
283.       }
284.     }
285.   }
286. }
287. void keyPressed() {
288.   // make a beautiful textbox :)
289.   // if (currentScreen == 6) {
290.   if (keyCode == BACKSPACE) {
291.     if (myText.length() > 0) {
292.       myText = myText.substring(0, myText.length()-1);
293.     }
294.   }
295.   else if (keyCode == DELETE) {
296.     myText = "";
297.   }
298.   else if (keyCode != SHIFT && keyCode != CONTROL && keyCode != ALT) {
299.     myText = myText + key;
300.   }
301. }
302. void mousePressed() {
303.   //when you press the mouse within these boundaries, go on to the next picture
304.   if (currentScreen==3 &&
305.     (mouseX<595)&&(mouseX>445) &&
306.     (mouseY<480)&&(mouseY>165)) {
307.     int CatPressed = floor((mouseY-165)/ 45);
308.     // his or her answer
309.     println (cat[CatPressed]);
310.     if (rightAnswerPerImages[imageIndex] == CatPressed) {
311.       // got one more point for that emotion
312.       correctAnswers[CatPressed]++;
313.     }
314.     println (images[imageIndex]);
315.     imageIndex++;
316.     //go through all the pictures of the array, and when you've shown the last picture, continue on to the next screen
317.     if (imageIndex>=images.length) {
318.       currentScreen++;
319.     }
320.   }
321. }
322. //
323. // -----------------------------------------------------------------------------------
324. // help functions
325. //
326. 
     
327. void displayGraphicOfTheAnswersForEmotions() {
328.   // show right answers per emotion
329.   //
330.   //rectangle tekenen, eerst variabele aanmaken
331.   int rectangleY= 150;
332.   rectMode(CORNER);
333.   textFont(font, 30);
334.   // show right answers per emotion
335.   for (int i=1; i<8; i=i+1) {
336.     fill(236, 237, 218);
337.     rect(45, rectangleY, 150, 45);
338.     fill(255, 2, 2);
339.     rect(205, rectangleY, correctAnswers[i-1]*20, 45);
340.     text (correctAnswers[i-1], 205 + 10 + correctAnswers[i-1]*20, rectangleY+35);
341.     fill(0);
342.     text (cat[i-1], 50, rectangleY+35);
343.     rectangleY =rectangleY+45;
344.   } // for
345. } // func
346. //