Transcript

CHRISTIAN NOLD

In this video, I’m going to show you how to draw a shape on graph paper and then transfer it into the p5.js program. The first thing I’m going to do is draw a shape on this grid of 36 coordinates. So, what I’m going to do here is I’m going to draw a simple triangle, and I’m going to start at point number 10, and I’m going to connect that down here to point number 29. And then I’m going to connect that to point number 20 over here. And that’s going to connect back to point number 10.

So, together, those three form a triangle. So, in order to transcribe that into p5.js, I just need those three coordinates: 10, 29, and 20. So, here, in my program, there’s actually too many vertices. I don’t need all of these. So, I’m going to start by just deleting the ones I don’t need. I just need three because I have three points.

So, the first one I’m going to change to 10, and this one to 10 as well because I need to change both the x-coordinates and the y-coordinates. Then, for the next point, 29, I need to go here and change this to 29, 29, and finally, I need to change this to 20 and 20 and then I press Play.

And there we go. We have the same triangle. Currently, it’s filled in red because that’s controlled by this fill command here. But of course, we can change that. So, I’m just going to change that to 255 and change that to 0 and press Play. And now we have a luminous green triangle.