2.1: How to use Processing – Processing Tutorial

2.1: How to use Processing – Processing Tutorial


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

90 thoughts to “2.1: How to use Processing – Processing Tutorial”

  1. Thanks for your videos, they are very helpful. I've a doubt, how can I change the colour of the text? Thanks.

  2. I have a question (another one :P), is it possible to copy-paste a Processing-scrypt (code, algorithm, whatever) into like a java editor and run it?

  3. I've been wanting to learn programming for a long time since I love computer and all that stuff, but the tutorial videos were always so boring and they talk to you like you're a complete idiot. But your videos are really good and especially efficient, I watch them without feeling like I'm doing some homework. You're awesome man, keep up the good work!

  4. You could write program for arduino, using 2 motion sensors, to switch between cameras, when you are moving.
    Greetings from Poland 😉

  5. when I download libraries, will they be available on all accounts on my mac?
    i hope not.. because it felt like they slowed down the machine ("kinect hack" for example)

  6. I'm not usually one to comment on videos. However, your teaching is amazing and I want to thank you for making these videos! 🙂

  7. LOVE the enthusiasm!!! I couldn't have picked a better teacher to teach me this stuff. I hope I get a guy like you for a professor in college in about 5 years…

  8. size (640, 480);

    //eyes
    ellipse(150,50,100,100);
    ellipse(300,50,100,100);

    //eyeballs
    ellipse(150,75,25,25);
    ellipse(300,75,25,25);
    point(150,80);
    point(300,80);

    //mouth
    line(150,150,150,250);
    line(150,250,300,250);
    line(300,250,300,150);
    line(300,150,150,150);

    //Upper teeth
    rect(150,150,50,50);
    rect(200,150,50,50);
    rect(250,150,50,50);

  9. When will Processing start supporting Java lambda expressions?
    Since the Processing code just gets wrapped inside a Java class it seems to be easily possible, but Processing gives error.

    By the way, thanks for this amazing software "Processing" and these amazing videos to teach it !

  10. Why would I use this? I am genuinely not trying to sound like an ass. I would like a solid reason for using this over another IDE.

  11. jul 14,2015 oh man!! am i too LATE for this, already been two years old!! i like the way to talk , it makes programming so fun……

  12. Your lessons are really clear and easy to understand and I think you should make all the tutorials in the world.

  13. I can say that it is the excited tutorial that I have never watched before, you always make me laugh, Brother 😀

  14. Yaayyy, i've made this "form" in processing. Thank you! I love your videos!!!
    https://s26.postimg.org/9tpk0szk9/asd.jpg

  15. Run this in your processing and it will give you a giggle.( ͡° ͜ʖ ͡°)
    size (800, 600);
    ellipse (200, 200, 200, 200);
    ellipse (200, 400, 200, 200);
    rect (300, 200, 400, 200, 0, 50, 50, 0);

  16. Just started a beginner programming night course using Processing. And found this. This is fantastic! I've learned far more using the vids. Thank you, Dan!

  17. Hello Sir,
    I want to crop a small part of image in video live in Qt . Please can you explain ma how I crop those image and save it

  18. Omg, hahah, you're just the best Youtuber I've seen 😛 You're very funny and you are teaching perfectly!! I understand everything that you say and can apply what I've learned directly in Processing after watching. Everyone needs to do videos like you do 🙂

  19. You think you are not fun, you are a funny teacher. I wish you could teach at my school. Shout out from Honduras. #FueraJoh

  20. Excuse me but I believe you said and I qoute "Do you want to make somthing with out using someone elses work? Well you came to the right place(okay I might made it sound better and more smooth but it is basicly the samthing)" And now you want us to download something hmm.. I don't see how thinges are adding up..

  21. There is something really speacil about your videos, especially the way you teach, you make it in a funny way that a move or a word you say sticks to my head, i really admire your efforts you make for us to pride a decent learning material, and i am really a very beginner in programming, but actully with your videos, you are a great help and resource as well. keep up the good work buddy!!

  22. i love this video, looking to do some light hearted programming after my computer science gcse and this was the perfect spingboard into that for me! thanks!

  23. I've been using these videos to help me understand Processing for my digital arts class and they have been SOOOOOOO helpful. Thank you so much you wonderful human being!!!!

  24. I don't care what haters say, seeing the dislikes(they are just people with real problems) this by far the most interesting teaching code style , I've ever seen, so authentic and focused,

  25. I am new to Java, from other tutorials that teach Java, they usually start with object oriented concept such as creating classes and objects, and with curly brackets. Does processing somehow take away those things?

  26. You are great and your spontaneity is very charming… I am having fun to learn coding in Processing with you while I am also learning Computing Sciences on a online university… it has been great for my understanding… thank you for your videos!

  27. The energy and goofiness is fun and engaging but it's a little too much sometimes! I would suggest rehearsing them once so they are slightly more polished. Or things like…if you drop a pen cap or the camera doesn't switch for a while, you don't need to always explain what happened and go off on a tangent about editing the videos. It brings the attention out of the subject too much, just keep going. We clearly understand by now that these aren't super hi-fi videos.

  28. Do you have any idea how processing can take serial data from arduino to plot a 2D map on a PC after a robot goes through a real 3D maze?? Help would be appreciated, it's a school project

  29. ER MAH GHAD
    I made a line I this is awesome but no joke I love your videos and I'm gonna try not to give out midway

  30. I ran with that line() function and drew a triangle guys! I'm a freaking genius 😂. Honestly, the cool part was how I clicked the Processing app and IT JUST WORKED. That's the pitch for it. Awesome video as usual, kind sir!

  31. I’m still planning on going through every video on this channel loosely. And I’m kind of set up to start at the nature of code section given my programming experience if I wanted to I could start closer to the end. But it’s really just fun watching you struggle from the very beginning and slowly succeed more and more in teaching the content. It’s satisfying haha. Great ENTP teacher.

  32. As a non-nerd, I just spent the past year and about $45K in my first year of a Computer Science degree program. Yet, here I am, in the summer, watching these videos. Quality stuff.

  33. thank you thank you thank you thank you thank you thank you (these videos are exactly what i've been looking for, for years now). Was getting to the point where even one more video of somone talking in monotone voice about the "magic of coding" was making me very depressed (not to mention books on api commands). Your clear enthusiasm for explaining these concepts with a white board has actually woken up something in my brain and i feel like i'm actually taking things in that have been missing for a while now.

Leave a Reply

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