# Processing Documentation

## Processing Documentation

### Shapes

#### Rectangles

```// Draws a rectangle with the top left at (x, y)
rect(x, y, width, height);
```

#### Ellipses and Circles

```// Draws an ellipse
// `x` is the coordinate of the left side
// `y` is the coordinate of the top side
ellipse(x, y, width, height);

// To draw a circle, just make width and height
// the same value, which is the diameter
ellipse(x, y, diameter, diameter)
```

#### Lines

```// Draws a line from (x1, y1) to (x2, y2)
line(x1, y1, x2, y2);
```

#### Text

```// Set the font for the next text you draw
textFont(fontName);

// Set the font size for the next text you draw
textSize(size);

// Draws "Hello" on the screen at (x, y)
text("Hello", x, y);
```

#### Points

```// Draws a point at the given coordinates
point(x, y);
```

#### Triangles

```// Draws a triangle
// You must pass 3 coordinates for each point
triangle(x1, y1, x2, y2, x3, y3);
```

### Color

#### Fill Colors

```// Set the whole background color with the given
// red, green, blue values (r, g, b)
background(r, g, b);
```
```// Set the fill color for the next shape you draw
// with the given red, green, blue values (r, g, b)
fill(r, g, b);
```
```// Remove the fill color for the next shape you draw
noFill(r, g, b);
```

#### Outline Colors

```// Set the outline color for the next shape you draw
// with the given red, green, blue values (r, g, b)
stroke(r, g, b);
```
```// Remove the outline for the next shape you draw
noStroke(r, g, b);
```

### Animation

```// Defining the `draw` function like this will
// run the code inside the function repeatedly
draw = function() {
// Your code here will repeat
}
```

### Interaction

#### Mouse

```// current x-coordinate of the mouse
mouseX

// current y-coordinate of the mouse
mouseY

// Draw a 10x10 square where the mouse is
rect(mouseX, mouseY, 10, 10)
```
```// Handle mouse events
// Define one of these functions

mouseClicked = function() {
// Code here runs when the mouse is clicked
// (This is a full click when you release the button)
}

mousePressed = function() {
// Code here runs when the mouse is pressed
// This is before your hand lifts up off the button
}

mouseReleased = function() {
// Code here runs when the mouse is released
// This is when your hand lifts up off the button
}

mouseMoved = function() {
// Code here runs when the mouse is moved
}

mouseDragged = function() {
// Code here runs when the mouse is dragged
}
```

#### Keyboard

```// Value for which key is being pressed right now
key
key.toString() // Returns a string with the value of the key
key.code // Returns the numeric key code

// Boolean for whether any key is currently being pressed
keyIsPressed

// Example
if (keyIsPressed) {
// Do something because a key is being pressed
}
```
```// Handle keyboard events
// Define one of these functions

keyPressed = function() {
// Code here runs when the key is pressed
// (This is a when you first touch the key)
}

keyReleased = function() {
// Code here runs when the key is released
// (This is when you release your finger from the key)
}
```

### Numbers

#### Canvas

```// Get the width of the screen
width

// Get the height of the screen
height

// Draw an ellipse that's the half the width
// and half the height of the screen
ellipse(0, 0, width / 2, height / 2);
```

#### Random

```// Get a random number between 0 and `num`
random(num);

// Get a random x coordinate on the screen
var x = random(width)

// Get a random y coordinate on the screen
var y = random(height)

// Draw a circle with diameter 10 at that random spot
ellipse(x, y, 10, 10)

// Set the background to a random color
// Each r/g/b value can go up to 255
background(random(255), random(255), random(255))
```