Drawing Shapes in p5.js for Beginners (1.3)
3 min read
6 months ago
Published on Apr 23, 2024
This response is partially generated with the help of AI. It may contain inaccuracies.
Table of Contents
Step-by-Step Tutorial: Drawing Shapes in p5.js for Beginners
-
Understanding Function Syntax in p5.js:
- Functions in p5.js are executed by following a specific syntax:
functionName(arguments);
. - The
createCanvas()
function is used to create a canvas with a specific width and height, defined by two arguments inside the parentheses. - The canvas dimensions are set using the syntax
createCanvas(400, 400);
, where400
represents the width and height of the canvas.
- Functions in p5.js are executed by following a specific syntax:
-
Exploring Canvas Dimensions:
- The numbers
400, 400
increateCanvas(400, 400);
define the width and height of the canvas, respectively. - Changing these numbers alters the size of the canvas, affecting the area available for drawing and interaction.
- The numbers
-
Understanding the Cartesian Coordinate System:
- The canvas in p5.js uses a Cartesian coordinate system where
(0,0)
is at the top-left corner. - Coordinates like
(x, y)
specify positions on the canvas, withx
representing the horizontal position andy
representing the vertical position.
- The canvas in p5.js uses a Cartesian coordinate system where
-
Drawing Rectangles with
rect()
Function:- The
rect()
function is used to draw rectangles on the canvas. - The syntax for drawing a rectangle is
rect(x, y, width, height);
, where(x, y)
are the coordinates of the top-left corner of the rectangle.
- The
-
Exploring Different Shapes:
- Experiment with other shapes like triangles, lines, ellipses, etc., by using their respective functions (
triangle()
,line()
,ellipse()
). - Refer to the p5.js Reference on the website to explore various functions and their usage.
- Experiment with other shapes like triangles, lines, ellipses, etc., by using their respective functions (
-
Understanding the Order of Drawing:
- The order in which shapes are drawn affects their layering on the canvas.
- Shapes drawn later appear on top of shapes drawn earlier, influencing the visual hierarchy of elements.
-
Using
rectMode
for Centered Rectangles:- The
rectMode()
function allows you to set the mode for drawing rectangles. - Setting
rectMode(CENTER)
centers the rectangle around the specified coordinates, providing a different drawing mode.
- The
-
Experimenting and Creating Your Artwork:
- Practice drawing shapes, changing dimensions, and exploring different functions in p5.js to create your artwork.
- Share your creations or sketches using p5.js in the comments or on the p5.js website for feedback and further learning opportunities.
-
Further Exploration and Learning:
- Dive into the p5.js documentation to discover more functions, attributes, and features for creating interactive and visually appealing designs.
- Continue experimenting with shapes, colors, and interactions to enhance your programming skills and artistic expression.
By following these steps and experimenting with the concepts discussed in the video, you can begin your journey into drawing shapes and creating visual art using p5.js.