Hello
so we have begun we have written are first lines code, you...
you've hopefully written your first.. created your first processing sketches now. You're running stuff,
you've stuff drawing to the screen we've begun we're on our way
but truth be told
we are missing a massive, a humongous
conceptual piece to this puzzle of
learning about writing software about programming the computer
that we really need to tackle right now so this video and then the next video we're
gonna tackle something we're going to think about
the.. we're gonna call this the flow of a program
flooow of a program. So look.. umm ahh let's look at this.. let's consider
this idea of flow in the context what we have so far
so umm over here we have a very simple Processing sketch it's what we've kinda started with
we have size of the window, we draw background and we draw a rectangle on the
screen and if I run it
you can see this is the result. What's the flow of this program?
Well we can count one, two, three, four, five, six lines of code
it executes each one of those in order and when it gets to the end it's
done and voila -- rectangule on the screen!
but truth be told I don't know I walked to over hear but I like the white background
truth be told this is not.. that is not how most
programs operate. Programs operate in a lot of different ways you can think of something
as event driven,
for example if you're sitting there using Photoshop every time you
click something or pull down a menu item, some event is triggered
some code is executed and an image is processed. You can also think of a program as kind of running
forever in this loop, if you're playing a game in any..
if you're playing a game or watching some procedural animation
it's happening over time. Draw the stuff on the screen move the stuff, draw the stuff on the screen
move the stuff. That's what 'Pong' is doing: move the mouse draw the paddle over here
move the mouse draw the paddle over
here. Programs run over time. They keep track of
data over time. They take different paths based on what the user does or what
inputs are coming to the program. We need
a foundation for writing programs.. writing
processing sketches that happen over time whether that means
they've run in the loop over and over again or based on
some event that happens when something in the program gets triggered
we're going to look at both of these scenarios but we're going to start...
I think am talking about the right thing that I meant to in this video. We're going to start
with actually just this idea of an animation loop
and you can think this again if you were... if...
someday I will come up with a better scenario than just start with thinking of a game but if
you were making a game Pong, Space Invaders.. something more
modern I guess, you would.. you would write a program
that runs over time. It draws the stuff it moves the stuff, it draws the stuff....
I said that already. Okay so how are we going to do this? If we
come back and look at this sketch what do we need to add to the sketch so that it
runs over time?
This program really just executed, finished we want it to draw
over and over and over again so that we can start to animate suff
So in order to do this we need to introduce
a new concept, this new concept is going to be known as
a block of code.
I'll just write that over here "block of code"
we're going to be using blocks of code all the time. We're going
when we want to sort of like segment; this part of our code does this, this part of our
code does, this this is the definition of this,
this is the definition of that, we need to create a block of code.
A block of code is always noted with in open curly bracket
to begin
and a closed...
a closed curly bracket to end.
And then the code that is contained within that block goes in between those curly brackets
so we need two blocks of code.
Let's think about this, the flow of our program is actually gonna be very very simple
we're going to have two elements one we're going to call
'setup', and one we're going to call 'draw'.
I don't know what am drawing over here..
this is going to be setup and this is going to be draw. We need some lines of
code in setup, we need some lines of code in draw. And I need a bigger whiteboard...
but anyway what can you do. Okay so why do we have this
two blocks of code? Here is the flow of a program that we're going to begin with
our program is going to do
somethings at the beginning we're gonna think of these as the setup,
the initialization conditions, and this (draw) is going to do somethings
over and over again. And so setup is stuff that's going to happen
once and only once.., once and only once
draw is the stuff --I could like
hide back here -- that's going to happen forever over and over again in a loop
so when it gets to the end it comes right back up and executes that code again
(Setup) - code that happens once, (Draw) - code that happens over and over again.
Why does this flow make sense for us? This flow makes sense for us
let's just take for example the game Pong again
because there are often a bunch of things you want to do to initialize the
program, Pong begins
set the score to 0 set the level to 0
place the paddles in their starting location place the pong in it's starting location
that's the stuff that happens when you initialize the program then
as the program runs over and over and over again looping and looping
it does stuff like move the paddle draw the paddle move the paddle draw the paddle
if the pot hits the paddle turn the pot around
if the pot goes past the paddle increase the score that type of thing..
so all that stuff is always happening while the program's running
when does the program stop? I don't know
in this case absolutely never... you know when the computer breaks
when the user turns it off or hits quit. Obvioulsy we could create
all sorts of different type of scenarios where a program stops restarts all sorts of things..
but but this is our basic foundation, some stuff that happens at the beginning
and some stuff that happens forever and ever so let's go back and look at this code for a second
okay here are some things in this program there's the size
function there's the background function
and there's the other stuff
that draw the rectangle. What should happen at the beginning?
andd what should happen forever in a loop? we can look at this we can ask that question, you could
pause the video right now
and then try to answer it for yourself. Now you've unpaused or you probably didn't do that
because who knows why...
ahh anyway maybe you did. Thank you fo like humouring me but
umm I think there's one thing that is incredibly obvious
which is that size should go at the beginning. Size is an initialization
condition, we're setting up the size of our window. Now ofcourse
you could probably come up with some scenario where you want the window to dynamically
resize while the program is running but that's not what we're doing right now. What we're doing
right now is we're saying size is something that we have to add..
that we have to do once and only once now in an animation program
presumably we want to draw
our stuff over and over again we always want to draw it in the window
so I'm gonna say that our rectangle method
which I forget what the numbers are but I'll just make some of them up, is going to go
in draw and fill() and stroke() and all that stuff for drawing
a rectangle.. we're going to.. we wanna draw that stuff for ever and ever looping over and over again
setup the initial conditions, draw thesev stuff over and over again
so there's one more thing over here
background.. I forgot to start the timer, I don't know how long I've been going
background where does that go?
Mmmh am gonna say there's no correct answer to this question
and for now I'm actually just going to put background here
and we're going to examine this later what happens when you put background in
setup what happens.. there're really a no right answers to this question
it's up to, it has to do with what you're creating
you have stuff in setup that happens at the beginning and stuff that happens in
draw over and over again.. how many times can I say that in one video
I've probaply already done it too many times already Ok, so this we've now established
as what we want to do, we want to have these blocks of
code right? a block of code that is our setup
a block code that is our draw but.. but the truth of the matter is
uh the syntax for how we're going to write this is going to suddenly look a little odd
so this is conceptually I think I have established conceptually that we've
got setup we have size in a block of code
we've got draw which has background and rectangle in a block of code
but what do we actually have to write in processing?
So I'm going to erase everything around this
and am gonna look at
what the actual processing syntax for establishing setup and draw is
what it is is we say void
setup parentheses
open bracket close bracket: ' void setup () {} '
void draw parentheses open bracket closebracket: ' void draw () {} '
so the.. what we should recognize at least from this discussion of a block
code is these open bracket closed bracket. This is saying
everything in between these two brackets is the stuff that goes in
draw, everything in between these two brackets is the stuff that goes inside
we now no longer want any code anywhere else. Any stray code just
somewhere outside these of two blocks would not make any sense
code only happens in setup() and draw(), of course there could be more
functions and lots more stuff later but for now we could sort of think in a simple way
code only happens either at the beginning or over and over again in a loop
so looking at this we can understand now ahha setup this is the setup
block of code, this is the draw block of code. But there's other syntax here that we dont understand
this seems so sad like why do we have this word void here.. I mean
is my programming life void of meaning and happiness and why is that word there
and these parentheses there and I dont understand
that and what... what what does all this mean?
[laughs] what does all of this mean? The truth of the matter is
umm what the word void means will come later
why we have these parentheses here will come later. But one thing we can sort of see
about this.. but I will mention is what we're actually doing is not defining
this is a block of code in that it is contained between curly brackets
but what we're actually doing is defining our own function, we're defining the
that setup function we're defining the draw function. Those functions
are executed by processing automatically setup at the beginning draw over and
over again and we've now defined what code should be inside those functions
this will become more clear in video ____
well sort and figure out what number that actually is
when I do a video that is all about writing function.. more about this sort of syntax
of defining functions but for now we just need to kind of memorize this syntax and so
let's go over to our processing sketch
walk over here and let's add this in
so I'm going to add in, I'm going to say void setup ()
curly bracket curly bracket void draw ()
curly bracket curly bracket and I'm gonna
obnoxiously remove my comments here just for a second. Ooh I did something
AAAH!! Help everybody stop ahh
what I wante... I auto.. so I did something that's like a
force of like unbelievable habit in nature I hit command + T
which didn't want to do because I wanted to at least demonstrate before I did that
what the way my code looked was like this so one convention again remember
line breaks got no meaning in the way the code executes
the curly brackets define the beginning and end of a block, a semi-colon
defines the end of a line but human beings especially if you're a human being like me
like to keep things incredibly orderly and very nice and neet
to feel comfortable and relaxed and one's life
and um the convention to be able to make code a little bit more readable
is when you have a block of code always indent
the code inside that block. So you can see here
that in draw you can see all those lines of code are slightly indented but then in setup
its not. I could do that manually myself space space umm..
but one thing that processing has is under edit it has a nice little
option here called Auto Format and Auto Format will auto indent and
clean up all of your umm.. blocks of
code for you, so probably that was a little bit of an unnecessary digression
but it's something that is...
auto formatting and indentation and code commenting
is something that is very meaningful and important to me in my life and
you should not be like me you should be a free-spirit and just enjoy things and
just don't worry about it
you know if a couple of... if your code looks like this:
you should not have to like you know sit down in the corner and like breathe deeply
for like 15 minutes you know it'll be fine but anyway
okay so I went off on a really long tangent there which someone will download this video and edit
that out and send it back to me so I can upload it again without that but
until that happens you had to sit through that. Okay so
we've done it we now have setup size happens once,
draw this stuff happens over and over again over and over and over again
let's run our new program our dynamic program that runs over time
we run it we look at it we have the exciting amazing result of
exactly what we before, [laughs] this is very sad
this is a sad moment in computer programming learning history
fortunately it's not gonna be sad very long, the next video we're going to take a step
further. But why
is it still a static program? The reason why it's a static program
is what did we say to do in draw over and over again? exactly the same thing
exactly the same thing, draw the rectangle at 320, 180
draw a rectangle 320, 180 draw a rectangle 320, 180
it never moves, it never changes color never grows never does anything. This is our next step
if we have a program that runs over time how do we introduce the concept of
variation into this loop? So
umm I suppose what I would suggest to you before you watch the next video is find something
you made
and sort of get setup() and draw() into your sketch try to type out the syntax see if
you run into any errors, just get a sketch with this
with this umm with setup and draw and something I will say umm
for some reason you're following along the learning processing but it does
something which says
take your elaborate crazy alien design and put it in a dynamic program
and actually what I would
suggest to you do after some experience of using
this book with teaching is don't do that, I would say
come up with something really simple make a very simple design
one circle one rectangle because what we're gonna
focus on is less about all this code and gobbling up for drawing elaborate patterns
on the screen
we want to focus on just starting to animate the simple elements
how to.. how to introduce variations into our program it's gonna be alot
easier to do that with a simple sketch and not an elaborate design
later you can kinda understand what it means to like start building
more elaborate design but right now I want to focus on this sort of flow of the
program. So... ahh boy that was a much longer video than I imagined even though I have no
idea how long it was
and I will be recording the next one as soon as I press this stop button
and the start button, see I just keep going. This is artificial that I stop and start
I think I would like them to be a lot more shorter ones but I don't know am just doing the best I can
thank you very much