Unit 1 Drawing, Variables, Random

Suggested Duration

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

• LA 1 Create a Grayscale Drawing
  • 1.1 p5.js Introduction and Deconstruction
  • 1.2 Line Functions and Parameters
  • 1.3 Rectangles, Ellipses, and Layering
  • 1.4 Various Shapes, Stroke Weight, Fill()
  • Mini-Project - Taijutu Symbol

• LA 2 Make It Vary
  • 2.1 Center elements with built-in variables: width and height
  • 2.2 Custom Variables
  • 2.3 Place elements at random positions
  • Mini-Project - Custom Emoji

• LA 3 Make It Colorful
  • 3.1 Intro to Color
  • 3.2 RGB vs. HSB colorMode
  • 3.3 Color Palettes and Design