The p5.js library provides many built-in functions to interact with the canvas with easy-to-remember drawing functions for shapes. While you can call drawing functions in the
setup() function, it is typical to use drawing functions in the eponymous
draw() function. Let’s begin with the basics by drawing a point to the canvas!
The p5.js library provides the
point() function, which draws a single pixel to the canvas. This function requires two arguments: an x coordinate for the horizontal position and a y coordinate for the vertical position of the point.
line() function draws a direct path between two points. To draw a single line, we need four arguments: x and y coordinates of the starting point and x and y coordinates of the endpoint.
draw() function, use the
point() function to draw a pixel at the center of the 400px by 400px canvas.
Next, try drawing a point that is 100 pixels to the left of the center point.
Great! Now let’s practice drawing lines! Use the
line() function to draw a diagonal line between two points at coordinates (20, 40) and (320, 120).
Draw a vertical line that goes across the center of your canvas. This line will equally divide the left and right sides of your canvas.
Lastly, draw a diagonal line that starts at the bottom left corner and ends at the top right corner of your canvas.