Documentation & Learning

• The Coding Train - link
  • See this video track for explanations of beginner concepts
  • Dan Shiffman’s series of lectures on generative art and creative art. Incredibly fun and colorful.
• p5.js documentation is here
  • Shapes - see ‘2d primitives’ on p5.js documentation
    • Create a custom shape with the commands listed under ‘Vertex’
  • Under ‘Events’ you can see commands to detect clicks and user interaction
  • p5 has a few helper variables that are useful like:
    • width and height for canvas size
    • windowWidth and windowHeight for screen size
    • mouseX and mouseY to get mouse position
• Computation Form website - link
  • A course on generative art by my former professor, Justin Bakse. All course lectures and exercises are documented on this website

Example Sketches

• Example sketches on OpenProcessing - link

Programming Techniques

• For Loops

  • Use this to generate many items on a page

    for (let x = 0; x <= width; x += 50) {
            fill(255, 0, 200);
            ellipse(x, 300, 25, 25);
        }
    

• If statements

  • Use this when you want to create different choices or dependencies

    let diceRoll = Math.round(random(1, 6));
    
    if (x < 3){
    	console.log('low roll sorry')
    } else {
    	console.log('wow lucky roll')
    }
    

• Store items in variables

  • let x = 5;

  • If you want to store many variables, or many values, you can use data structures like arrays

    let valueArray = [1, 5, 6, 7, 8];
    
    let x = 5, y = 3, z = 10;
    let secondArray = [x, y, z]
    

Visualization Techniques

• Think of all the parameters you can play with when creating a shape
  • The placement of lines and points - i.e. the composition of the shape
  • The shape background, or fill
  • The border, or stroke - width and color
  • The shape placement - x and y location
  • Rotation in degrees
  • Shear rotation - rotate along x-axis
• Use loops and functions to place many items on the canvas with few lines of code
• How can you incorporate user interaction? Should the visual change on hover or click?