[1.0 JS] Introduction to Computational Media
  • Introduction to Computational Media
  • How to Use this Curriculum
  • Submit Feedback
  • Curriculum Extras
    • ๐Ÿ”ฎCurriculum Extras Overview
    • Imposter Syndrome (pt. 1)
      • Imposter Syndrome (pt 2)
    • Timers in p5.js
    • Time Functions: Crazy Clock Mini Project
    • Using Sliders
    • Getting Sound from Mic
    • Sound Recognition with ml5
  • Unit 1: Drawing, Variables, and Random
    • ๐Ÿ”ฎUnit 1 Overview
    • U1LA1.1 p5.js Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4 Various Shapes, Stroke, Weight, Fill
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1 Intro to Variables - System Variables
    • U1LA2.2 Custom Variables in p5.js
    • U1LA2.3 Random Function & Variables
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU1LA2 Mini Project: Custom Emoji pt. 1
    • U1LA.3.1 Intro to Color
    • U1LA3.2: RGB vs HSB Color Modes
    • U1LA3.3 Color Palettes & Design
    • ๐ŸŽจ๐ŸŽจ Unit 1 Final Project: Abstract Album Art
  • Unit 2: Respond & Draw on Canvas
    • ๐Ÿ”ฎUnit 2 Overview
    • U2LA1.1 - Conditionals and if statements
    • U2LA1.2 - Conditionals and if, else if, else statements
    • U2LA1.3 - Logical Operators And/Or
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU2LA1 Mini Project: Make a Traffic Light ๐Ÿšฆ
    • U2LA1.4: Draw with Mouse
    • U2LA1.5: The Map Function
    • U2LA2.1 - Collision with Collide2D
    • U2LA2.2: Mouse Clicks && Shapes As Buttons
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU2LA2 Mini Project: Light Switch Game
    • U2LA3.1: Key Presses && Nested Conditionals
    • ๐ŸŽจ๐ŸŽจ Unit 2 Final Project: Interactive Drawing App
  • Unit 3: Arrays, Loops, Media
    • ๐Ÿ”ฎ๐Ÿ”ฎ Unit 3 Overview
    • U3LA1.1: While Loops
    • U3LA1.2: For Loops Pt 1
    • U3LA1.3: Nested For Loops (For Loops pt 2)
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA1 Mini Project: Wallpaper Design
    • U3LA2.1: Introduction to Arrays
    • U3LA.2.2: Arrays with floor() and random()
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA2 Mini Project 1: Fortune Teller
    • U3LA2.3: Loops and Arrays
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA2 Mini Project 2: Random Starfield
    • U3LA3.1: Preload && Images
    • U3LA3.2: Tint && Image Manipulation
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA2 Mini Project 3: Vision Board
    • U3LA3.3: Images and Arrays with ml5
    • U3LA4.1 Fonts && Text Styling
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA4 Mini Project 4: Typography
    • U3LA5.1: Loading & Playing Sound Files
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒU3LA5 Mini Project: Keyboard/Patatap
  • ๐ŸŽจ๐ŸŽจUnit 3 Final Project: Random Meme Generator
  • Unit 4: Motion, Animation, Transformation
    • ๐Ÿ”ฎ๐Ÿ”ฎ Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move In All Directions & Make it Bounce
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒ U4LA.1: Make a Floating DVD Logo
    • U4LA2.1: Translation Battleship
    • U4LA2.2: Rotations
    • U4LA3.1: Sine & Oscillating Motion
    • U4LA3.2: Cosine & Circular Motion
    • ๐ŸŽจ๐ŸŽจ Unit 4 Final Project: Animated Greeting Card/PSA
  • Unit 5: Functions & Abstraction
    • ๐Ÿ”ฎ๐Ÿ”ฎ Unit 5 Overview
    • U5LA1.1: What is Abstraction?
    • U5LA1.2: Intro to Functions & Function Calls
    • U5LA1.3: Draw with Functions
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒ U5LA1 Mini Project: Custom Function Library
    • U5LA2.1: Data Type Scavenger Hunt
    • U5LA2.2: Functions that Return Values
    • U5LA2.3: Functions with Purpose
    • U5LA2.4: Functions with Boolean Returns
    • ๐Ÿ—ƒ๏ธ๐Ÿ—ƒ U5LA2 Mini Project: Build Your Own Challenge
    • ๐Ÿ”ฎ๐Ÿ”ฎ Unit 5 Final Project: Menu of Options
