Loop / Loop

setup() で noLoop() が実行されると、draw() 内のコードは一度だけ実行されます。この例では、マウスをクリックすると loop() 関数が実行され、draw() が継続的に実行されるようになります。

loop mouse flow
Structure Interaction

View Source Code

/*
 * @name Loop
 * @arialabel Horizontal white line on a black background that moves from the bottom to the top of the screen parallel to the x-axis
 * @description If noLoop() is run in setup(), the code in draw() 
 * is only run once. In this example, click the mouse 
 * to run the loop() function to cause the draw() the 
 * run continuously. 
 */
let y = 0;

// The statements in the setup() function
// execute once when the program begins
function setup() {
  // createCanvas(720, 400);
  createCanvas(windowWidth, windowHeight);
  stroke(255); // Set line drawing color to white
  frameRate(30);
  noLoop();
}
// The statements in draw() are executed until the
// program is stopped. Each statement is executed in
// sequence and after the last line is read, the first
// line is executed again.
function draw() {
  background(0); // Set the background to black
  y = y - 1;
  if (y < 0) {
    y = height;
  }
  line(0, y, width, y);
}

function mousePressed(){
  loop();
}

License

Source code is available on GitHub p5.js website legacy.

All examples are licensed under CC BY-NC-SA 4.0.