Week 1 — Drawing with Shapes: Visual Language of Code (visit from Shawn Patrick Higgins)
Session 1 of the CC Fest Teacher Training Camp (October 18, 2025) brought together a global cohort of educators from the US, Europe, Asia, and Latin America to explore "Drawing with Shapes: Visual Language of Code" in p5.js, facilitated by Saber. The session began with introductions revealing diverse backgrounds of teachers to tech directors transitioning students from block to text-based coding, followed by Saber guiding participants through p5.js fundamentals including basic shapes (circle, rect, line, triangle), color systems (RGB and HSB with memorable analogies like "saturation = amount of gray"), fill/stroke properties, and layering principles, with hands-on coding exercises and project sharing like Francisca's mushroom composition. In the second half, guest speaker Shawn Patrick Higgins shared his 17-year expertise in project-based learning that integrates animation, digital art, and coding through playful entry points like interactive stories, web games, and Scratch projects, emphasizing open-source web apps for accessibility and low-barrier creative entry points. The session concluded with a homework assignment to create a Shape & Color Composition mini-poster using both RGB and HSB color models plus a reflection, establishing both technical fluency and a supportive community atmosphere that participants praised as they looked ahead to Week 2's focus on Interaction & Motion with guest Angi Chau.
https://editor.p5js.org/gray.spike/full/TKPFntWXU
Made by Andy
Week 2 — Interaction & Motion: From Static to Alive (visit from Angi Chau)
Session 2 of the CC Fest Teacher Training Camp (October 25, 2025) transitioned participants from static drawings to living sketches through "Interaction & Motion: From Static to Alive," facilitated by Saber. The session opened with participants showcasing their Assignment 1 shape and color compositions, with educators like Andy, Francisca, Josh, Nicole, Randy, Sandra, and Sebastien sharing geometric patterns, interactive artwork, and creative designs while discussing code organization and design choices. Guest speaker Angi Chau presented her Middle School CS progression that scaffolds students from Scratch and block-based coding in elementary grades to p5.js creative coding by 6th grade, emphasizing three pillars: iteration, scaffolding, and student ownership through projects like Programming Pictionary, clicker games, and interactive autobiographies. Following Angi's presentation, Saber introduced core animation concepts including the draw() loop for continuous motion, variables for position and velocity, bounce logic for edge detection, and user interactivity through mousePressed() functions, demonstrated through bouncing circle and clicker game examples that showed how to transform static sketches into dynamic, responsive programs. The session concluded with Assignment 2 requiring participants to create an Interaction & Motion Sketch combining animation and interactivity, setting the stage for Week 3's exploration of loops, randomness, and mathematical concepts with guest Qianqian Ye.
Session 2 Assignment — Interaction & Motion
https://editor.p5js.org/to.frodesign/full/dmC13VI6o
Made by Francisca. Click on the text to interact.
Week 3 — Nested Loops & Generative Patterns: From Random to Organic (visit from Qianqian Ye)
Session 3 of the CC Fest Teacher Training Camp (November 1, 2025) explored "Nested Loops & Generative Patterns: From Random to Organic," facilitated by Saber, moving participants from individual animations to systematic pattern creation. The session began with participants showcasing Assignment 2 projects including Joshua's trippy animation evoking Windows Solitaire's victory screen, Andy's clicker game with timer and scoring mechanics, and Francisca debugging font loading issues, while discussing velocity calculations and trail effects. Guest speaker Qianqian Ye, artist and former p5.js Project Lead (2022-2024), presented her "Machines Dream of Magic" interactive installation exploring technology's dream-like qualities through Unity, and reflected on her tenure stewarding p5.js with emphasis on accessibility, community-centered development, and smooth leadership transition to Kit Kuksenok. Following Qianqian's presentation, Saber introduced nested for loops for grid creation, using a memorable metaphor comparing random() to trick-or-treaters who "teleport to another house" versus noise() creating movement like "a toddler walking through Halloween"—continuous and connected—demonstrated through code examples of basic grids, random versus noise patterns, and animated 2D noise grids. The session concluded with Assignment 3 requiring participants to create generative patterns using nested loops and setting up for Session 4's exploration of arrays, CSV data, and visualization.
Session 3 assignment — Patterns & Generative Art
https://editor.p5js.org/Neecolaa/full/6rQgypnwv
Made by Nicole. Click on the canvas to interact.
Session 4 of the CC Fest Teacher Training Camp (November 15, 2025) shifted focus from generative patterns to "Data & Visualization: Loops, Arrays & CSV," facilitated by Saber, demonstrating how loops naturally expand into data structures for visual storytelling. The session opened with participants reviewing Assignment 3's noise animations and grid patterns, discussing frame rate adjustments and dist()-based interactions, before Saber introduced arrays conceptually as "lists of related values" that become visual marks, demonstrated through bar charts, circle sequences, pulsing animations, and color-mapped displays. Guest speaker Patt Vira, joining from Bangkok, shared her inspiring journey from mechanical engineering to creative coding and her role in teaching, emphasizing "tadaaa!" moments that build confidence, the importance of supportive communities, accessible learning paths, and helping beginners discover joy through playfulness and consistent practice rather than perfection. Following Patt's presentation, Saber demonstrated loading CSV data with loadTable() and preload(), extracting columns, mapping values to visual properties like height and color, and concluded with an introduction to public APIs and JSON data structures including the Met Museum API, showing how real-world dynamic data sources can drive creative projects. The session concluded with Assignment 4 requiring participants to create a data sketch using arrays, CSV columns, or novelty datasets with visual attributes, preparing everyone for the final Session 5 on interactivity, data design, and expanding student projects.