Curriculum Overview

A NYS Computing Standard-Aligned Introductory High School Computer Science Curriculum using p5.js

Curriculum Overview

Welcome to Introduction to Computational Media with Javascript! 🥳 That's a lot to say and type, so most of us affectionaately refer to the curriculum by its shorthand: ICM JS. If you are landing here for the first time and are fairly new to computer science in general or coding in particular, you might be wondering: What is computational media? What is Javascript? Why am I here? Let's briefly address each question in relation to this curriculum.

What is computational media? Computational media essentially means using programming (coding) to create different types of media, which are usually referred to as sketches in this course. Notably, these sketches will become more sophisticated as students expand their understanding of computer science concepts such as algorithms, programming, abstraction, and data. By the end of the course, students will have the knowledge and skills they need to build interactive multi-media projects. Projects include: Drawing App; Fortune Teller; Meme Generator; and many more.

CS4All celebrates creative computing as a fruitful and galvanizing on-ramp to learning and practicing CS concepts and skills. We center creative expression in all our curricular offerings because we know from experience that project-based learning that prioritizes students' interests and creative power, provides students with fuel to power through the tricky and difficult problems they will surely encounter while learning to code! Check out our CS4All Blueprint to further explore CS concepts, practices, and perspectives

What is Javascript? Javascript, or JS, is a programming language that is commonly used to make websites interactive. If you have been on the internet, and we are guessing you have 🥇, you have encountered media built with Javascript. In this course, we are using a Javascript library called P5.js that offers a gentler on-ramp to coding because students are able to see immediate visual output as they write and execute code. More about this as you dive into Unit 1! You can learn more about p5.js and the Processing Foundation here

Why are you here?

According to our student-built fortune teller app, you are here for a variety of reasons. Some of you are here because your administrator registered you to participate in our ICM JS professional learning series because you will be implementing this course in the upcoming school year. Congratulations and WELCOME! 🤗 This is going to be fun! You might be here because you were asked to find a curriculum that would serve as a suitable introductory computer science curriculum. If this is you, SCORE! 🏑 🥅 You have definitely landed on a great option! Maybe, you are a highly-skilled sifter of digital resources and you landed here because you want to teach yourself to code. ENJOY! 🎊

This curriculum is open-source and we wish you well on your learning journey, no matter what brought you here.

Attribution

This curriculum is version 2.0 of our original ICM curriculum. It moves a little quicker and aims to hit all standards from the Computational Thinking category of the NYS Computing Standards. Looking for ICM Version 2.0 in Processing.py?

Version 1.0 of this curriculum was developed by the NYCDOE CS4All academics team (José Olivares, EJ Park) with lead writer Luisa Pereira. Additional contributors to the curriculum include Courtney Morgan 🙆‍♀️ & José Orea (teacher implementation guide and additional activities), Esther Hersh, and the Processing Foundation. Curricular reorganization, rewrites, and extras were developed by Courtney Morgan. Version 2.0 was planned, arranged, and 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 here.

Highlight on Resources

Once you start poking through this curriculum, you will notice that each lesson includes various resources to support both teachers and their students. Our How to Use this Curriculum page clearly outlines what this curriculum includes and does NOT include. Here, we would like to share some highlighted resources that you might find useful as you are developing a sense of how this curriculum can support you and your students.

Class Resource Examples

Instructional Videos

Additional Tools

  • Code-it: A block language based on p5

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

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

  • Repl.it: An online web editor for any language with classroom tools

Additional Workshops && Tutorials

  • Meme Generator: Build a randomized meme generator in p5 -Tutorial

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

  • Changing faces conditionals practice -Worksheet

  • Happy Coding Intro to Coding with p5.js and Processing -15-week Curriculum

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

NextHow to Use this Curriculum

Last updated