ProcessingJS: Draw doesn't appear to be looping?

Question

ProcessingJS: My draw doesn't appear to be looping. I'm trying to make a simple game where I have a box at the bottom, and the blocks fall from the top and you need to catch them. But draw doesn't seem to be looping like it should so as a temporary solution I'm using redraw upon key pressed. I've tested other programs written by others on my web server and they work. Is there a problem in my code?

EDIT: changed code to conform with suggestions - still not working example at: http://jordantheriault.com/processing/test.html

EDIT2: I've narrowed it down to the nested for loops in draw.

//Size of each cell box
int cellWidth = 25;

//Width and height of playable space in cells
int w = 8, h = 15;

//Player position
int playerX = 0, playerY = h-1;

//Score
int score = 0;
int lives = 10;

int[][] map = new int[w][h];
// 1 = player
// 2 = object to catch

void setup()
{
  size(cellWidth*w+1, cellWidth*h+1);
  background(51);
  fill(255);

  frameRate(30);

  //starting position for player
  map[playerX][playerY] = 1;

}

void draw(){  
    if(lives > 0)
    {
        background(51);

        //Draw objects onto map
        for(int i = 0; i < width-1; i++)
        {
            for(int j = 0; j < height-1; j++)
            {
                if(map[i][j] == 1)
                {
                    fill(255);
                    rect(i * cellWidth, j * cellWidth, cellWidth, cellWidth);
                }
                if(map[i][j] == 2)
                {
                    fill(200);
                    rect(i * cellWidth, j * cellWidth, cellWidth, cellWidth);
                }

            }
        }

        //Generate new object to catch
        if (frameCount%5==0) {
            //Move squares
            //TODO

            //Generate new
            newSquare = random(0,w-1);
            println(newSquare);
            map[newSquare][0] = 2;
        }
        text("Score: " + score, 5, 15); 
    }
    else
    {
        text("Game over! Press x to start again.", 10, (h*cellWidth)/2); 
        noLoop();
    }
}

void keyPressed() 

{
    //Todo: check for collisions

    if (key == 'a') {
            if(playerX != 0)
            {
                if(map[playerX-1][playerY] == 2 || map[playerX][playerY-1] == 2)
                    score++;
                map[playerX][playerY] = 0;
                playerX -= 1;
                map[playerX][playerY] = 1;
                println("Left Pressed");
                redraw();
             }
        }
     if (key == 'd') {
        if(playerX != w-1)
            {
                if(map[playerX+1][playerY] == 2 || map[playerX][playerY-1] == 2)
                    score++;
                map[playerX][playerY] = 0;
                playerX += 1;
                map[playerX][playerY] = 1;
                println("Right pressed");
                redraw();
             }
        }
        if(key == 'x' && lives < 1)
        {
            score = 0;
            lives = 10;
            //reset game
        }
}

Answer 1

If you want event based updating, you'll need to call redraw() at the end of your event handlers (before they would return, not literally only at the end of the function definition) so that the draw function gets called. Don't use loop(), as that simply turns the automatic next-frame-scheduling code back on (the loop/noLoop functions only control whether the sketch should be automatically scheduling frames).

Also, note that using noLoop with a frameRate won't do anything. The first voids the second.

Finally, note that frameRate(300) is insane ;) You're asking Processing to run all your draw code in a fraction over 3 milliseconds. That's not going to happen.