Chuck's Notes

• 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
    }
  }
}Code language: JavaScript (javascript)

• 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

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

<script src="//toolness.github.io/p5.js-widget/p5-widget.js"></script>
<pre><script type="text/p5" data-autoplay="" data-height="500" data-preview-width="500" data-p5-version="1.4.1">
function setup() {
 createCanvas(400,400);
}

function draw() {
  background(255);
  
  quad(10, 10, 300, 30, 390, 375, 40, 290);
}
</script>
</pre>Code language: HTML, XML (xml)