mousePressed event executes before keyPressed Processing

Question

This bug has seriously ruined my week. I'm trying to create an interactive leaderboard and in it are three arrays: 1 with images and 2 with integers that I wrote as strings. I'm trying to make a keyPressed event that'll make the numbers change with the images representing the teams as they go up or down the ladder and I have a mousePressed event to execute a loop to revert the window back to its original state.

My problem is when I try to run the code the keyPressed event doesn't execute and only does so after I click on the mouse. Then the images move but the string array doesn't loop back with the first set of images. I have included the code below...I know it is lengthy and trust I have been refractoring and shortening as I go. Right now what I would like help with is making sure the keyPressed event executes first and the the positions1 string array reverts back to its original position when the loop executes.

I have included my code below and am working on a Macbook Pro OSX Processing 2.0b7.

I refractored my code and used loops to place the images and text. Now the problem I have is that the images and text don't change when I initiate the keyPressed event. Could you please look at my code:

PImage[] teams;
int n = 24;
PImage[] teams2;
int m = 16;
PImage quarterFinalWinners = new PImage();
float damping = 0.1;
PFont font;
String[] positions1 = {"18", "26", "32", "45", "58", "56", "59", "61", "66", "69", "71", "85", "98", "100", "116", "133"};
String[] positions2 = {"14", "19", "25", "30", "34", "45", "52", "69", "71", "72", "87", "84", "89", "105", "107", "110"};
float x;
float y;

/**----------------------------------------------------------------------------------------------------------------------------**/

void setup() {
  size(600, 1600);
  frameRate(60);
  smooth();

  font = loadFont("Calibri-Bold-48.vlw");
  textFont(font);

  frame.setResizable(true);

  teams = new PImage[n];
    for (int i = 0; i < teams.length; i++) {
      teams[i] = loadImage(i + ".png");
    }

  teams2 = new PImage[m];
    for (int i = 0; i < teams2.length; i++) {
      teams2[i] = loadImage(i + ".jpg");
    }
}

/**----------------------------------------------------------------------------------------------------------------------------**/

void draw() {
  //noLoop();
  background(0);

  if ((x < width) && (y < height)) {
for (int i = 0; i < 16; i++) {
  image(teams[i], 150, 60*i);
  text(positions1[i], 100, 72*i);
     }
    }

 if (keyPressed) {
if((key == 's') || (key == 'S') && (x < width) && (y < height)) {
  for (int i = 0; i < 16; i++) {
  image(teams[i], 150, 60*i);
  text(positions1[i], 100, 72*i);
  }

   for (int i = 0; i >= 16; i++) {
  text(positions2[i], 100, 72*i); 
    }
   }
  }
}

/**----------------------------------------------------------------------------------------------------------------------------**/

/**void keyPressed () {
if((key == 's') || (key == 'S') && (x < width) && (y < height)) {
   for (int i = 0; i > 16; i++) {
  image(teams[i], 150, 60*i);

}

   for (int i = 0; i >= 16; i++) {
  text(positions2[i], 100, 72*i); 
    }
}
}**/

     /**image(images[10], 150, 290);
  image(images[19], 150, 50);
  image(images[17], 150, 230);
  image(images[2], 150, 110);
  image(images[22], 150, 410);
  image(images[20], 150, 470);
  image(images[16], 150, 650);
  image(images[6], 150, 350);
  image(images[7], 150, 590);
  image(images[18], 150, 770);
  image(images[21], 150, 170);
  image(images[12], 150, 830);
  image(images[13], 150, 530);
  image(images[23], 150, 950);**/

void mousePressed () {
      if (mousePressed) {
      positions2 = positions1;
      }
     loop();
      }

Answer 1

Reduce your code, first. In order to demonstrate the problem so that others can help, most of this code can be removed. Two images and two integers, for instance should be enough, with minimal keyPressed and mousePressed functions.

That said, there are also real problems in your code. In mousePressed, for instance, you don't test to see if(mousePressed). It is, that's why mousePressed() is being called. You also call loop(), which does nothing. The loop() and noLoop() functions only determine whether to call draw() again once draw() finishes. loop() will change the sketch mode from "event based" to "constant framerate", noLoop() does the reverse - what you really want to do is simply trigger redraws when necessary, using redraw() at the end of your event handling.

The default Processing framerate is 60, so frameRate(60) will not do anything. You're also using a .vlw font, which isn't actually a font but an image format. font = createFont("Calibri.ttf", 16); is much safer since it'll run on systems that reject the .vlw font (such as when running your sketch in a browser).

Your code also doesn't swap arrays, it reassigns the array variables to point to the same thing. On keyPressed, "positions1 = positions2" means that positions2 is positions2, of course, but positions1 is also positions2. You now have two variables pointing to the same array. Any changes you make through either positions1 or positions2 will now change the same array, and any further key or mouse pressing that does "positions2 = positions1" will now do nothing, because they already point to the same thing, so reassignment will preserve that.

So to best help you out, here's some code that does roughly what you want, to get you started, but I strongly recommend hanging out somewhere where you can ask questions while you're programming (like the Processing IRC channel or the forum), because there's a lot of using the wrong functions and ideas in your code right now, which means you don't understand the language yet and you want other people to look at snippets to say whether or not you're doing something sensible, or something very wrong.

String[] positions, prevPositions;

void setup() {
  // setup two identical-content arrays
  positions = new String[]{"1","a","b","c"};
  prevPositions = new String[]{"1","a","b","c"};
  // don't draw at a constant framerate. we'll redraw
  // based on key/mouse events
  noLoop();
}

void draw() {
  // white background, black text
  background(255);
  fill(0);
  // just draw the first thing in "position"
  text(positions[0], width/2, height/2);
}

void keyPressed () {
  // cache what the array looks like
  arrayCopy(positions,0,prevPositions,0,positions.length);
  // modify the positions list
  positions[0] = ""+ (int(positions[0])+1);
  // redraw now that our state has changed
  redraw();
}

void mousePressed () {
  // revert to previous array. We can only do this once.
  // if someone pressed the key seven times, we can't revert
  // seven times, because the code only has one history state
  // that is updated every time a key is pressed
  arrayCopy(prevPositions,0,positions,0,positions.length);
  // redraw now that our state has changed
  redraw();
}