This website will be the primary source for your information. We are on the home page of p5.js. Please read the first paragraph.
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.
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.