Welcome to p5.js

Now the moment of truth. Let’s learn a little bit more about what p5.js is and what it can do. This video will give you a brief introduction to p5.js and provide a bunch of examples

Daniel Shiffman

Throughout this course we will be drawing heavily from Daniel Shiffman’s Introduction to Programming with p5.js tutorials on YouTube. They are very well considered and he’s a pretty funny guy. To get us started, here’s the first video in the series

Try it out yourself.

Using the code below, see if you can change the size of the rectangle to be centered in the window and be twice as big.

Now try it using repl.it

1. Navigate to repl.it and click “Start Coding”
2. Select “HTML, CSS, JS”
3. You should now see a coding environment where you can write all of your code. In order to use p5.js we’ll need to add the package. Click on “Packages”
4. type p5.js into the search bar and click on the package.
5. Click on the green “plus” and notice that a new line of code appears in your window.
6. Click on files and then on script.js
7. Add the following code and click run

   function setup(){
     createCanvas(300, 100);
     background(220);
     rect(20,40,80,30);
   }
   

   

Comprehension Check

---