Lecture 02

Processing: 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.

Canvas

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

2D Primitives

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

Quadrilateral

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

Rectangle

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

Ellipse

ellipse (300, 200, 300, 200);

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

Comments

//why comments
/*
Because they make your code readable.
(O_o)
*/

Attributes

strokeWeight(4);

“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);
smooth();
line(10, 10, 360, 50);

Antialiased: pretty

size(500, 500);
background (255, 255, 255);
smooth();
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.

Colors

//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!

...
strokeWeight(4);
stroke(255, 0, 0);
//noStroke();
fill(0, 255, 0);
//noFill()
triangle(10, 20, 50, 200, 200, 100);

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

 

Transparency

size(500,500);
background (255, 255, 255);
smooth();
noStroke();
fill(255,0,0);
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.

Arcs

size(500,500);
background (255, 255, 255);
smooth();
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!
Posted in