Curriculum Overview
A NYS Computing Standard-Aligned Introductory High School Computer Science Curriculum using p5.js
Last updated
A NYS Computing Standard-Aligned Introductory High School Computer Science Curriculum using p5.js
Last updated
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!
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
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.
This curriculum is version 2.0 of our It moves a little quicker and aims to hit all standards from the Computational Thinking category of the NYS Computing Standards.
Version 1.0 of 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 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 .
Once you start poking through this curriculum, you will notice that each lesson includes various resources to support both teachers and their students. Our 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.
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.
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.
(Courtney Morgan)
(Courtney Morgan)
(Courtney Morgan)
- most of Version 1.0 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 -
and