Here is a set of interactive p5.js sketches that should help beginner coders understand how p5.js and other language work make graphics. These tools were inspired by the CC Fest - Teacher Training Camp from Fall/Winter 2024. There will be a follow-up Teacher Camp offered in Spring 2025. More details below

CC Fest - Teacher Camp Spring 2025

Tool 1: Working with shapes

Understanding how to draw basic shapes is the first step to mastering p5.js. This tool focuses on creating and customizing shapes like circles, squares, and triangles. With interactive options for adjusting parameters such as size, stroke weight, and colors, users can explore the fundamentals of shape rendering.

https://editor.p5js.org/saberkhan/full/QcUQS2XSh

Tool 2: Shapes and Coordinates

This tool introduces the concept of coordinates, a crucial element for positioning and aligning objects on the canvas. It helps users visualize the x and y axes and understand how shapes are placed and moved. By manipulating coordinates, you can create intricate patterns and designs.

https://editor.p5js.org/saberkhan/full/OgIwoMwsW

Tool 3: Arc visualizer

Making arcs, part of a circle, is very useful but can be a little challenging as the coder has to identify location and dimensions as expected with ellipse and rects but also the start, stop, and mode. The visualizer below should help show how the arcs are generated based on the code in the box.

https://editor.p5js.org/saberkhan/full/_ow9opHC8

Tool 4: Transformations

Being able to rotate and move shapes in relation to each other is helpful when making complex designs. The following tool shows how translate() and rotate() can impact what you see on the canvas. Along with using pop() and push() to store and reset the layout of the canvas.