3.1: Flow (setup and draw) – Processing Tutorial

3.1: Flow (setup and draw) – Processing Tutorial

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

Dereck Turner

68 thoughts on “3.1: Flow (setup and draw) – Processing Tutorial

  1. Myles Jeremiah says:

    Great videos dude!

  2. Emily Hatton says:

    you are a champion, thank you for posting these videos!! I completed an online course on processing but youve explained it in a way I can actually understand. Thank you!!

  3. Guenther Walze says:

    Geat work – I really like your style 😉

  4. 1 says:

    You are amazing. This could be a paid online college course.

  5. Mary Sterling says:

    These videos are so helpful! I sincerely wish I'd found these earlier. Makes for an awesome refresher of class material for tests. Also very entertaining, I enjoy these a lot!!

  6. George Everen says:

    How do I create an interaction between a shape and a color?

  7. George Everen says:

    Also, you are soooooooooo helpful

  8. Intermediate Coder says:

    You are an absolutely amazing teacher. Thank you so much for everything you do! I have a question though. Is there a way to cause an interaction between two shapes. For example, if an ellipse touches another ellipse, something happens.

  9. Spirit Realm says:

    Processing 3 will not run on my new windows 8.1 computer. Do you know why? As soon as I click onto the .exe icon the program closes a second later.

  10. Rahul Kumar Verma says:

    Hey Daniel, I want to simulate the behavior of a Cantilever beam hinged at one end and some external force is applied on it. I want to see the oscillation of the beam in that scenario.

  11. Rahul Kumar Verma says:

    How to implement the Effect of Wind exerted on any object?

  12. Ilya Kolesnikov says:

    This is f_king awsome course! I don't speak English well, but I understand lections. And the general thing – it's not boring& Thank you

  13. Shradhan Kumar says:

    Your tutorials are good. I wanted to interface processing with markers to build up augmented reality shapes in real time. How can I do that?

  14. Simon Asp says:

    Is this recorded at a low frame rate to save space? Just curious

  15. Supernatural Swamp AIDS says:

    Best teaching style for programming. Been self teaching(Books, youtube, Google 😛 ) for a few years now, And I'm still a noob. But your videos are the best I've found. Your personality is perfect for this. Thank you for your hard work, It's greatly appreciated.

  16. Kurd Gamers says:

    you are really smart and helpful

  17. Aurora Chang says:

    I am Chang Chia Chi, from Taiwan. I really like your tutorials! At the first time I saw your video on Processing.org, I felt your passion of programming, and I realized that coding and Processing were amazing after watching your video,I major in Interaction Design.These are really helpful and fun! It is really kind of you for making these videos. really like your style:))Thank You so much.

  18. Maria De Lourdes Garcia De La Hidalga says:

    This has been soo helpful, thanks! I am stuck now on trying to change the color of the background without deleting whatever I already have on the screen, what would you recommend?

  19. Thomas Heaven says:

    I'm into microcontroller programming (amateur) and I want to be able to make a GUI for Arduino (Oled.) I know how to make a library in C language from scratch and link it ect but i have no idea how to make a GUI library with Arduino for my Oled. Do i make it with C++ because i saw the extension is .cpp for example and can i use processing for the GUI? I appreciate your input guys as I'm a bit lost.

  20. Tyk HeadBash says:

    Thanks a lot for these videos. Just started to take a basic computing sciences course in High School and you were my teachers resource of choice, and his trust was well founded. Thanks for all the help.

  21. changil_Choi says:

    Thank you Daniel, you really teach easily. Thanks for your power, i have really short english , but i can start processing and understand about setup and draw~!

  22. chalagif34 says:

    Great vids, Thx for all your advises and others vids. U give me the motivation I needed. Here is my quick example as a non developper guys :

  23. Dániel Markó says:

    Why do we use void here, and why do we use function at p5.js?
    Also size (x,y) instead of createCanvas(x,y)…
    Why do these programmes use different dialects of the JavaScript language?

  24. Rafael Tolentino da Silva says:

    Really, there's no need in cutting those parts
    They bring a lot to the lesson
    I'm so loving these!, thank you

  25. Manchan says:










  26. iCouch says:

    I have honestly never seen a programming tutor on YouTube with as much passion as you. Definitely subscribing.

  27. Manan Karnik says:

    simply love Ur hands waving💗💖💓💛💚💙❤💟💝💘👏👏👋👋

  28. Gerard Calvet says:

    You didn't cut the videos in the end…
    PS: Your channel is awesome

  29. Pandamonaeum says:

    I watch these on x2 speed. This is Robot Gold.

  30. Silas Eriksen says:

    Is there a difference between writing some code and writing some code in the setup function?

  31. Cookie Cutter says:

    Is there any reason to follow this Processing series over the P5 series? I've watched deep into the P5 vids and the Processing series seems to be heading exactly the same way… even the code seems to be exactly the same :S CONFUSED

  32. No Name says:

    No ads so that I can click?

  33. Dominic Patterson says:

    I'm starting out by following along with these videos, I'm guessing for now (as of my watching this video), it's not important what void means, but it's important to get into the habit of writing neat blocks of code?

  34. Ishida AnimaGames says:

    Thank You Very Much <3

  35. Tada Banri says:

    The "help everybody stop" is so funny.
    Btw you're awesome.

  36. Batman1st Doodle Jump says:

    lol that intro

  37. Scoobert says:

    This is JavaScript right?

  38. Mz Killer says:

    When a progarm goes in to a bug xD

  39. Cody Bishop says:

    Why does setup run only once but draw does it over and over? Is this inherent?

  40. Jack Pavlik says:

    3 People couldn’t “hack” it.

  41. Thom van Damme says:

    9:55 AHA

  42. Sumin Kim says:

    (…breathe) hello

  43. Andreas K. says:


  44. Inquire98 says:

    "Thank You", thank you very much…

  45. play yocast says:

    a long way to describe a function. but i like the way you explain stuff. it is understandable to a dumbass. could you make another tutorial series about processing but at a beginner programmer level (basiclly we know jargon and all that but then we are people who just use programming to solve problems with algorithms we write and print out in console, and we want to get started with programming visually)

  46. NAWAR ASSAD says:

    you are amazing man

  47. Darío Saquetti says:

    I wish you existed 20 years ago when I was at uni, I used to do flash and I hated action script. I just simply couldn't understand. Never too late. I am dashing through your tutorials.Thanks a lot for the effort

  48. Wisnu Andrian says:

    thx nice good job,

  49. 17colosal says:

    In what video do you explain how to crate an .exe from the code you wrote? Thx

  50. Gabe Mott says:

    Happy Thanksgiving and thank you!!!! AND YOU MUST include the link to next youtube video in your description as YOUTUBE flow does not do it man!!!!

  51. Flexboy Love says:

    thank you so much for this. You are a truly amazing person. Keep it up!

  52. Ethan Cass says:

    Wow you're so good at teaching this, I'm pretty new to coding, I can understand it way better than I can write it, but you're very good at explaining it and showing why the things work like they do, while still keeping the simple parts simple. Thank you so much, and you're super entertaining too!

  53. irshad ansari says:

    Worth subscribing to this channel

  54. Archer Smith says:

    I feel like you could have a good shot at acting. Would be fun to see u in film 🙂

  55. Yasmin Y3 says:

    11:38 It´s night and you've made me laught so hard

  56. Xnoob Speakable says:

    WHY CANT I DOWNLOAD PROCESSING??? it is stuck at 100% and doesn't let me open it

  57. krakakratos says:

    beautiful brackets

  58. Salim Huerta says:

    I’ll be back Mother’s Day and game of thrones are calling me

  59. UPYA says:

    does anyone else feel like they have something wrong with them after watching this guys brain work while he teaches? OMG is he ALWAYS LIKE THAT??? WHHAAAT!?
    i luv him but 🙂

  60. Yu ZHAO says:

    Such a good tutorial. Clear and with passion.

  61. SpaceScienceGaming &More says:

    It didn’t work for me so can you help how to fix it in a Nother video (or a reply)

  62. Arman Kehlhofer says:

    i absolutely love these tutorials and the way you teach.

  63. ramin alikhani says:

    Well, before we define these functions we had some chunk of working code in previous videos. How come it did work?! I'm confused someone explain please.

  64. shamim Al Mahmud says:

    what is rectmode?

  65. Daniel Watson says:

    freeSpirit() {
    sytemAutoFormat = false
    if sytemAutoFormat = false
    print("Enjoy yourself)

  66. Esat Yaman says:

    Which language is this

  67. ZJ GameDev says:


  68. yash shah says:

    so where where how can i see this method defination i cant find defination of setup() and draw() ?

Leave a Reply

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