1.1: Drawing with Pixels – Processing Tutorial

This video covers the basics of a computer graphics coordinate system and how to write your first lines to code to draw into a Processing window.

Support this channel on Patreon:


Send me your questions and coding challenges!:

Link to code on Github:

Processing Foundation:
Learning Processing Book:

For More Processing Tutorials:






40 responses to “1.1: Drawing with Pixels – Processing Tutorial”

  1. Mukesh Aryal Avatar

    hey where is episode 1.2?????????????????????????????????????

  2. Aashika Bhat Avatar

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

  3. TeknoSwift Avatar

    wow it was way easier than i thought

  4. TeknoSwift Avatar

    i just understood the whole thing without watching the video, you make it too long

  5. Fabio Catapano Avatar

    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!

  6. rahmspinat Avatar

    you're an awesome teacher!

  7. robinhoodG Avatar

    the next video is 2.1: How to use Processing – Processing Tutorial

  8. Abdullah Ehsan Avatar

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

  9. Udit Adhikari Avatar

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

  10. Anushka Gokhale Avatar

    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. 😛

  11. rohan gosar Avatar

    you are amazing !!!

  12. Tobias Avatar

    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

  13. Barny Avatar

    This guy has the most of the vim in the world. Thanks!

  14. Matthew Palmer Avatar

    actually before the 5 minute

  15. Matthew Palmer Avatar

    Isn't like the Y going down negative, just look at the 5:00 minute mark

  16. AKAD4M Avatar

    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?

  17. Sir Dude Avatar

    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!

  18. Mogwyre Pendelhurst Avatar

    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!

  19. etm erciyes Avatar

    Thank you very much. You are a genius!

  20. Keky Avatar

    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.

  21. Ash W Avatar

    You waved you hands 117 times in the first minute! LoL

  22. Aladdin Zeal Avatar

    thank you so much sir for such a nice tutorials ….

  23. Conorsz Avatar

    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

  24. hhdhwuus Avatar

    this video is really good and well made but the framerate hurts my eyes

  25. 3CPS Avatar

    Hi do you know how to hold on the click on processing?

  26. Frank Lopez Avatar

    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() {
    for (x = 0; x*y < width; x++);
    point(x, y);

  27. liberty sone Avatar

    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!

  28. Chris Cerrachio Avatar

    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

  29. CozmoVortex Gaming Avatar

    the first line of code is line() xD

  30. David Kostadinov Avatar

    Thank you a lot man, you're a lifesaver

  31. KJ Always Avatar

    You are fun to watch!

  32. Will Cavalcanti Avatar

    no more videos on this playlist?

  33. chris perkins Avatar

    thanks for the tutorial…greatly appreciated!

  34. CDArena Avatar

    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!

Leave a Reply

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