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]