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 thoughts on “1.1: Drawing with Pixels – Processing Tutorial

  1. This is really fun. I'm writing a program that will have a bunch of orbital mechanics calculators and then I can select few one of the calc and use it for kerbal space program

  2. Currently studying media engineering and we are learning to program using Processing. I haven't been into programming before and some of your videos really helped me out, so I'm going to watch this whole series now. Keep up the good work m8.

  3. Hi Daniel, I appreciate all your tutorials. I have a question about the drawing with pixels. Right now I focus on a project about mean curvature. If I set the start-points and end-point, also I will use line or vertex function(). Is there any function or method that I could draw the line and get all the coordinates where the line passes? Thank you very much.

  4. Hey , French guy here !
    I just came here with my bad english to say that yours videos are amazing , keep it up and thank you !

  5. that feeling when one of your colleagues does a study on your social awkwardness… lol im going for it, gonna watch all the series. ive decided after 43 years on earth my old man hobby is going to be data-science. i can build a house, but now i need to learn to code the blueprint program so to speak. ty for your enthusiasm dan

  6. I remember the old days when we had to draw the line ourselves; calculate the X difference and Y difference, and take the larger absolute value; use that axis as your main loop (X for example) and then calculate the corresponding value using the differences and the loop value. (And then sometimes you had to figure out how to "set" that actual pixel, which might involve figuring out which bit in a byte array to set) – Hurray for high level languages of today!

  7. enjoyed your livestream earlier today dealing with the islamic tiling design. ive challenged myself with watching every video you've ever made 😀 wish me luck

  8. Your energy: 100/100!!!
    You make me laugh and I learn at the same time! I have to do a homework and until I watch this video, I really did know where to start!
    Thank you so much!

  9. ughh dani i cant find that one video i remember watching where you drawed a point in a pixel in a sort of for loop way i tried making it from scratch and im not getting the reulst i wanted nor the results i thought i remember watching and i thought it was this video but is not.

    this is what i tried "dont laugh" lol

    float x = 0;
    float y = 0;

    void setup() {
    size(500, 500);
    x = width * 0.5;
    y = height * 0.5;
    }

    void draw() {
    background(0);
    for (x = 0; x*y < width; x++);
    {
    point(x, y);
    fill(255);
    }
    }

  10. hey, i wanted to make something in processing that chooses a random pixel on a picture and when i click on the picture it reveals where the random pixel was so i can see how close i came to guessing its location

  11. Such good teachers are quite rarely! Respect for your work, I see that you enjoy what you're doing and that's the most important factor to please your audience.

  12. Hey Dan, just wanted to sincerely thank you for these videos. I started in p5js and now am moving over to Processing to work with microcontrollers. Could not have made it this far without your assistance!

  13. man you are awesome. I just found interest in learning programming and I'm just sitting here smiling waiting to achieve drawing a simple line in code lol. thank you for your videos! I definitely enjoy them!

  14. Hey, i'm using a 3840×2160 display and processing is just too small, i can't see anything unless i stick my face in the screen :3 I've searched for solutions everywhere but noone seems to know how to solve this issue. Can you please help?

  15. If i have a window width of 640, my highest pixel x value would be 639, so shouldnt there be no exact center?

    the edge between 319 and 320 would be "deadcenter" sou how do we cope with that

  16. It's been a year since I started coding with Processing and you've been an amazing inspiration. Whenever I watch your videos I look forward to your hilarious rants. 😛

  17. Great video. A quick question. I am using processing in java program. Does processing draw ellipses, points, and etc. from double values?

  18. Daniel you are so fun to watch 😂😂. That moment when you said you forgot the camera was there "hello" was so hilarious. Don't worry I have been watching your series in full length when I knew nothing about processing. I didn't even think processing was a thing until I watched your video about node.js and twit. I then I installed both and stated playing around with processing.
    We will learn processing in second year anyway along with java but here I am learning in advance 😎😂.thanks buddy

  19. This guy constantly looks like someone behind the camera is making funny faces at him and he is trying to hold his laughter in.

  20. Your channel is reason why I love the internet. Even far away I can enjoy a truly passionate person sharing his knowledge and it's open source! Let's make internet great again and thanks for all your work!

  21. Dont worry if it takes too lobg because since you were very hype when explaining things, it was easier to understand. Great Job!

  22. Normally I'm unconscious about 5 minutes into any tutorial. Thanks for keeping me awake and paying attention. The only thing missing from your presentation is a means to occasionally slap the viewer in the face or at least throw a glass of cold water into their face. These highly physical gestures will have to do until the technology becomes available. You are definitely on to something here with your style.

  23. This is my tutorial(unfinished):https://www.khanacademy.org/computer-programming/intro-to-programming-in-khanacademy-languagenot-processingjs/4884990820024320

  24. i had no interest in learning this langage, i m here by pure coincidence…and after a few videos i m still here with an open screen of processing on my laptop trying to draw some nonsence..DAAMN ure good sir..

    Thanks for the great tutos 😉

  25. just asking, the very first pixel in the top left, isn't it 0,0 then if the screen is 640 wide, shouldn't it go from 0 to 639?, and the 'middle' would be then at "319.5" ?:P

    (I know there is no 0.5 pixel step, but theoretically 320 is not the middle but a half pixel distance left from the middle)?:D

  26. "Thank You", thank you very much. I "TOTALLY" understood EVERYTHING you said. You might want to consider teaching other CS instructors, who are very dry in their presentations, your methods…

  27. size(640,360);
    line(200,180,300,120);
    line(400,120,500,180);
    line(270,180,300,180);
    line(400,180,430,180);
    line(335,240,365,240);
    line(250,320,450,320);

  28. 'Yeah I know you whatched what like five videos already and some people probably already understand what processing is for but I felt like peving those guys off a little but thats in the past this is now the first video(1.1st actully I do not know how to say that as a word nor spell it so sorry people with ocd)' – said by Dan (may or may not be tweaked slightly(if it is it still has true infomation.).

  29. No way your going to start with a line wich is used to make ever shape known to humanity before you go into shapes known to humanity what?

  30. Thank you so much!!!! It's just priceless and amazing to have such a good free content with my first language subtitles (pt-br)

Leave a Reply

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