Introduction to drawing with p5js

Benjamin Fox
InstructorBenjamin Fox
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 5 years ago

In this lesson we look at using color and the basic drawing methods of p5js, and how they can be combined to create a simple graphic on the canvas.

[00:00] We start off with the default 100 by 100 pixel canvases which I've set to a medium gray with a background call. We want to give ourselves a little bit more room to draw, so inside your setup, call, "create canvas," and pass in 300 pixels for the width, 400 pixels for the height. If we refresh the browser, you'll see that gives us a bigger space to draw on.

[00:20] Before we start to draw, let's talk about color. Color is handled in one of three ways mainly inside of P5.js. Gray scale is a single value passed into background from 0to 255, representing black through to white. Let's change our background to 30, refresh the browser. It's a much darker gray. If we increase that value to 220, refresh the browser, you'll see it's a much lighter gray.

[00:43] P5.js also handles RGB values. If we pass in 0255, 0this is representative of red, green, and blue. Refresh, and you'll see we have a full green canvas. Finally, you can pass in a hexadecimal string. For now, we're going to do FF 6, 6, 00and a refresh shows us it's a nice orange. For the purpose of today's lesson, I'm going to go back to 128 medium gray.

[01:11] There are seven basic constructs in P5.js to draw with, point, line, rect, which is for rectangles, ellipse, triangle, quad, and arc. Point is simply an X/Y location somewhere on the canvas represented as a single pixel. Inside of point, we place a X value and a Y value. If we refresh the browser, you should see a single black dot 20 pixels in, 20 pixels down from the top left of our canvas.

[01:51] Line expands on that notion slightly with two points passed into it, a start point and an end point. Within Line, we pass a beginning X and a beginning Y, and ending X and an ending Y. Refreshing the browser, we see we've drawn a 100-pixel line from 20 pixels X, 40 pixels Y, all the way across to 120 pixels X, 40 pixels Y.

[02:17] Rect's is slightly different. Inside of rect, we're passing a beginning X point, a beginning Y point, a width, and a height. Inside the browser, we've drawn a box that's 100 pixels wide, 75 pixels high.

[02:36] Ellipse is very similar to rect in that we pass in a beginning X, a beginning Y, a width and a height. The only difference being the beginning X and beginning Y refer to the center point of our circle, not the top left corner.

[02:53] The triangle is very similar to line and point, in that we're passing a series of X and Y coordinates to find the three points of the triangle, X1, Y1, X2, Y2, X3, Y3. Each of these pairs defines the point on the triangle.

[03:11] Quad is the same as triangle, but with four points, X1, Y1, X2, Y2, X3, Y3, X4, Y4. Refresh, and we've drawn a quadrilateral.

[03:33] Finally, we move onto arc. Arc is very similar to circle in that it takes a center point X, a center point Y, a width, a height. It also accepts radians that define the beginning and end angles of the arc we are drawing. Here we'll put in Pi and zero. Refreshing the browser we've created a half circle. If we switch those values around, you can see we've flipped the half circle.

[04:02] The code and pasting here shows how when you combine these drawing constructs, you can actually achieve something quite complex.

egghead
egghead
~ 20 seconds ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today