1. Workshops
  2. challenge
  3. p5.js

p5.js

Build the coolest website with p5.js

Created by Hack Club staff

Edit

Hack Club logo Computer Science Tutorials

p5.js

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


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.

Boilerplate

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 rad?

Share it! 🌟

Spotted an issue?

Edit on GitHub