Hi, you came back, it's very kind of you
So, we're ready now to take a look at Processing itself
and see if we can take some of this knowledge and apply it
in Processing itself, write some code, draw some pictures to the screen
This is what I want this video to really cover, to get you comfortable to make sure
not only to have the basic understanding of the coordinate system
and how to write some functions that will draw to that
that to a window, but also how the Processing software environment
actually works as well
So, if we walk over here, this is the Processing website
Processing.org I will include a link, of course, below
to this site, this is where you can click here to download Processing
Processing is an application just like anything else
you can download it, install it, and run it, i'm not gonna go through those steps right now in this video
The only piece of information that I'm assuming
knowledge of which is that, just a knowledge of
how to install software on your computer
So what, you know, if I forgot something, you know, call, write, and send your complete
letters to me
Ok, so once you've downloaded and installed Processing and run it
you're going to get a nice little window like this
So, Processing is, it's many things in a way it's a programming language
The truth of the matter is that programming language writing in which we talk about
is the Java programming language
But Processing has a whole set of functions
and things that have been added
that are going to live to serve easily draw to the screen as well as
it stripped away some of the obnoxious
You know, I don't like to insult Java
I actually realy love Java even though that makes me just about the least cool person in the world
But it's taking away a lot of the stuff that makes it uncomfortable to
begin with Java and make things simpler
So it is a programming language, realy the language you writing is Java
it's certainly an environment
this is the environment that you're going to type in "Hello, I love Processing!"
This could theoretically be a Processing program, if we read it
we're gonna get some sort of errors like I have no idea what that means
But it's an environment, this is the place where you can type your code and execute your code
which is one of the wonderful things about Processing
because you don't have to figure out which text editor should I using and how do I compile
and where I should go to view it and where I debug it
everything is here in Processing itself
The other thing is really it's a community So we go back to this website
there are examples, there's a forum, there's
It's open source, there is a rich community of people, there is a lots of
other sites that I could link to how to a using Processing, sharing code
teaching with Processing, making project with Processing
So, in addition to just being software there's also this vibrant community which will hopefully
help you feel happier and more comfortable kind of diving into this new world
of programming for the first time
Ok, so once you've downloaded Processing
you've run it, you've got this window
So, a couple things I should point out there is up here, right?
This triangle is the Run button
It looks kind of like the play button on some
media device, like I don't know, a VCR
an Apple TV, Apple TV or Roku boxes play buttons
but anyway the point is this is your Run button
but it is not really Play
Run means is compile your code, compile your code and execute it
So it's going to run through your code, compile it to binary
execute and run the program which is why
when we ran this one we got this error
It said "Unexpected token: Hello" Now, one of the things I like about Processing is
it sometimes gives you a nice friendly error message
and sometimes it doesn't but
we can just... I didn't mean to talk about is now but
whenever you have a mistake in your syntax you're going to get an error
and that error will hopefully lead you to how to fix that, the your syntax
But here we say (?) it says "Unexpected token: Hello"
because Hello is not token meaning a some sequence of characters in-between spaces
and punctuation, a word, so to speak
It unexpected because it doesn't know what Hello means
Perhaps, it would know what line is
So, for example, if instead of writing that, I wrote line and what did we say
a 100, 50, 600, 250 and I put a semicolon
and I run this program, we would see
I'm not over here!
Hey! I apologize. This is a.. I can't go back and fix it
It just gonna have to.. someday I'll fix this video
I'll have the way like (?) and I'll just I (?) record all these cause I just
you know, this is like (?) really for that video
that I imagine would be so perfect, but you can see
I was able to run this program and there was no error
So, this is a fine syntax, it's a syntax actually we will learn
How to draw a line from point X from the first XY to the second XY
Now, the window we got here
doesn't actually have the line and it's also very small
Didn't we say that a window should be 645 by 360?
Well, one of the things that we haven't learned
is actualy how to set a size of the window
We can see that by default if you don't specify a size
we are actualy getting on 100 by 100 pixel wide window
So, here we now about to learn another function
Size. s i z e and I can say 640, 360, semicolon
And now we have, look at this, two lines of code!
Really got a program now. Size, line. And if we run this one which I can also do
cmd+R option do, and we see
There it is! There's that program! I sadly erase the drawing on the board
We could see that it basically mirrors exactly what we draw on the board
So now is the moment
when you could say to yourself "This drawing that I made with
pencil and paper, let me see if I can recreate it in Processing?""
"Can I write the instructions to create that drawing?" And this is your first practice in programming
I should point out that even though these were
I said we weren't in the introduction anymore, cause we actually making staff and using Processing
We're still in the introduction
We're not really programming, well, we are programming
We are writing code
We are compiling an executing that code, but there's no real logic here
We're not saying "Hey, you know, if this happens then do this"
we're not creating this kind of flow
this complex sequence of logic, we just kind of issuing almost
a linear list of commands that ends with a static picture
So, really what we want to get to in the next set of videos is that
flow the program that large, we're gonna really do so much more
to start understanding the foundation's of computational thinking
Right now we're just kind of practicing by getting used to
syntax and the Run button
and I hope the camera might cut-up the second
Excuse me for a second I coming right back
Hello, i just had to press the button at the end part of the room
Ok, so, now this brings us to my next point
So, let's say that what we want to do
I knew that will happen
Let's.. Hi... Ok, I have to press another button, this is terrible, I really should edit this
somehow and some there will, you could, if someone download this video,
cut-up some parts and then send it to me, I'll reupload it
But, listen, so, so, let's look at this list over here
These are the list of functions we are going to start with
Rectangle, ellipse, line, and point. And this is our window
which is 640 by 360 and, let's say, we want
to kind of draw this.. I don't know what i'm doing..
Something like this.. This could be our (?), but
You guys are hopefully much more artistic than me
and can came up with something more creative
But all we know is how to draw a line, now we need to discover how to draw a rectangle
So, you could guess, we could.. I wish we have a little dialogue here "Hey, whether you've some ideas,
you know, how would you design the rectangle function for Processing,
what arguments would you require?"
and you might say "Oh, what about the XY of this point and the XY of this point,
that's a possibility, what about the XY of the center and the width and the height,
what about the XY of the corner and a width and height?"
In fact, all of this is are possible,
but the default way of drawing a rectangle in Processing is
with four arguments
So, rectangle has four arguments:
x, y, width and height, the x and y being the location of the top left
the width being the width in pixels
and the h, the height, the h being the height in pixels
So let's go add this to our program over here,
Let's say, okay, we want to draw a rectangle and just to sort to see that it's working
let's make the XY the same as the top left corner
of this line
and let's make a very a skinny rectangle, it's only 20 pixels, but rather tall
That's 200 pixel and if we run this, we can see, look,
we now have a rectangle with (?) this kind of slide thing,
we have this line and we have a rectangle over here with the XY,
and I could zoom all the way into this, not sure of point of that,
but the XY being the top left, the width being 20 pixels
and a height being whatever I typed, 200 and something like that, 200 pixels
Okay, so we can see.. Ah, okay, now we learned
how to draw a rectangle! And I could go through and show you ellpise and line and point
There are a lots of other drawing functions in Processing
But, I mean, what I'm not going to sit here all day
and talk through everything, all possible way
to draw everything in Processing
There's gotta be a better way, right? It doesn't just happen and you should..
There is some interesing, a lots of interesting ideas and
how make this more intuitive, why are we actually doing the programming itself
I mean, what if instead of typing this out,
you could just draw a rectangle on the screen
and code woulds only up here, but that's not really the point what we're doing here
What I want to say is what one of the things you want to get used to is
how you look up this information
How do you look up how to draw a line if you didn't know
if you weren't just
if you didn't just enjoy watching videos of somebody
with kinda slightly messy hair and just talks and talks and talks all the time
So, the way you do that
is through the Processing website which through the reference
So over here there was a link to reference and it left over here
and if I click on a reference, we gonna suddenly see this webpage has a list
of all these possible functions and these are the ones
I want us to kinda lookat right now
2D primitives: arc, ellipse, line, point quad, rect, triangle
Here's a list of basic drawing functions in Processing
each one of those is a link, if you go to that link, it's going to show you
"Hey, here's the syntax, here's the name of the function
here are the arguments, here are what the arguments do, here is an example"
So just... Let's go to rectangle which I think is a good one to look at
We can see "Hey, look, here's the name of the function rect
and here's an example of what it looks like, four numbers"
I don't know what those numbers are, by the way you can do
Rounded rectangles and slightly (?). And you can read the description
But really, and you can see here, this is what we're doing
We're making a rectangle with a, b, c, d
Now, I often think of those I did on the board of there's X
X, Y, W, H, because X for x, Y for y W for width, H for height
But we can see here in the reference
It's going to describe that for us and I'mgoing to
zoom out slightly, oh, not all the way
We can sort of see here and we'll try to get this in a way that you can see it
We can see here rectangle ABCD, A is the
x-coord the rectangle by default, B is the y-coordinge of the rectangle
C is the width and D is the height
So, we can see, that this page is giving us
what the syntax is, what those arguments are
what the argument actually do
and then at the top here a few examples and I'm not gonna go through
how the rounded staff works
This is on you can explore on your own and ask questions in my new weekly
program "Ask a Processing question" which will start sometime in September
I don't know, I don't like plugging the video within video for no reason, I admit that to be
strange and humorous and it was not, I laughed sadly inside by myself
Okay, so this is really where we are
I think I'm actually kind of coming to the end
of this video, now, what you can do for your exercise is
In the next video we will look at color
What you can do for your exercise is go through the reference pages for ellipse,
and design your drawing
Now, show you, I often suggest to make a little
alien or monster, it's kind of a nice thing to start with
Really any pattern that you might want to think today
See if you can create it with numbers. And again let me just point something out
This is kind of a silly exercise, it's almost like (?)
It's kind of a diversion
Programming is not about hardcoding numbers into functions to create a picture
Programming is about creating a sequence of instructions
a logic to execute a task
But just to get started, and really we want to avoid, we want to really
Hello over here, we want to avoid
This way, this type of co... (?) we want to avoid this
We don't want to have a lot of all these hardcoded numbers and this this is not is not
It will all become clear as we move on
But this is not what we're doing eventually, but it's a good
place to get kind of started and this kind get used to the Processing
and get used to what errors you gonna get
like when I forget that semicolon again
Let me forget this semicolon instead Yes, I guess
this is without one at the bottom here it said
"Syntax error; maybe a missing semicolon?"
So you can see you want to just get through practice
what kind of syntax errors are you gonna make or you used to fixing them, can you look up
staff in the reference, can you make that
that picture with Processing
So, work on that, the next video will go over how to add color to this as well as
kind of filling some of the blanks with some of this functions
I will be kind of wrapping up this sort of first group of videos about just kind of
the basics of syntax and the basics of drawing in Processing
Great! Thank you, I'm going to press this button