jump into drawing with p5.js: cartesian coordinates and 2d shapes

Led by - Aamina Palmer and Yiwen Xu

Description

This workshop material will introduce p5.js, a JavaScript language, and two aspects involved in making your first sketches. You will learn about cartesian coordinates, and how to draw 2D shapes on a canvas. From there, you can try out drawing your favorite item on-hand using these simple shapes and see what comes out!

Intro - Slides 1-4

1: Hi everyone. Thank you for coming and welcome to the Code Decolonized Symposium :)

We’ll be starting off with an introduction around p5, cartesian coordinates, and 2D primitives to get a handle on how you can begin to code.

2: So, you may have just heard that and thought- well what is p5?

Well, p5 is a coding language that we’ll be sharing and exploring with you all today. It is an open-source JavaScript library for creative coding. We think of creative coding as an entrypoint for artists, designers, and anyone who enjoys creating and seeing their efforts on-screen make something cool. What can you do with p5? With your p5 ‘sketch’, you can draw, use your webcam, text, keyboard interactions, video, or sound to make moving images, complex patterns, or even games.

After this introduction, you’ll be ready to try out the p5 editor and get started on your first sketch!

3: First up, is the cartesian coordinate system, which you’ve probably interacted with in mapmaking and reading maps- or maybe graphs as you’re learning math. The coordinates give consistent locations for the things we’ll input and look for- and read as (x,y) using a flat plane.

This system allows for placing points on a grid. In our code, it will help us position our elements in relation to each other within the sketch.

4: Next, we’ll look at 2D primitives. Think of these as your geometric shapes, made of lines and points. When we’re coding, we can place these shapes in our sketches- they even have their own functions; the names we ‘call’ in our code editor to make the shapes show in the preview.

Terms etc. - Slides 5-8

5: Overall some terms you’ll hear today are ‘sketch’, ‘canvas’, ‘coordinates’, ‘primitives’, ‘stroke’, ‘fill’, ‘background’, and ‘parameters’.

6: There are some structures and practices we’ll use in our code- for visual organization and also for the computer to read our requests.

Notably we will use curly brackets to open and close our functions, semicolons to end our commands, and will set our parameters within parentheses.

7: Cartesian coordinates, named after René Descartes, are used to placed our elements on a grid. They use the x and y axes to give permanent locations to what we draw. Whatever we draw within the canvas will need coordinates to give it a fixed spot to build around.

8: This slide shows how the p5 canvas differs from the grids we may be used to, and how to draw a point and a line. The line is made of two points- a starting point and an end point.

Visual and Code Examples - Slides 9-12

9: 2D primitives in p5.js are shapes that you can draw within a p5 canvas. The rules are simple - use cartesian points to locate your shape and pixel dimensions to determine the size.

There are some basic shapes you can draw: rectangle, ellipse, quad(A quad is a quadrilateral, a four-sided polygon. It’s similar to a rectangle, but the angles between its edges are not constrained to ninety degrees), arc, line, point, triangle

An example of how to draw a triangle in p5.js: A triangle has three points, so you just need to write the 3 (x,y) cartesian points to give your triangle a position. Triangles could be tricky. For the beginner's level, we will start with a rectangle and ellipse. They are easy to write. And you can draw simple shapes with different combinations of rectangles and ellipses.

10: How to draw a rectangle in p5. You need to write the term “rect()” in the part of the draw function. Inside the brackets, you need to give four parameters. (open in editor) The first two parameters (10,10) set the location of the upper-left corner, the third sets the width, and the fourth sets the height.

11: How to draw an ellipse in p5. It’s quite similar to the rectangle. The biggest difference is that the first two parameters set the location of the center of the ellipse. third and fourth parameters also set the shape's width and height. (open in editor)

12: Fill and stroke. (try it in the editor)

Activity - Slides 13-14

13: Read instructions, pair up if you’re with a friend

14: This is my object: a bottle I grab from my bag. Then consider how it can be drawn with simple 2D shapes (We suggest only use ellipse and rectangle because that’s what we’ve covered today) Arrange the shapes (where they sit in relation to each other) And you got a simple figure of a bottle

Tools and Resources

Workshop Slides: p5 Workshop - Aamina + Yiwen

P5 Editor: http://editor.p5js.org

P5 Reference: http://p5js.org/reference