Your Canvas

Back to: Visual Expressions

For our first lesson, you can start by typing p5.js in your web browser, and you will see the website https://p5js.org showing up. Click on this link will take you to the p5.js website.

This website will be the primary source for your information. We are on the home page of p5.js. Please read the first paragraph. 

“p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.”

Click on the “Get Started” link on the left menu.

Follow the instruction on this page and complete the following activities:

1. Start the p5.js editor: https://editor.p5js.org/. You can see the following line of codes in the editor window:

function setup()
    createCanvas(400, 400)
function draw()    
    background(220);

2. Now click on the play button (red arrow at the uper left corner) and see what these lines of code do. It creats a canvas that is 400 pixels (px) wide and 400 pixels tall, with a grey background color (RGB value = 220). 

3. You see two functions here in the editor: setup and draw. The setup function does some initial setup for you. For example, it sets a canvas that is 400 px side and 400 px tall. The draw function makes drawing happen. background(220) adds a shade of grey to the canvas background. 

Your Turn

You can try to change the canvas size by changing the two numbers in createCanvas(400, 400). Give it a try and see what happened. Now try to change the background color of the canvas by replacing 220 with the following (including the double quotes): “red”, “yellow”, “blue”, or “teal”. Don’t forget to click on the play button each time you made changes. It will allow you to see the effect of each change.

To save your work, i.e., the sketch you made with code, you can create an account at p5js.org and log in. Use File > Save to save your sketch. If you’d like to learn more about the editor, watch the p5.js Web Editor Tutorial under “Learn More”.

What did you learn from this lesson? What did you try? What are your takeaways. Please leave your comments below. We’d love to hear from you.

Learn More

Pixel
RGB Color
p5js Editor
p5.js Web Editor Tutotial
Announcing the p5.js Web Editor!
p5.js Web Editor with Cassie Tarakajian
Accessibility in the p5.js Web Editor with Mathura Govindarajan