2
Sep

1.3: Basics of drawing – p5.js Tutorial


Hello, so this video is
an introductory video, this is a beginner video, for those of you who haven’t learned
anything about programming before. We’re going to look at p5.js, I’ve discussed what p5.js is
in the previous video. In this video, the only topic here,
and this is hopefully a pretty easy one, is coordinate system and shapes. What does that mean? So one of the first things
that I would like to show you in learning to program
is drawing. So there is a lot more to
programming than drawing, in fact this is a tiny piece! If what you’re interested in
is programming games or animations are lot of
that is graphics and drawings. But in things of what you can do
on the web, having different things talk to each other, interacting
with the user, analyzing data, all sorts of tools to do good in the world, there’s
lots more that you can do besides drawing. But drawing is a nice place to start! It’s not for everybody,
but if you are a visual designer, or like to draw or like
to do things visually it can be a useful, easy way
to start learning the basics of programming. So hopefully later I’m gonna do a lot more
videos that just look at the text, the data, that have a little
bit less to do with drawing, for those of you who
might be interested in that. Ok, so in order to draw, we need a canvas. So this is the canvas. Now if I want to draw something
on the canvas, that canvas on this board,
I will take this pen and I will just do this …
there, I drew something! Now, programming is the act of
giving instructions to the computer to follow. So whereas I just kinda
did some sort of mojo in the moment thing with
my mind to draw that rectangle, if we, you want that rectangle to appear on the screen,
you need to write the instructions for that. So, the instruction that you need to learn
to give it as a command really what it is, is a function. I can’t say the word ‘function’ enough because function, this idea of
a function is completely fundamental to the way
everything works in Javascript! So this is kind of our first view
of a function, there is a function called ‘rect()’ So if we think of this as a command
you say: rect! the rectangle would appear
there in the window/canvas! However it will not because
I need to say where it should go and
how big it should be. So how do we tell the computer how to draw that rectangle? So the way that happens
is through the use of something called ‘arguments’. So when I issue this command: rect()!, draw a rectangle!, I also have to specify
some arguments, and the arguments to that rectangle, they come in the form of numbers, and are separated by commas, and enclosed in parentheses, with the line being ended by a semicolon. So this is a moment,
that we just have to admit something to ourselves, which is that
syntax is a thing that you have to deal with in programming. So with the human language
that we speak to each other, in my case it is English, and some broken, bad versions
of some other languages, we can say things very informally:
‘draw a rectangle!’, ‘would you please draw a rectangle?’, ‘kindly, my friend over there,
would you make a rectangle happen on the screen
by moving your pen around?’, there are all sorts of different ways
we can say that. But here I have to say
it in a very specific way. If I’m missing a comma, or parentheses,
it is not going to work! We’ll get an error message, I’ll show you what happens
when you get that error message and how to fix it, but this is something that is important,
that you’re gonna have to start getting comfortable with,
I don’t know if I’m ever getting comfortable with it,
but it’s something that exists! So that’s the syntax.
What goes in these blank spots? So here are the things that go there: an x-location, a y-location,
a width and a height. So this brings up a key point! What do I mean by that?
x-location, y-location? For some of you that might
be the most obvious thing, especially if you have done
stuff with computer graphics before, but for some of you
it might be quite new. So what I would like to do,
very briefly, is take a look at a different context. This sort of middle school,
high school geometry class context. So this is a graph,
of a Cartesian plane, named for René Descartes,
the mathematician. This is what’s known as the x-axis, this is what’s known as the y-axis. And if I’ve got a point over here
I could describe that point in terms of an x and a y. What is that point’s x and y? Well, I can tell you that the center
right here is the point 0,0. That gives us a clue! The x-axis moves this way positively and this way negatively. So, 1, 2, 3 … so the x-location of this
point here is the number 3. And now we can say: 1, 2, 3, 4 …
y moves upwards positively the y-location of that point is 4. so this point has an x-value of 3,
a y-value of 4. Now let’s get this canvas again. This is our canvas,
the thing we’re going to drawn on, [ramble] This canvas .. How does this map
to this canvas? Well, the thing is computer graphics
doesn’t work this way. There is a similar idea,
there’s an x-axis and a y-axis, but 0,0 – at least for what we’re
doing right now, this will change later – is not in the center! The top lefthand corner
of our graphics window, our canvas, is defined as 0,0 … and x moves positively in this direction, y moves positively in this direction. So this is the x-axis and this is the y-axis. Now, the other thing that’s
sort of key here is I use these small numbers, zoomed in,
kinda counting, that’s kind of not relevant for
the creative programming things that I’m gonna show you
on this canvas here. Because typically speaking I’m gonna say:
open a canvas that has a width of 640 and maybe a height of 360. So we’re going to open a large window
with a lot of pixels, millions of pixels! We could just kind of guesstimate
here for now, but if I said: Oh, an x-value of 100, where’s 100 gonna be? I don’t know … maybe over here somewhere Maybe I say a y-location of 200, it’s like down here somewhere. If I say width of 75 and a height of 150, I end up seeing a rectangle like this. But not drawn to scale … So the reason why I am doing this
in a totally messy ‘I am getting it all wrong’ kind of way, is I think
it’s a nice way to figure this out, just through trial and error. the key is the syntax,
I need to know: what is my function name? What is the command I am issuing? Rectangle, rect(), What are the arguments it expects? An x-location, a y-location,
a width and a height. Formulate the syntax,
and get it in the window! Now look at this, let’s actually
just make that happen … So I’m gonna say:
my canvas is 640 by 360, you can see I specified there
the size of the canvas, and now the rectangle is …
I said something like 100, 200, and then 75, 150 … So you can see now I entered those in,
as the arguments, rect, 100, 200, 75, 150 So now, moment of truth,
let’s hit this button up here, this button, by the way,
this green button right here this is what it’s known
as the ‘play button’, it’s kind of an absurd thing,
to have a play button, like we’re playing our code,
really what we’re doing is executing an application, we’re launching
the software we’ve written here, this exciting piece of software
that makes a canvas and draws a rectangle,
but it’s nice to have this model of thinking
of it as a media player. So the next thing I’m gonna do
is I’m gonna press this button and we’re gonna see …
here we go. So you can see now that this
is what the canvas actually looks like. It is 640 pixels wide,
it’s 360 pixels high, and the rectangle is
at 100 on the x-axis, and 200 pixels down, 75 across,
and 150 down. So you can see how that works. You can see here that I, this was kind of
incorrect, my guesstimation, but over here now, I can say:
ah, that’s not really what I wanted. I didn’t want the rectangle to go so far to the bottom, so I’m gonna change it from
150 to 125, and let’s stop, and then play it again, and you can see, there it is! There’s my rectangle at a different location. So this is actually kind of it,
for this first stage! But there’s a couple of more pieces here
… One is, there are more shapes
in life than a rectangle! Some that you might look at,
just now, if you’re beginning to learn, are: ‘ellipse’ (a way of drawing a circle but you can
also draw this or this), you might look at ‘line’, you might look at ‘arc’
(that’s kind of a tricky one), ah, these are pretty good,
you might look at ‘point’. There are a whole bunch of these, and they all expect some
amount of arguments, and you could guess,
well, a rectangle needed an x, y, and a width and a height,
maybe an ellipse also needs x, y, and a width and a height? And to draw a line,
well, what could a line mean? ok, well, a line is a thing …
a line, a bunch of pixels that connect two points. How could I say: draw a line? Oh, what if I give the x, y of one point
and the x,y of another point? That would tell you how to draw a line. So you could guess all this but the point of doing this
is not to guess or memorize, there is a reference
that will list you, what are all the possible functions and
what are the arguments they expect? So if I come over here, the thing
that I would like to show you, is I’m going to go now to the p5.js website and this is kind
of where you should start, oh, look at that beautiful animation, you should start by looking at,
well, there are a lot of places you could start, you might need to
download the editor, which I think I showed in the previous
video … maybe I didn’t … ? There are some tutorials here,
there’s more under ‘Learn’ and ‘Start’ but what I want to look at
right now is ‘Reference’. So I’m gonna click ‘Reference’ and … I would like to look at is … ‘shape’! So I think this is a good place
for you to start. If you’re looking for an assignment or an exercise to do at the end of this video: look at all these functions,
arc, ellipse, line, point, quad, rect, triangle and this is in fact what I love
about working in Javascript let’s look at the line function you can see here: look, that’s it,
this is an example for how you draw a line, but I can just play around
with this right here … and see does that change it? So you can see here, but this is what
it’s important, this is what matters to you: this is the syntax: ‘line’ expects
4 arguments, you can call them parameters, x1, y1, x2, y2. That’s connecting, a line is
connecting 2 points. The parameters are here,
here they are defined. So this is what you have to get
used to doing: you see the basics, I can open up
a project in the editor, I can type code in there,
I know I need to know about syntax, now I have a sense of the coordinate system, but you need to get used to all
these different shapes. What are the shapes that you can draw? And how do you do that? So what I would say, on your own,
I can get through all of these, but I think it’s much more useful
to do it on your own, to try all these, to play with them
even just in the p5.js website itself. There is a last piece, before I end this video,
that I want to talk about, and we need to come back here. I kind of just glossed over this
‘createCanvas’ thing and I also really haven’t mentioned
what is this function setup() and this function draw()? So these are gonna become
much more clear in the future times, in the next, in a future video we’ll spend a lot of time looking
at setup() and draw(), but the deal is,
I said that functions are absolutely fundamental to
the way that Javascript works! Everything boils down to a function. And the first functions that you
are going to learn to write … … looks like this. So your code has to live somewhere. It has to live ultimately, there is more
to it than this, now let’s think of this statement: ‘your code
has to live inside a function!’ Right now there are only 2 places,
2 functions to put your code … there is the setup() function
and the draw() function. The setup() function, which you say:
function setup() and we’re gonna get to what
these parentheses are, the curly brackets define
the beginning and the end of that function. The setup() function is where you
do the things you do right when the programs starts! Like: ‘createCanvas(__)’ To setup your canvas,
to setup your p5 sketch, you need to create a canvas
in the setup() function. Then you want to draw stuff
to that canvas. Where do you all your drawing stuff? Inside this drawing function! So there is more to it,
we’re gonna need to make things animate, we’re gonna need to do something
when someone clicks the mouse, and how we handle different events, and how the program flows over time. I’ll get into this more and more
in a future video. And we can look back here and see:
there it is! setup() has a createCanvas() and draw() has rect(). Try to make a design of
something interesting for yourself, and hopefully this video
was somewhat useful. Ok, I’m gonna stop now! [ramble]

Tags: , , , , , , , , , , , , , , , , , , , , , , , , ,

100 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *