Week 3

Variables, Scope, and the Canvas

Intro

This week we’ll be moving from drawing ‘declaratively’ using HTML & CSS to drawing ‘imperatively’ using JavaScript and p5.js.

Sync Up

• HTML & CSS questions
• Look over the CSS-based interpretations of your source artwork
• An introduction to JavaScript and the Canvas
  • Code examples
    1. hello world
    2. drawing shapes
    3. layout variables
    4. custom functions
  • P5 functions used in the examples
    • createCanvas
    • print
    • fill / noFill
    • stroke / noStroke
    • rect / square
    • ellipse / circle

Activities

• Sign up for an account at editor.p5js.org
• Learn about p5:
  • Getting started with p5
    • Using color
    • The coordinate system
  • Reference documentation for every p5 function and variable
• Learn about JavaScript in general (skim these for what’s relevant to your current understanding of js):
  • MDN’s introductory tutorials
  • P5’s all-in-one-page crash course
• If you prefer video tutorials:
  • This Programming with p5.js series is recommended by the devs

Assignment

• Create a p5-based version of each of your 8, 16, 32, and 64 shape compositions
  • Details: read the Drawing with JavaScript section of the project page
  • Starter Template: create a duplicate of this P5 Editor project
  • Due date: 9/24 by 6 a.m. EDT
  • Format: A P5 Editor-based project with javascript versions of your compositions in the four numbered folders
  • How to submit: Paste the link to your p5 project into this form