Static Drawing

Lesson — golan @ 6:49 am

Day Two: Let there be line!

line(10, 10, 40, 60);

For discussion:

  • Running a program; the empty program;
  • commands, syntax, parameters (arguments);
  • the importance of non-alphanumeric characters: parenthesis vs. brackets, commas, semicolon;
  • coordinate system
  • code typography; whitespace-insensitivity.


size(500, 500);
background (255, 255, 255);

2D Primitives

point (300, 300);
triangle (10, 20, 50, 200, 200, 100);
  • Make it isosceles!


quad (10, 10, 120, 20, 100, 150, 10, 100);
  • Make it rectangular!
  • Make a square!
  • Make a butterfly!


rect (100, 100, 200, 100);
  • Make a square!
  • Center it!


ellipse (300, 200, 300, 200);

How does it work? Check the Processing reference manual
Inscribe the circle in the canvas!


//why comments
Because they make your code readable.



“camelBack” convention. keepItInMind.
Processing is case sensitive;  strokeWeight and strokeweight are not the same.

size(500, 500);
background (255, 255, 255);
line(10, 10, 360, 50);

Pen state

Pixelated line: ugly

size(500, 500);
background (255, 255, 255);
line(10, 10, 360, 50);

Antialiased: pretty

size(500, 500);
background (255, 255, 255);
line(10, 10, 360, 50);
stroke(255, 0, 0);
line(10, 30, 360, 70);

The state of your pen and your canvas remains the same until you change it.
If you don’t touch it, Processing uses the default.


//try this
background (255, 255, 255);
//and then try this
//background (0, 0, 0);

Red green blue 0-255.
Make it red!
Try the color picker!

stroke(255, 0, 0);
fill(0, 255, 0);
triangle(10, 20, 50, 200, 200, 100);

Ok, you are an Artist now. Reproduce the Mondrian! Go!



background (255, 255, 255);
rect(100, 100, 100, 100);
fill(0,0,255,127); // try changing the '127'
rect(150, 150, 100, 100);

Transparency is also known as the alpha channel.


background (255, 255, 255);
fill(142, 199, 242);
arc(150, 150, 300, 300, 0, PI/2);

The beginning and the end are a little tricky.
Remember: 0 is center right, 2*PI is the full circle. PI half circle. HALF_PI a quarter-circle etc…

  • Draw a pacman!
  • Draw a smiley face!

Assignment: Project 01:

Draw a face using at least 10 graphic elements.  Experiment with the use of at least 2 colors in addition to the background. When you are done, post it to our OpenProcessing classroom assignment, Project 01 [Face].
Bonus: Try to use curves.

Hello Processing

Lesson — golan @ 6:32 am

For the first part of this course we are going to use Processing and the website to publish our sketches.
Let’s test the workflow:

  • Go to OpenProcessing and register, possibly using your real name or something similar so I know who you are.
  • Bookmark and our class page.
  • Processing is already installed on the CMU macs; you can find it in the Applications folder. But in case you need to install it on your laptop at home, download the (free!) Processing Integrated Development Environment (IDE) from here and install it.
  • In the Processing code editor, write a simple “hello world” sketch like this one:
size(200, 200);
background(0, 0, 0);
fill(255, 255, 255);
text("Hello World!", width/2, height/2);

Feel free to modify it.

  • Save the sketch on your computer. It gets saved as a “Sketch” in your “Sketchbook”, a collection of Processing programs kept in your “My Documents” folder.
  • To publish it on OpenProcessing, log in, go to your personal page and click “create new sketch”
  • At this point you may see a random example. Just delete all the code and paste your program.
  • Test it by clicking run (little triangle).
  • Give it a proper name (right panel) and save it
  • Go to our OpenProcessing class page and click “submit a sketch from your portfolio”
  • Click on “Click here to submit this sketch”
  • Drag-and-drop your “hello_world” sketch to the “Assignment 0: Hello World” collection. To drag and drop you have to click on the small icon the bottom right of your sketch’s thumbnail.
  • That’s it! your item will appear in the collection once I approve it.

Hello Blog!

Lesson — golan @ 6:15 pm

Hi students! Let’s try this blog.

  1. Bookmark this page.
  2. Login here . Your user name is yourfirstname_yourlastname.
  3. Once you are logged in, come back to this page and post a comment in which you briefly introduce yourself.
  4. I may need to approve your comment before you can see it.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
(c) 2019 CMU Electronic Media Studio II, Fall 2011, Section A | powered by WordPress with Barecity