Summer Coding Camp: Build Your Own Worlds With Javascript

In this creative 4-day course, students will learn how to code interactive digital scenes using real JavaScript through the beginner-friendly p5.js library. This class blends imagination with computer science as students build their own dynamic worlds—complete with draggable characters, moving vehicles, and clickable animations!

Students will dive into a 4-day world-building project, creating an interactive game where every object responds in its own unique way. With support from the instructor, students will brainstorm features, add custom interactions, and bring their ideas to life—transforming their blank canvas into a fully coded, digital world!

🔍 What Will Be Taught?
Students will learn to:

Write real JavaScript code using the p5.js framework

Use variables, conditionals, loops, and functions

Handle keyboard and mouse input to create interactivity

Create and manage custom objects with classes

Organize and animate multiple elements on the screen

Debug and test their own code to improve functionality

Design, build, and present their own interactive digital world

🧑‍🏫 How Is the Class Structured?
Each 55-minute class follows a consistent format:

5 min: Welcome, review of last class, and outline of the new concept

45 min: Live coding with instructor guidance + learner coding time

5 min: Wrap-up and project preview for the next session

Learners will code alongside the instructor using editor.p5js.org, an accessible online coding tool. The teacher offers constant feedback, support, and creativity prompts while encouraging learners to ask questions and explore freely.

📆 Weekly Breakdown


Day 1: Interactive World – Plan & Place Objects 🗺️
My lesson is about... Brainstorming the world we want to build. Learners will sketch ideas, add more objects to their scenes, and begin organizing the layout and design of their custom world.

Day 2: Make It React – Color, Sound, and Movement 🎵
My lesson is about... Giving each object a unique interaction. Whether it's changing color, playing a sound, or starting an animation—students will write their own behavior logic.

Day 3: Add Features – Personal Touches & Effects ✨
My lesson is about... Adding polish—like background changes, more object types, or random effects. Learners will apply loops, functions, and more advanced logic to make the world feel alive.

Day 4: Final Project – World Showcase 🌟
My lesson is about... Wrapping up their world and preparing for a mini showcase. Students will share what they built, talk through their ideas, and reflect on what they learned as creators and coders.

🧠 Teaching Style
The teaching style is hands-on, supportive, and flexible. Students are encouraged to ask questions throughout the lesson, and the teacher will pause often to troubleshoot or suggest creative ways to customize the code. Learners receive personalized guidance and positive reinforcement to help them think like developers and creators.

🎤 Student Interaction
Learners will code live with the instructor and get real-time help

They’ll be encouraged to share ideas, ask coding questions, and show off progress

Optional discussion time allows for fun brainstorming and peer encouragement

Final projects are shared with the group in Week 6 for a celebration of creativity and effort

Note: Please make sure an adult is on hand for the first five minutes of class to help set-up and tackle troubleshooting. iPads and tablets are not compatible and will not work for this class. On many occasions the students will be coding the arrow keys on a keyboard.