# Drawing in Processing

Let there be line!

`line(10, 10, 40, 60);`

Run, commands, syntax, parameters / arguments, typography, non alphanumeric characters, parenthesis vs. brackets, semicolon, coordinates…

Canvas

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

2D Primitives

```point(300, 300); triangle(10, 20, 50, 200, 200, 100);```

Make it isosceles!
Make it rectangle!

`quad(10, 10, 120, 20, 100, 150, 10, 100);`

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 /* Because they make you 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);```

Pixelated line: ugly

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

Antialias: pretty

Pen state

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

Transparency

```size(500,500); background (255, 255, 255); smooth(); noStroke(); fill(255,0,0); rect(100, 100, 100, 100); fill(0,0,255,127); //255/2 rect(150, 150, 100, 100);```

Also known as alpha channel.

Drawing mode
Sometimes you want to draw a circle from the top left corner or a square from the center. Here’s how to do it:

```size(500,500); rectMode(CENTER); rect(35, 35, 50, 50); rectMode(CORNER); fill(102); rect(35, 35, 50, 50);```
```size(500,500); ellipseMode(CENTER); ellipse(35, 35, 50, 50); ellipseMode(CORNER); fill(102); ellipse(35, 35, 50, 50);```

Vertex
You can use this combo to draw any polygon specifying the vertexes.

```size(500,500); //remember to specify a noFill() if you don't want a fill beginShape(); vertex(20, 20); vertex(40, 20); vertex(40, 40); vertex(60, 40); vertex(60, 60); vertex(20, 60); endShape(CLOSE); //if you don't specify CLOSE the outline will left open```

Curves
curveVertex is the easiest way to draw continuous curves. It works like vertex (begin, points, end).

```noFill(); beginShape(); curveVertex(84, 91); curveVertex(84, 91); curveVertex(68, 19); curveVertex(21, 17); curveVertex(32, 100); curveVertex(32, 100); endShape();```

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. PI/2 a quarter etc…

Or just use radians(angleindegrees); to convert:

`arc(150, 150, 300, 300, radians(180), radians(360) );`

Draw a pacman!
Draw a smiley face!

Posted in