Your First Drawing

Back to: Visual Expressions

In the previous lesson, you learnt how to access the p5.js editor. In the Editor, you learnt how the setup function allows to create a canvas. The drawing function allowed you give your canvas a background color of your choice. In this lesson, you will learn how to draw one or many circles.

We shal start by going back to the p5.js editor:

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

function setup(){
    createCanvas(400, 400)
}

function draw(){
    background(220)
}

2. Add the following after background(220), ellipse(50,50,80,80):

function draw(){
    background(220)
    ellipse(50,50,80,80)
}

Click the play button, you should see a circle appearing on the right hand side window.

Check the reference for ellipse(), change the value of the four numbers and see how each one impacts the resulting image. After you make each change, remember to click on the play button and see what happens.

3. Now let’s save your work. Change the file name if necessary. Click on File > Save. You may be asked to login to be able to save your file. After you save the file, you can go back to the file by using File > Open, then select the file you’d like to open. You can also share your file via File > Share.

Extra: You have learnt about setup and draw. You now know how to set up a canvas, add a background color, and draw an ellipse or a circle. Now try something for fun.

4. Copy paste the code below to your editor.

function setup(){
    createCanvas(400, 400)
}

function draw() {
    if (mouseIsPressed) {
    fill(0);
 } else {
    fill(255);
}
    ellipse(mouseX, mouseY, 80, 80);
}

5. Click play to see what happens. You will see a series of circles being drawn as you move your cursor position. 

6. Now keep your mouse or touch pad pressed down while you move your cursor around. What do you see?

Your Turn

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

Ellipse
Ellipse()
p5.js Editor