🎨
[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
  • What We Provide
  • A Note On Lessons:
  • Choosing an Editor:
  • Pacing
  • Naming Conventions
  • Using CR-SE Prompts

How to Use this Curriculum

A brief overview on how to read the resources

PreviousCurriculum OverviewNextLeave Us Feedback

Last updated 20 days ago

Overview

This curriculum was built as an introductory high school computer science course. While it can be implemented at any point in high school, it is appropriate for 9th grade and up. It assumes no prior knowledge and focuses on creative expression as a means to learn computational thinking and syntactical concepts. We call this creative coding!

The curriculum is broken into units, with each unit including lesson arcs (structured as 'learning activities') with many projects and final projects to endcap each unit.

What We Provide

This curriculum provides detailed lesson plans, sample code, starter code, and links to additional resources (including videos).

We do not provide other classroom materials such as lesson slides or rubrics, as we believe these are things that often need to be customized to meet the needs of your class and your specific learners. We also believe that developing these resources can help you to better grasp the concept and specific changes you may want to make for your classroom.

Our hope is that given the robust lesson plan and learning materials, it will be quick work for teachers to turn these into slides. To assist, we have created a that may hasten the process.

A Note On Lessons:

You'll notice that some lesson pages have an emoji before them. This is keyed as follows:

  • 🔮 == Unit Overview

  • 🗃 == Mini Project

  • 🎨 == Unit Final Project

  • 🤓 == Optional Extra: This is an extension lesson that either provides deeper and more targeted practice or is a deep dive into a topic that is not necessary to continue in the course. You may safely skip or use as needed.

  • ✨ == Possible Prerequisite Skill: While we assume no prior knowledge, students may come in with prerequisite skills if they had a robust middle school experience that aligned to the NYS Computing Standards. These lessons can be abbreviated or skipped entirely based on the prior knowledge of your class, but they do contain important concepts to the rest of the course.

Choosing an Editor:

One of the most important parts of beginning a course is determining the environment your students will be coding in. This curriculum supports two:

  • p5 Editor: This is a code editor that allows students to start with a default template that is already inked to the p5 library (as well as sound library). Students have accounts and can rename and save their projects, as well as making 'collections' (folders/directories) to store and organize them. It is actively worked on and updated by the p5/processing team and is made specifically for working with p5. Runs best in Chrome. It does not have a teams/classroom/education feature, so teachers will need to collect links to student projects and give feedback separately.

  • repl.it: This is a code editor that supports many languages and libraries and includes a p5 template. Students will need to select the p5 template when creating new projects, but it will then have the p5 library automatically linked. While their focus is not specifically p5, any updates to the p5 library will also exist here. This editor is no longer available for free, so do be sure to vet the per student subscription cost to ascertain whether it is a viable option.

We have done our best to ensure all starter code exists as a template in both editors. This curriculum was initially made using the p5 editor before repl.it added the p5 template (and because there was initially helpful p5 reminders that only existed in the editor, but has since become a part of the library), so there remain some examples that exist only in the editor. We have done our best to ensure that anything that exists in only the p5 editor is a project that is only meant to be viewed by students/teachers, not necessarily remixed or interacted with.

Pacing

There is no end-of-course exam, so teachers should feel free to adjust pacing to suit the needs of their class. From experience, we believe that the five units in this guide represent a reasonable pace for a year. Finishing Unit 5 also puts students in a great place for follow-up courses such as AP Computer Science Principles. However, pacing will and should depend on your specific context. Many teachers implementing the curriculum do not teach unit 5. Instead, they opt to dig deeper into Units 1 through 4 to guarantee students have a solid understanding of content and a varied collection of high quality projects they might include in a portfolio.

We have done our best to provide extras and resources that you can use to fill out your curriculum if you have students coming in with substantial experience and would like additional activities.

Naming Conventions

Each Unit is broken into various "learning activities" which are in turn split into various lessons.

Seeing a lesson like this would mean:

U1LA1.4 --> Unit 1, Learning Activity 1, Lesson 4

Please feel free to adjust the naming conventions to meet the needs of your own classroom!

Using CR-SE Prompts

Mini Projects and Unit Projects include a section on Culturally Responsive Best Practices. These are intended to allow students to connect their classroom experience to their own communities and culture. In some instances, it is provided as guidance, and in others, it includes additional prompts that can be presented alongside a project to give the project a more intentionally culturally-responsive lens.

Many projects in this course allow for great amounts of student choice, which we hope will allow students to make the work their own and produce things that they can be proud of. Student choice is important as some may want to focus on big, serious things, and some may just want a moment to have fun, be creative, and be silly.

(Please keep in mind that communities can refer to a lot of things, including just the culture of being a teen, a Minecraft player, or a KPop fan - be mindful that you are allowing students to explore choice in their creations in a way that is authentic to them!)

Lesson Slide Template