1. All Workshops
  2. challenge


Build the coolest website with p5.js

Created by Hack Club staff

Hack Club logoComputer Science Tutorials


Build the coolest website with p5.js

Created by Hack Club staff

You can find this tutorial online at https://hackclub.com/workshops/p5_challenge

Table of Contents
  1. Boilerplate
  2. More Background / Helpful Links

p5.js Challenge

This is an introduction to the challenge we’re running in partnership with repl.it. You can submit your project to the challenge here.


Get started with a repl already configured with p5.js and jump straight into coding:

  1. Go to repl.it/@zrl/p5-boilerplate
  2. Click “fork” to make a copy to edit

The prompt for this challenge is to build the coolest website using p5.js.

p5.js is a toolkit for building interactive graphics on the website. If you’re familiar with Processing, p5.js is the most popular adaptation of Processing for the web.

I’m personally most inspired by the art people have made with p5.js. Tumblr has a bunch of cool examples at https://www.tumblr.com/tagged/p5js (click here to see one of my favorites).

p5.js requires minimal JavaScript knowledge and has a bunch of examples to help get you started: click here.

Recommendations for getting started experimenting with p5.js:

Can’t wait to see what you build!

How was this workshop?

(your feedback is anonymous + appreciated ❤️)

Made something fabulous?

Spotted an issue?

Suggest edits