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

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!

### 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 openprocessing.org 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 OpenProcessing.org 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);
textFont(createFont("SansSerif",18));
textAlign(CENTER);
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”
• 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.