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

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

```//why comments
/*
(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