1.1: Drawing with Pixels – Processing Tutorial

1.1: Drawing with Pixels – Processing Tutorial


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 headmath320. 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!

100 Comments

Leave a Reply

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