We are ready to begin
a new set videos. The first set of videos were all just introductions, "Where are we?
What's the world coming to?" All that kind of stuff and now we're going to
begin actually looking at the practical reality of writing code.
Now, we're doing something in this "Whatever you wanna call it"
video series which is we are learning
about computer programming, the foundations of computing through the
lens of computer graphics,
drawing to the screen. So, actually in this very first video in this series of a bunch
we're not going to write instructions just yet.
We're going to begin by just feeling comfortable, getting together,
having a moment, and understanding what it means to draw
pixels to the screen. What is the coordinate system of the screen?
What does it mean to draw a point, a line, a rectangle? How do we actually
put stuff onto that? So, this should be a short video we're gonna do this video first
then we'll actually look at opening up Processing, how Processing works, and writing
code to implement our drawings,
then we'll add color and do all sorts of other stuff as well.
So, what's the beginning? What's the first thing that we need to understand?
When we
write our first Proccessing program, which
we'll eventually call it a sketch,
what happens is a window opens and here is what happens. We can represent this window
by drawing a
rectangle over here. This is our computer graphics window. All of the instructions
we write as we learn about all this stuff about foundations of computation,
we're gonna write instructions that are gonna draw stuff to the screen.
You know, it's important to note though that this is a small fraction percentage
of what you can do with computation, right? Draw,
make drawings. It's just a nice way to begin but, you know,
you should realize that you're not limited
to this world of drawing to the screen. You will go out and
solve all sorts of interesting problems and create all sorts of wonderous
things with the power of computation but we're going to start, you know, we're going to
be super excited when there's
know a red circle in the middle of the screen. We're gonna think we
really achieved something brilliant. Okay, so we have this
rectangle, boy am I long winded. You might have
one time in your life taken a
math course, a geometry course, some sort of course
where you drew something that looked like this. The Cartesian coordinate
system maybe you had graph paper even.
The graph paper is a great thing. If you have any graph paper lying around
the house go pause,
go and get it, and pull it out. You'll be very happy you have graph paper. But when
you have a Cartesian coordinate system, you add something called the "x-axis".
I'll walk over here.
Then you add something called the "y-axis". And then we could say, "Oh look, there's a
point over here".
What is that point? Maybe it's 1, 2, 3, 4, 5.
1, 2, 3, 4. And were gonna say, hey, it's
5 comma 4 meaning its
x equals 5, right, with this point over here.
The center being your origin. (0, 0) Right?
and this is 5 comma 4 and why, excuse me, 1, 2, 3, 4, right?
This should feel somewhat intuitive, somewhat familiar to you, right?
This is this idea, you have this coordinate system and we can locate
spots on the coordinate system by their numeric numeric horizontal value, x, by their
numeric vertical value, y. We're going to do this
same exact thing in computer graphics only the
coordinate system is going to be slightly different. You know, one thing I
should mention is, what is this point here?
This point is 1 comma -3,
right? This is positive 1, 2, 3, 4, negative points down.
-1 -2 -3. And here's -1 -2 -3 along the x-axis.
So, we have this idea of this coordinate system with
(0, 0) in the center, positive x going to the right,
positive y going up. Now, in computer graphics,
we have something similar to this but
flipped and with (0, 0) in a different place, right? A computer graphics window,
right, here's a window. This is actually Processing but you can see, we can say, hey that's the
top left of this
window which is this big rectangle on screen. The top left of any computer graphics window
is the origin, (0, 0)
and this is the x-axis going this way,
and this is the y-axis going this way.
But we should note something:
What is this point?
This is the point 5
comma 4, right?
This was 5 comma 4 in this coordinate system,
This is 5 comma 4. 1, 2, 3, 4, 5.
1, 2, 3, 4 in this coordinate system.
y is positive pointing down, x is positive pointing to the right.
????!!!!
I don't know, I feel at ease with this but I don't know if
this makes you uncomfortable or its just like, oh my God,
I can't believe you're still talking about where the point 5 comma 4 is. But,
what we should note here is it doesn't make sense to have negative pixels,
right? So, all the pixels within our window are positive numbers.
There's no such thing as a negative pixel. Now of course,
all of this could be-is going to change
as we look at more advanced environments. There's certainly ways, when we get into 3D,
where (0, 0) you want to consider at the
center. There are all sorts of reasons why you might consider negative numbers
versus positive numbers
but we're starting at a very simple, nice friendly, happy-go-lucky place
where we just have (0, 0) in the top-left, positive x to the right,
positive y going down.
Now, you might be wondering, boy you took a very long time to
explain that and I'm not sure why I did but hopefully that was helpful.
So, the reason why we really need to be comfortable with this
is because as we start to write instructions to draw to the screen,
the way we're going to say, hey, put a rectangle here
at this (x, y) location with this width in pixels with this height in pixels.
Draw a line from this (x, y) to this (x, y) location.
So, this idea of being comfortable with an x axis, a y axis,
and this kind of scale of pixels is important to realize.
Now, let's take this, I have an eraser somewhere.
Let's take this a few steps further. Now that we're comfortable with our
coordinate system, let's start to understand how we might write an
instruction, right, we want to draw to the screen.
How might we write an instruction to draw to the screen? So, let's start with
something a little different than I expected.
That's gonna be shocking to you, I going to start with a line
instead of a rectangle. A rectangle is often the first example but let's start with a line. So, let's say
here is our window and the only other thing about a window, we need to define,
any window we need to define a width and height. So,
let's say, I think most of the Processing examples
tend to start with width of 640 pixels
and height 360 pixels. This is drawn relatively to scale.
So. that's all another you wanna realize. If this is (0, 0) in the top left,
what is this pixel in the middle? It would be
half way to 640 which we could do that math in our head
math 320. Halfway
right down with 360 at the bottom, comma 180.
Right, so, this is what we need to start getting used to, this idea scale we're
not thinking of, well
it's two meters to the wall or three feet this way.
We're always going to be thinking in pixels and generally,
you know, what are we talking about? Something that's full screen which is like 1920 by 1080
or is it a small window 200 by 200. It really depends. Am I making a print,
an instilation, a little game for the web?
What what type of scale? We're working generally in this scale.
Okay so, let's just say that what we want to do
is we decided we could design a little picture
by making a bunch of lines. You know, maybe the lines are like this.
We're gonna make a face with a nose.
So, we could imagine that what if we could draw all these lines on the screen
we could create this pattern of this
of this very serene face. So, we need to understand,
what does it mean to write an instruction to draw a line
on the screen? And let actually just even do,
let's just do this. I'm going to arbitrarily make something up.
I'm drawing little circles here to indicate the beginning
and end of the line. So,
I don't have anyone to talk to here but you're, kinda, if you're watching this
still, somehow, you're thinking along with me.
What do we need to define how to draw a line?
What we're looking for is how to write the instruction
to draw a line. Once we figure that out, we're gonna maybe understand how to
write the instruction to draw a rectangle, to draw a circle, to draw a curve,
to draw a polygon. All sorts of elaborate shapes and designs that we might want make.
But with the line, you might say hey, a line is
a bunch of pixels between point A and point B.
We can call this point A, we can call this point B. What do we need to define
each of those points?
An (x, y). We might say this is
(x1, y1) and this
(x2, y2), right? So, to draw a line we might say,
in English we might say, "draw a line
between" and here we can, say let's
make up some numbers. Here, maybe this is about 100, 200, 300, 400.
Maybe this is about pixel 100 and this is about pixel 50.
"Draw a line between (100, 50) to"
Maybe this is, like, pixel 600
and this is pixel 250. I'm kind of making
this up. "To (600, 250)"
Right, this how you would write that English. "Draw a line
between (100, 50) to (600, 250)".
We draw that that line. How do we write this
in code? We don't know! This is where
learning to program comes in. One of the things we have to learn is syntax.
So, while we kind of all have a generic understanding the syntax of the
English language or whatever language you might speak in,
you're not familiar with the syntax of Processing.
So, I'll show you what it is. This is the syntax
"line 100
comma 50 comma 600
comma 250" So, here you go.
This is our first line of code
that we are ever writing in our entire lives,
for dramatic effect. Were saying line parentheses a number comma
another number comma another number comma another number parentheses and semicolon.
And in fact, this is where we begin. Everything that we're going to write
in this first beginning set of videos,
I'm forgetting that the camera is there. Hello! Has this format.
It has, what we're gonna say is, a function name,
can you see that? Yes. Followed by a parentheses,
followed by some set of arguments. We're going to call these
arguments which are values separated by commas.
Ending with a parentheses and ending with a semicolon.
What does this mean exactly?
You can think of this as a command for now.
Truly, it's a function or a method or a procedure. There's lots of different words for this.
Function, I think, will be the word we use continuously. But, we can think of this as a command. I command you
to draw a line. Arguments are the parameters
that define how we're gonna execute that command.
If I'm trying to program you, I could say, "walk" or
i could say, "walk fast" or I could say, "walk to this location".
"Fast" or "this location", those are arguments to the command, the function, walk.
So, everything we write and the first ones we're going to learn
are like rectangle, ellipse,
we just did line already,
and a point. So, this, I think, is a nice, easy place for us to start.
How do we define a rectangle? How do we define an ellipse?
How do we define a line? How do we define a point? What are the arguments for each
one of those?
We can then draw rectangles, ellipses, lines, points. So,
what I would suggest to you, here your exercise for the end of this video,
what you should do with come up with some design that
you would just draw with pencil and paper, if you've got graph paper, fantastic.
Draw that design. Make it simple. Only use rectangles, circle, ellipses,
circles, lines, and points,
and then try to guess, what would the instructions look like with this kind of
syntax. What arguments make sense for drawing a rectangle?
Hint: The location, width, and height. What arguments make sense for an ellipse?
For a line? For a point? Try to come up with something and in the next video we're gonna starting seeing the
answers to some of these questions, we're gonna start putting this code into Processing,
executing it, and seeing our first programs run. I don't know-
I forgot to set a timer so i dont know how long this was but i was hoping it's just about five or
six minutes.
Then you're probably looking down and it's like 20 minuts long or something. Anyway, I'll see you in the next
video if you choose to watch, which is totally reasonable
you if don't, I would completely understand, okay? Thank you!