<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!
</aside>
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.
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);
console.log("hello")
}
Debugging
You can then run open index.html in your browser. You can right click, click âInspectâ, move into âConsoleâ, and the following should appear:
https://lh6.googleusercontent.com/xTE_OEvgvJIKu9x6IY7HNJyr11v_IMpsf-KFoLtwHrqEOm7J_aBGZZfVsmwF1flWefc7dE21fDdo5QHldZqiY7uZH9CUAZyK8mnyQKFZadeRJZfT0pNgJwDGqYF3Eoptw2rqhCQA
â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/