All codes seem to be correct, but no response from system

p5.js Coding Questions
1

Still working on the tic tac toe, I have almost done the whole coding. Right now I am working on the random picking of players. When even the console.log is working, there is no response from the system. Would like to ask where the problem is? Thanks!

Code: p5.js Web Editor

2

Hello Justin,

You have a noLoop() in draw(), that’s why nothing happens.

That’s not how you want to handle your turn.
Your draw needs to keep drawing the game, but what needs to be drawn needs to change over time.

For example in the following code, the canvas is constantly drawn. When the mouse is clicked, a new ellipse is created and then displayed in the for loop of the draw() function.

let ellipses = [];


function setup() {
  createCanvas(400, 400);
  ellipses.push(createVector(20, 20));
}

function draw() {
  background(20);
  noStroke();
  fill(220);

  for (let i = 0; i < ellipses.length; i++) {
    let x = ellipses[i].x;
    let y = ellipses[i].y;
    ellipse(x, y, 10, 10);
  }
}

function mouseClicked() {
  ellipses.push(createVector(mouseX, mouseY));
}
1 Like
3

Thank you! So what I have to do is only to include the for loop in my function draw( )? Sorry I don’t really get what is going on for the functions.

4

Hello,

These do need to be in each cycle of draw():

//let players = ['0', '1'];
//let p = random(players);
//noLoop();

Add global variables:

 let players = ['0', '1'];
 let p;

setup() runs once so create p there:

p = random(players);

I just took a quick look and got some game play with the changes.

:)

References:

I added colors and moved text:
image

5

Thanks! Then I kinda get it. Does it mean that when it is in function setup( ), the p = random(players) apply to every turn of the game, instead of only applying to first turn when it is in function draw( )?