🎨
[JS] Intro to Computational Media 2.0
CS4All Resources
  • Curriculum Overview
  • How to Use this Curriculum
  • 📬Leave Us 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
    • Pathfinding Algorithms && Facial Scanning
    • Playing with Pixels
    • Getting Sound from Mic
    • Sound Recognition with ml5
  • Unit 1: Draw & Draw With Functions
    • 🔮Unit 1 Overview
    • U1LA1.1: p5.js Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4: Other Shapes && Styling
    • 🗃️U1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1: Intro to Color with RGB && HSB
    • 🤓EXTRA: Color & Data Storage
    • 🤓EXTRA: Color Palette Practice
    • ✨U1LA3.1: Introducing Variables
    • ✨U1LA3.2: Creating Custom Variables
    • ✨U1LA4.1: What is Abstraction?
    • ✨U1LA4.2: Intro to Functions && Function Calls
    • U1LA4.3: Draw with Functions
    • U1LA4.4: Using the Random Function
    • 🗃️U1LA4 Mini Project: Custom Emoji
    • U1LA5.1: Your Custom Function Library
    • 🎨Unit 1 Final Project: Abstract Album Art
  • Unit 2: Respond and Draw on Canvas
    • 🔮Unit 2 Overview
    • ✨U2LA1.1: Conditionals and If Statements
    • ✨U2LA1.2: Conditionals and if, else if, and else statements
    • ✨U2LA1.3: Logical Operators And/Or
    • 🗃️U2LA1 Mini Project: Make a Traffic Light
    • U2LA2.1: Draw with Mouse
    • U2LA2.2: The Map Function
    • ✨U2LA3.1: Data Type Scavenger Hunt
    • ✨U2LA3.2: Functions that Return Values
    • 🤓U2LA3.3: Functions with Purpose
    • U2LA4.1: Collision Functions && Collide2D
    • U2LA4.2: Mouse Clicks && Shapes as Buttons
    • 🗃️U2LA2 Mini Project: Light Switch Game
    • U2LA5.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.4: Updating and Deleting from Arrays
    • 🗃️🤓 U3LA2 Mini Project 2: CodeWars Array Challenges
    • U3LA3.1: Preload, Images, Tint
    • 🤓U3LA3.2: Images and Arrays with ml5
    • U3LA3.3: Fonts && Text Styling
    • 🗃️U3LA4 Mini Project 4: Typography
    • U3LA4.1: Loading & Playing Sound Files
    • 🎨Unit 3 Final Project: Patatap
  • Unit 4: Motion, Objects, Transformation
    • 🔮Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move in All Directions && Make it Bounce
    • U4LA2.1: Introduction to Classes and Objects
    • U4LA2.2: Reading and Updating Object Properties
    • U4LA2.3: Methods Off Canvas
    • U4LA2.4: Objects on Canvas
    • 🗃️U4LA2 Mini Project: Build a Tamagotchi
    • U4LA3.1: Creating Many Objects
    • 🤓🗃 Optional U4LA3 Mini Project: Rebuild with Objects
    • U4LA4.1: Translation Battleship
    • U4LA4.2: Rotations
    • 🤓U4LA5.1: Sine && Oscillating Motion
    • 🤓U4LA5.2: Cosine && Circular Motion
    • 🎨Unit 4 Final Project: Animated Greeting Card || PSA
  • Unit 5: Final Project
    • 🔮Unit 5 Overview
    • 🎨Course Final Project Guide
Powered by GitBook
On this page
  • Overview
  • Nota Bene
  • NYS Standards
  • Suggested Duration
  • Prerequisites
  • Overview of Instructional Materials
  1. Unit 1: Draw & Draw With Functions

Unit 1 Overview

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

Overview

In this unit students get acquainted with the p5 canvas coordinate system, drawing shapes and colors on it. They are also introduced to the idea of functions and how to create their own functions that draw Programming concepts covered include calling built-in p5 functions with different parameters, working with variables (both built-in and custom), using controlled randomness, and abstraction.

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. .

NYS Standards

9-12.CT.4 Implement a program using a combination of student-defined and third-party functions to organize the computation.

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.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.

Via optional lesson:

9-12.NSD.2 Explain the levels of interaction existing between the application software, system software, and hardware of a computing system.

Prerequisite Standards:

7-8.CT.7 Design or remix a program that uses a variable to maintain the current value of a key piece of information.

Suggested Duration

Approx. 18 - 25 Days, anticipating meeting once daily for a 45 minute class period.

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.

We have noted some lessons with a ✨ that are potentially repetitive for students coming in with prior experience from a middle school sequence. We have also labeled some lessons with a 🤓 that we view as optional extensions for classrooms that would like a deeper dive or more targeted practice.

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.

🔮
You can view a list of Classroom Culture && Teambuilders here