[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
  • AP CSP and ICM
  • Curriculum Materials on Peblio
  • Class Resource Examples
  • Instructional Videos
  • Additional Tools
  • Additional Workshops && Tutorials
  • Getting Started with p5 Projects
  • Interactive Art: Hour of Code in p5.js
  • Communities
  • Opportunities

Was this helpful?

Introduction to Computational Media

A High School Computer Science Curriculum using p5.js

NextHow to Use this Curriculum

Last updated 2 years ago

Was this helpful?

NOTE: We are currently in the process of making this curriculum into Version 2.0, which aligns more closely with more of the NYS Computing Standards. Version 2.0 is still under construction but .

If you are viewing Version 1.0 Curriculum from Github, we certainly recommend .

This curriculum was developed by the academics team (José Olivares, EJ Park) with lead writer . Additional contributors to the curriculum include Courtney Morgan 🙆‍♀️ & José Orea (teacher implementation guide and additional activities), Esther Hersh, and the . Curricular reorganization, rewrites, and extras developed by Courtney Morgan. All lessons are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license License: CC BY-NC-SA 4.0. For more info on the limitations and use of materials under this license please click .

AP CSP and ICM

While this is an introductory computer science course, it can serve as a terrific AP Computer Science Principles Prep course. Please use the guides below to assist if you are a teacher whose students will eventually take AP CSP, or who is just looking to broaden the content covered within this course:

  • (DRAFT - sorry for the mess!)

  • (DRAFT - sorry for the mess!)

Curriculum Materials on Peblio

If you use the Peblio Platform, you can find all teacher-facing lessons and materials for the ICM curriculum below. You can find the student-facing version of worksheets .

  • Unit 5: Functions && Abstraction

Peblio pages contain executable code, text, slides, videos and more. They are useful for creating and sharing programming worksheets and documenting programming projects. See this guide for detailed instructions:

Class Resource Examples

Instructional Videos

Additional Tools

Additional Workshops && Tutorials

Getting Started with p5 Projects

These projects help you get up and running with p5 very quickly. They include instructions, videos and sample code. You can create the projects in the Peblio workspace as you watch these videos. They are not classroom resources, but resources to help you build your comfort level with p5.

Interactive Art: Hour of Code in p5.js

This hour of code activity introduces drawing with p5 and system variables mouseX and mouseY. If you change the sequence and teach colors after shapes followed by system variables, this is a great project option.

Communities

Opportunities

(Courtney Morgan)

(Courtney Morgan)

(Courtney Morgan)

- most of the ICM curriculum presented as YouTube videos, modified for and filmed during pandemic remote learning.

- The coding train is an amazing resource for p5 instructional videos. Dan Shiffman is amazing and you can learn anything from his channel.

A block language based on p5

: A web editor with a lot of cool examples from the community

: A front end web editor with cool examples (although mostly not p5)

An online web editor for any language with classroom tools

Meme Generator: Build a randomized meme generator in p5 -

Generative Portraits: upload images and generate portraits with p5 shapes and the .get function -

Changing faces conditionals practice -

Happy Coding Intro to Coding with p5.js and Processing -

materials are viewable via this link
viewing on the much prettier Gitbooks
NYCDOE CS4All
Luisa Pereira
Processing Foundation
here
AP CSP/ICM Companion Guide
Social Implications of Computing Companion Guide
here
Unit 1: Drawing, Variables, Random
Unit 2: Respond && Draw
Unit 3: Loops, Arrays, Media
Unit 4: Motion && Animaton
Peblio Guide
Uploading Images in Peblio
Loading Gifs in p5
Sample Introductory Survey
Sample Quiz
Sample Rubric
Computer Science with Ms. Morgan
The Coding Tr
ain
Intro to p5 Learning Playlist
Open Processing
Codepen
Repl.it:
Tutorial
Worksheet
Worksheet
15-week Curriculum
Project 1: Drawing Apps
Project 2: Generative Design
Project 3: Game Design
Hour of Code Page
Facebook group for Processing and p5.js users
Processing Discourse discussion group
NYC DOE CSforAll Teacher Slack group
Hackathons for High Schoolers
Built by Girls Events
Wave: Built by Girls Mentorship Program
CS Ed Week
AI for All Summer Programs
All Start Code: Summer program
Google Open Source Coding Challenge
Code-it: