---

One-Day Workshop

---

Created on February 13, 2017
Updated on December 19, 2020

teaching

---

• p5.js
• Welcome to Coding
• Calling Functions
• Work Time: Draw a Scene
• Variables, Creating Functions, and Random
• Work Time: Procedural Generation
• Consider Stopping There
• If Statements and Animation
• Input
• Work Time: Animation and Input
• Other Approaches
• Next Steps

---

This is an example rough outline that you might use for a one-day coding workshop. Similar to the hour of code, the goal of a one-day workshop isn’t to turn your students into expert software engineers. It’s to give them a preview of what coding is and what they can do with it, to demystify computer science, and to give them some next steps to explore on their own.

I’m using one day as a very rough estimate. This could work as a half-day workshop, or a weekend workshop as well. I’m also assuming that students have access to laptops or a computer lab, as well as an internet connection.

p5.js

p5.js is a perfect tool for introducing the fundamentals of computer science: students can get started coding right away directly in their browsers without installing anything, and they can share their work with each other directly from the p5.js editor.

My goal with a one-day workshop would be to introduce the fundamentals of coding by working through the first few p5.js tutorials, to give students plenty of time to practice on their own, and to then give them next steps to explore on their own.

With that in mind, I’d split the day up into a few parts:

Welcome to Coding

Start out by showing examples of stuff that can be made with code. There are obvious examples like making apps, websites, and games. But consider focusing on non-obvious stuff like:

• Digital art. I really like Aaron Koblin, Dave Whyte, and Saskia Freeke, and a lot of their stuff is done in Processing and p5.js!
• Science. From systems designed to diagnose illness to models that help us understand evolution. Fun fact: Processing was created by an artist and a scientist working on the Human Genome Project!
• Social outreach. From visualizing data that highlights a social problem, to getting people in contact during an emergency.

From there, I’d introduce p5.js. Here’s the content I would work through:

I wouldn’t spend a ton of time on this, about 15 minutes max, but I think it’s helpful to frame how coding fits into the world students already know.

At this point, students should have just run their first couple lines of code in the p5.js editor!

Calling Functions

Next, I’d introduce one of the most fundamental concepts in coding: calling functions!

Teach students that they can call functions to tell the computer what to do, and demonstrate looking up functions in the p5.js reference. Talk about the p5.js coordinate system (0,0 is in the upper-left corner) by drawing a small scene, like a flower or a smiley face.

I’d spend between 15 and 30 minutes on this.

Work Time: Draw a Scene

At this point, I would give students some time to work on their own. Challenge them to write a p5.js sketch that calls functions to draw a scene. That scene can be anything they want: their favorite animal, a digital selfie, or a scene from their favorite book, movie, or video game.

I’d give students a good chunk of time here, maybe 45 minutes of work time and 15 minutes of demo time where students show off what they’ve got so far. I’ve found that making this as low-stakes as possible works well: it’s okay if you’re not done, show everyone what you’ve got so far and talk through the functions you used. What was the hardest part? What would you add next?

Variables, Creating Functions, and Random

Next, I would introduce the concepts of variables, custom functions, and randomness.

As you talk about creating variables, I would introduce the random() function, which lets you introduce unpredictability to your sketches. I usually ask for random suggestions from the audience during the first parts of a workshop, and I compare the random() function to asking the computer for suggestions instead.

I wrote this guide as a standalone tutorial, but it might give you some ideas about how to talk about the random() function:

I try to talk as little as possible during this type of workshop in favor of giving students more time to work, so I would try to fit all of this into about 30 minutes.

Work Time: Procedural Generation

Like I said, I try to give students as much time as possible to work on their own, so at this point I would carve out some to practice what you’ve talked about so far.

I would frame this work session in terms of procedural generation using the random() function and variables and functions to draw a randomized scene. Students can take what they created in the first work session, or start from scratch. They can draw a random scene, for example if they drew a cat in the first work session, now they can draw a randomized cat. Or they can draw random geometric designs. What does it look like to fill the screen with random squares, circles, and lines? Check out Saskia Freeke for inspiration!

I’d spend about an hour here, again leaving time at the end for students to demonstrate what they’ve created so far.

Consider Stopping There

I probably wouldn’t try to cram in much more into a single day, especially if your students are younger than high school or if this is their first time seeing any code at all. If you have time to fill, I would use that for student work time and demos rather than introducing more concepts.

But if your students are hungry for more, or if you have two days instead of one, then here’s how I’d follow up what you covered so far:

If Statements and Animation

One of the things I love most about p5.js is that it makes it easier to create animated, interactive programs. So if you have time left, I’d focus on that next.

I generally introduce random walkers because they’re my favorite algorithm, or you could introduce mathematical animations like the work that Dave Whyte does.

Input

The last thing I would try to fit into a one-day or two-day workshop is the concept of getting user input:

This lets you write code that interacts with other people, getting input from the mouse, keyboard, and even mobile devices.

As always, the real lesson is that the p5.js reference is your best friend.

Work Time: Animation and Input

At this point, students have seen enough concepts to make some pretty interesting programs. They could make games (think Pong instead of Minecraft), or drawing programs, or animations, or procedurally generated scenes.

I would spend any remaining time on giving them the opportunity to explore that. Consider giving them some example code to work from- check out the examples section for inspiration!

Other Approaches

All of the above assumes that your students have never seen any code before, and provides a general introduction to coding. Another approach is to take a deeper dive into one specific topic.

For example, I’ve done sessions on randomness and image processing. I think this works well for students who have seen the fundamentals and are looking for the next step.

Next Steps

After a one-say session, students will have seen the fundamentals of computer science, and will have created a few of their own programs. End with pointing to the next steps that students could take to learn more on their own. Point them to Happy Coding (can’t blame a guy for shamelessly self-promoting), or to whatever makes the most sense for your students.