class-02.md

Class 2

🛠️ Basic drawing tools

• The graphics context refers the current image that's displayed, and the underlying technology used to draw and manipulate it, and keep track of it
  • It also refers to the current state of the canvas
• p5js is built upon the html <canvas> element
  • p5js & Processing draw in a certain type of way
    • Shapes, image, text are the primary tools
    • Compare to drawing tools with scene graphs (Unity, THREE.js)
  • Not the most performant
  • Amazing ease-of-use
  • Very popular to create art and learn graphics techniques
• WEBGL mode
  • WebGL is faster and more capable
  • WebGL coordinate system is at the center of the canvas
  • WebGL doesn't use normal <canvas> operations, so drawing can look a little different
  • WebGL is uglier in a lot of cases
    • example
• Professional data viz example
  • Rounds of design & UX testing
  • Not a common tool for my job, but useful in this case
  • I use Processing for my work
• Example sketch about context
• Adjust the following properties on the context before drawing a shape
  • fill()
  • stroke()
  • translate()
  • push() / pop()
  • scale()
  • rotate()
    • CORNER vs. CENTER (example)
• We've seen many different ways of drawing a shape (ellipse(), rect()), but let's also consider:
  • image()
    • Make sure you load the image with loadImage() before drawing
    • Image example (basic)
  • text()
    • Custom fonts: Make sure you load the font first
      • Example
      • Example (WEBGL)
• Advanced context topics
  • drawingContext - gives you access to the underlying canvas context
    • Glow Example
  • Clipping
  • Dynamic Masking
    • Fancier Masking

🛠️ Iteration

• for() loops
  • Good for doing something many times
  • Work hand-in-hand with Arrays
• Nested for() loops
  • drawGrid()
  • Grid 2D
  • Grid 2D w/labels
  • Grid 2D w/objects in array
  • Grid 2D: Pixelated video/webcam
  • Grid 3D

🛠️ Layout

• Layout demo

🛠️ AI demo

• How can AI help us with some of these concepts?

📝 Homework:

Read:

• "Why Love Generative Art?" - A history of the medium

Watch:

• Robert Hodgin @ Eyeo 2014 - watch at least the first 13 minutes
  • If you love this, watch Robert Hodgin @ Eyeo 2012

Browse & collect inspiration. Post your favorite sketches in Canvas!

• OpenProcessing
• CodePen
• ShaderToy
• Justin's inspiration links

Program a poster

• Use shapes, color, type, images
• If you're not great with colors, use a palette generator
• Find inspiration and borrow ideas if you're not a natural designer. If you really want to keep it simple, replicate an existing design, but credit the original designer in the comments.
• If you are a designer, try to make something more contemporary, or in your own style
• For stretch goals:
  • Use grids
  • Swap colors with a key press or mouse position
  • Make multiple posters
  • Randomize elements
• Make your canvas big, and use this function to scale it down, so you can fit it onto screen

📋 Review code

• Present your ATLAS "A" programs