P5.js resources and tips

Online editors

https://openprocessing.org

https://editor.p5js.org

Books and tutorials

By Daniel Shiffman

The Nature of Code

https://thecodingtrain.com/

http://learningprocessing.com/

http://www.generative-gestaltung.de/

I have the old version, which uses regular Processing. The new version uses p5.js. Lots of beautiful examples and breaks down generative artworks into conceptual chunks to help you create them piece-by-piece

https://thatcreativecode.page/

Tyler Hobbs’s aesthetically pleasing triangle subdivision

i++’s Making gifs with p5.js

Finding examples to learn from

Check out Open Processing or the P5js.org editor.

Generative art platforms

Code for Art Blocks projects is accessible on the Art Blocks Subgraph

{
projects(where: {projectId: "171"}) {
id
projectId
scripts {
id
script
}
}
}

endlessways.net and fxhash.xyz: View a live version of an artwork, then view the source. Since it is all rendered in browser via javascript, the code is there.

Libraries

https://github.com/antiboredom/p5.patgrad

p5.pattern by Sayama

Kim Asendorf’s pixel sort

p5.scribble

p5.brush

Embedding in posts with https://toolness.github.io/p5.js-widget/



function setup() {
createCanvas(400,400);
}

function draw() {
background(255);

quad(10, 10, 300, 30, 390, 375, 40, 290);
}

