Workshop Overview
https://editor.p5js.org/

Interactive Graphics Programming with JavaScript

East House Enrichment Program @ RIT, June 2025

Click HERE to share your program link with us!

Overview

This workshop will provide an introduction to core software programming concepts. Each student will work individually and in small groups to write programs that generate pictures of their own design. On day two, we’ll work together to add interactivity to the images by changing what the program does depending on the user’s mouse and/or keyboard actions.

We’ll be writing JavaScript programs that utilize the p5.js library to support drawing shapes onto a digital canvas.

Since our time is limited, the primary goal is to give everyone a chance to:

Workshop activities

We’ll get as far as we can on Day 1 while leaving plenty of time for you to play around and brainstorm things you’d like to try. On Day 2, we’ll wrap up some demos and then focus on helping you make your own programs!

Topics

  1. Getting Started
  2. Hello East House!
  3. Shapes & Colors
  4. Letting the computer do the math
  5. Adding interactions & movement!

Demos

  1. Hello East House: Canvas size & text
  2. 2D Shapes: Examples of different shapes
  3. Smiley: Layering shapes & filling with colors
  4. Scaled & moving square: Introduction to variables for doing calculations, movement, and color changes
  5. Flower & Sun: Using variables & expressions while drawing
  6. Daisy: Translation & rotation while drawing (+ a loop)
  7. Bouncing Target: Mouse location and button clicks

Things to Try: A collection of suggested adjustments to the demo code + an outline on designing your own project!