function setup() {
  createCanvas(400, 400); // Sets up a 400x400 pixel canvas
  background(255);        // Sets the background color to white
}

function draw() {
  ellipse(200, 200, 150, 150); // Draws a circle at the center of the canvas
}

In this example:

• setup() is called once when the program starts and is used to define initial environment properties.
• draw() continuously executes the lines of code contained inside its block until the program is stopped.

By placing the ellipse() function inside draw(), I ensure that it’s called after the p5.js library has been initialized, preventing the scope-related error.

🎨 Drawing with Code: My First Steps

Today, I learned how to draw shapes using code, specifically how to create a face using circles. The primary function for drawing circles in p5.js is ellipse(). To draw a circle, I need to specify four parameters:

1. x-coordinate: Determines how far the ellipse is from the left side of the canvas.
2. y-coordinate: Determines how far the ellipse is from the top of the canvas.
3. width: The width of the ellipse.
4. height: The height of the ellipse.

For example, to draw a circle centered in the canvas, I can use:

ellipse(200, 200, 150, 150);

This places the center of the ellipse at (200, 200) with a width and height of 150 pixels, resulting in a perfect circle.

🧩 Understanding Coordinates

By adjusting the x and y values, I can move the ellipse around the canvas. Increasing the x value moves it to the right, while increasing the y value moves it down. This coordinate system allows precise placement of shapes, which is essential for creating complex drawings.