Name: Introduction to drawing with p5js
Uploaded: 2016-03-14T17:50:07-05:00
Description: 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.

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.

https://app.egghead.io/api/v1/lessons/javascript-introduction-to-drawing-with-p5js/subtitles

Introduction to drawing with p5js

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

Introduction to drawing with p5js

Share this video with your friends