Powered by GitBook
On this page
  • Overview
  • Nota Bene
  • Blueprint Foundational Student Outcomes
  • NYS && CSTA Standards
  • Suggested Duration
  • Prerequisites
  • Overview of Instructional Materials
  • Sequence of Lessons

Was this helpful?

  1. Unit 1: Drawing, Variables, and Random

Unit 1 Overview

Essential question: How can code be used as a creative and expressive medium?

PreviousSound Recognition with ml5NextU1LA1.1 p5.js Introduction & Deconstruction

Last updated 2 years ago

Was this helpful?

Overview

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.

Students are introduced to the p5 web editor and practice consulting the p5 online documentation. In the final project, students apply these skills to create an abstract album cover.

Nota Bene

We do not include a proper Unit 0 in this curriculum - the lessons begin with students thinking about p5.js. However, we strongly recommend planning a Unit 0 for your classroom to allow you to set a positive classroom culture and establish norms with your students. .

Blueprint Foundational Student Outcomes

Concept

ANALYZE

PROTOTYPE

COMMUNICATE

Abstraction

Give examples of specific patterns in something I can see, do or touch.

Describe how I might use patterns to express an idea.

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.

Explain how I might help others identify patterns.

Explain why using patterns is necessary when creating with a computer.

Algorithms

Describe more than one set of instructions that might complete a task.

Describe how instructions can have different outputs depending on inputs.

Explain why I used specific instructions to complete a task.

Compare and contrast my instructions with other instructions that complete the same task.

Programming

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.

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.

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.

NYS && CSTA Standards

NYS Standards

  • 9-12.CT.5 Modify a function or procedure in a program to perform its computation in a different way over the same inputs, while preserving the result of the overall program.

  • 9-12.CT.7 Design or remix a program that utilizes a data structure to maintain changes to related pieces of data.

  • 9-12.CT.9 Systematically test and refine programs using a range of test cases, based on anticipating common errors and user behavior.

  • 9-12.CT.10 Collaboratively design and develop a program or computational artifact for a specific audience and create documentation outlining implementation features to inform collaborators and users.

  • 9-12.DL.1 Type proficiently on a keyboard.

  • 9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.

CSTA Standards

  • 3A-AP-13 Create prototypes that use algorithms to solve computational problems by leveraging prior student knowledge and personal interests.

  • 3A-AP-21 Evaluate and refine computational artifacts to make them more usable and accessible.

  • 3A-AP-22 Design and develop computational artifacts working in team roles using collaborative tools.

  • 3A-AP-23 Document design decisions using text, graphics, presentations, and/or demonstrations in the development of complex programs.

  • 3A-CS-03 Develop guidelines that convey systematic troubleshooting strategies that others can use to identify and fix errors.

Suggested Duration

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

2 weeks, without class projects ~ 7.5 hrs

3+ weeks, with projects 11.25 hrs

Some classrooms may need more time based on the time allotted to finish various project activities.

Prerequisites

None - this is the start of the unit! While some students may have some programming experience, we are assuming that they are coming in without any prior programming experience.

Overview of Instructional Materials

Each learning activity on the curriculum website has been broken down into 1-2 period lessons. The resources below are teacher-facing notes on the suggested implementation for the curriculum; they include structures for content delivery, suggestions for assessment, and resources for each lesson segment. At the end of each learning activity is a slightly longer project to serve as a summative assessment; at the end of the unit, there is an end of unit project.

Teachers should review these materials and use them as they apply to their classroom. This is the suggested implementation, but it should be modified to fit student population, class period constraints, etc.

Sequence of Lessons

LA 1: Create a Greyscale Drawing

LA 2: Make it Vary

LA 3: Make it Colorful

U1LA1.1 - p5.js & Editor Intro, unplugged robot activity

U1LA1.2 - Greyscale, drawing lines

U1LA1.3 - Rectangles, Ellipses & layering

U1LA1.4 - Various Shapes, stroke and stroke weight

U1LA1 - Mini project: Taijitu Symbol

U1LA2.1 - Intro to Variables (System Variables)

U1LA2.2 - Custom Variables in p5.js

U1LA2.3 - Random Function

U1LA2 - Mini project: Teacher Notes

U1LA2 - Mini project: Custom Emoji

U1LA3.1 - Intro to Color (Additive vs. Subtractive Mixing)

U1LA3.2 - RGB vs. HSB Color Mode

U1LA3.3 - Color palettes & Design

Unit 1 - Final Project: Abstract Album Art

๐Ÿ”ฎ
You can view a list of Classroom Culture && Teambuilders here