Drawing Shapes in p5.js for Beginners (1.3)

Step-by-Step Tutorial: Drawing Shapes in p5.js for Beginners

1. 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);, where 400 represents the width and height of the canvas.

2. Exploring Canvas Dimensions:

   • The numbers 400, 400 in createCanvas(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.

3. 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, with x representing the horizontal position and y representing the vertical position.

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. 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.