Using p5js

Shares & Ideas

Description	Creator	editor.p5js code
ASCII 6-direction keyboard movement	Korey	3nA3cA9MP
L systems	Korey	ADUzdPtx8
Opus Magnum clone	!?	!?
LED Light Grid	Dr. Em	light grid

Snippets

Maximize board size

"Maximize" the board and focus it. Automatically adjust to the window size.

function setup() {
  /* snip */
  this.focus();
}

function windowResized() {
  resizeCanvas(window.innerWidth, window.innerHeight);
}

Usage notes:

• windowResized
  • called repeatedly during the resize (not just when it "finishes")
  • has an optional Event parameter
• resizeCanvas
  • clears the board then calls draw()
  • to not call draw(), pass the optional third argument NoRedraw=true (the canvas is still cleared)

Output a .gif

Use saveGif('yourFileName', durationInSeconds). To autorecord, put it in setup(). For a keypress, add it to keyPressed().

Usage notes:

• It uses the sketch's framerate, not actual time. With the default fps of 60 a "5 second" gif would be however long it takes to capture 300 (60 * 5) frames. See: frameRate()
• The above gif is from Simulate Particle