Introduction to Computational Media with p5.js

PD Materials

These pebls include the slides and sample code for PD. It will be updated daily.

• PD Materials: Day 1
• PD Materials: Day 2
• PD Materials: Day 3
• PD Materials: Day 4

A Guide to Using Peblio

The curriculum and worksheets are built using the Peblio platform. 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.

• Peblio Guide
• Uploading images in Peblio
• Loading Gifs in p5

A Guide to Teaching CS

This pebl includes some suggestions for classroom practices. It is by no means exhaustive and should be used to find practices that you think will be effective in your classroom.

• CS Teaching Guide

Instructional Videos

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

• The Coding Train
• Intro to p5 Learning Playlist

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.

• Project 1: Drawing Apps
• Project 2: Generative Design
• Project 3: Game Design

Interactive Art: Hour of Code

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.

• Hour of Code Page

High School Curriculum

These resources can be found in another format with some differences here

Unit 1: Drawing, Variables, Random

• Unit Overview

• Topic 1: Grayscale Drawings

  • 1.1: p5 Introduction
    • Lesson Plan
    • Robot Worksheet
  • 1.2: Line Functions and Parameters
    • Lesson Plan
    • Worksheet
    • Peblio Guide
    • p5 Web Editor Guide
  • 1.3: Rectangles, Ellipses, and Layering
    • Lesson Plan
    • Worksheet
    • Presentation Pebl
  • 1.4: Various Shapes, StrokeWeight, Fill
    • Lesson Plan
    • Worksheet
  • 1.5 Mini Project- Taijutu Symbol
    • Lesson Plan
    • Worksheet

• Topic 2: Make it Vary

  • 2.1: Intro to Variables: System Variables
    • Lesson Plan
    • Worksheet
  • 2.2: Custom Variables
    • Lesson Plan
    • Worksheet
  • 2.3: Random
    • Lesson Plan
    • Worksheet
  • 2.4: Mini Project: Emojis
    • Lesson Plan
    • Worksheet

• Topic 3: Make it Colorful

  • 3.1: Intro to Color

    • Lesson Plan
    • Worksheet

  • 3.2: RGB vs HSB colorMode

    • Lesson Plan
    • Worksheet

  • 3.3: Color Palettes and Design

    • Lesson Plan
    • Worksheet

  • Final Project

Unit 2: Response & Draw

• Unit Overview

• Topic 1: Draw with Mouse 1.1 Conditionals and If Statements

  • 1.1 Conditionals and IF Statements
    • Lesson Plan
    • Worksheet
  • 1.2 Conditionals and If, Else If, Else Statements
    • Lesson Plan
    • Worksheet: If else
    • Worksheet: Traffic light challenge
  • 1.3 Logical Operators AND and OR
    • Lesson Plan
    • Worksheet
  • 1.4: Draw with a mouse
    • Lesson Plan
    • Worksheet
  • 1.5: The Map Function
    • Lesson Plan
    • Worksheet

• Topic 2: Hover and Click on Things

  • 2.1: Hover and Conditional Statements
    • Lesson Plan
    • Worksheet
  • 2.2: Rectangles and Clicks
    • Lesson Plan
    • Worksheet
  • 2.3: Mini Project: Light Switch Game
    • Lesson Plan
    • Worksheet

• Topic 3: Press Keys

  • 3.1: Key Presses and Conditionals
    • Lesson Plan
    • Worksheet

• Final Project

  • Lesson Plan
  • Worksheet

Unit 3: Loops, Arrays, Media

• Topic 1: Loops
  • 1.1: While Loops
    • Lesson Plan
    • Worksheet
  • 1.2: For Loops I
    • Lesson Plan
    • Worksheet
  • 1.3: For Loops II
    • Lesson Plan
    • Worksheet
  • 1.4: Variation in For Loops
    • Lesson Plan
    • Worksheet
  • 1.5: Nested For Loops
    • Lesson Plan
    • Worksheet
  • 1.6: Mini Project: Wallpaper
    • Lesson Plan
    • Project Template

Workshops and 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

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

Communities

• Facebook group for Processing and p5.js users
• Processing Discourse discussion group
• NYC DOE CSforAll Slack group