Redraw / Redraw

redraw() 関数は、draw() を一度だけ実行させます。この例では、マウスがクリックされるたびに draw() が一度実行されます。

redraw mouse flow
Structure Interaction

View Source Code

/*
 * @name Redraw
 * @arialabel Horizontal white line across a black background that moves higher on the screen with each mouse click
 * @description The redraw() function makes draw() execute once. In this example,
 * draw() is executed once every time the mouse is clicked.
 */

let y;

// The statements in the setup() function
// execute once when the program begins
function setup() {
  // createCanvas(720, 400);
  createCanvas(windowWidth, windowHeight);
  stroke(255);
  noLoop();
  y = height * 0.5;
}

// 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);
  y = y - 4;
  if (y < 0) {
    y = height;
  }
  line(0, y, width, y);
}

function mousePressed() {
  redraw();
}

License

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

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