Introduction to Computational Media with p5.js

Unit 1 Drawing, Variables, Random

How can code be used as a creative and expressive medium?
Grade 9-12


In this unit students get acquainted with the p5 canvas coordinate system, drawing shapes and colors on it. Programming concepts covered include calling built-in p5 functions with different parameters, working with variables (both built-in and custom), and using controlled randomness.

Suggested Duration

Duration based class meeting 5x a week with 45 min periods

Big Ideas

  • Code as a creative and expressive medium
  • The concept of creating design systems: programmatically defining ranges for positions, dimensions, and colors, by using variables, randomness, and repetition. Drawing as collaboration between designer and system.

Enduring Understandings

  • Understand the basics of computation (execution flow, function calls, variables)
  • Understand the basics of 2D computer graphics: drawing on a canvas, the coordinate system, calling drawing functions, setting colors in different color spaces
  • Understand the application of variables, repetition and randomness to the creation of parametric drawings

Blueprint Student Outcomes

  • Abstraction
    • Analyze
      • Give examples of specific patterns in something I can see, do or touch.
      • Describe how I might use patterns to express an idea.
    • Prototype
      • Describe different things I tried in order to achieve a goal.
      • Explain why I chose to include the specific components of my prototype over others.
    • Communicate
      • Explain how I might help others identify patterns.
      • Explain why using patterns is necessary when creating with a computer.
  • Algorithms
    • Analyze
      • Describe more than one set of instructions that might complete a task.
      • Describe how instructions can have different outputs depending on inputs.
    • Prototype
      • Explain why I used specific instructions to complete a task.
    • Communicate
      • Compare and contrast my instructions with other instructions that complete the same task.
  • Programming
    • Analyze
      • Experiment with the commands of a programming language.
      • Describe three ways a development environment helps me create a project.
      • Describe tools and processes needed to collaborate on programming projects.
    • Prototype
      • Explain why I chose specific commands to communicate my instructions.
      • Describe the changes I made after testing at least three parts of my program.
      • Explain how I used or remixed someone else’s project in my prototype and give them credit.
    • Communicate
      • Discuss what can and cannot be done with a specific set of commands.
      • Teach another person how to use a development environment and the basics of programming.
      • Present the challenges, and benefits of using tools to program collaboratively.

Lesson Sequence

Example Repository