<aside> 💡 Since we'll be working a lot with Javascript in the next few weeks, this project is a great way for us to get familiar with Javascript and understand how web development works!



If you’ve never learned Javascript before, we recommend taking Codecademy’s free Introduction to Javascript course up through Objects. Codecademy goes very slowly, so once you feel like you have the hang of something, feel free to jump through lessons and projects. If you’ve learned Javascript, or feel like you can learn Javascript really quickly, we recommend just jumping into the project and learning the syntax as you go.

Getting Started


The Goal

As far as the actual project goes, your task will be to edit sketch.js in your p5 project such that you produce an interactive visualization that teaches any process that you’re interested in. It could be a computer science topic (sorting algorithms, searching algorithms, data structures), how to make an avocado sandwich, or something cool that you’re interested in. We challenge you to challenge yourselves :)

Setup and Draw

Some things to note about p5. The draw function loops infinitely and setup is called once, so be wary of that. Anything you want to only happen once, use setup. I highly recommend you use helper functions to do things! You can do print statements through console.log. Take a look at this example.

function setup() {
  // put setup code here

function draw() {
  // put drawing code here
  ellipse(50, 50, 80, 80);


You can then run open index.html in your browser. You can right click, click ‘Inspect’, move into ‘Console’, and the following should appear:


“hello” is being printed infinite times because draw loops infinitely. console.log will be great for debugging!


Useful functions in p5: https://p5js.org/reference/