Putting the Fun in Function

So far, we've seen a bunch of drawing functions and stuff about randomness. Processing (and Java itself!) come with quite a lot of other functions that may be interesting for your projects!

Most of these are specific to Processing, but you will find functions like these in all programming languages.

Rounding Numbers

Processing knows different types of rounding. The most common one is round(), which works by the same rules you know from school (numbers < 0.5 round down; numbers >= 0.5 round up). Other than that you can also choose to round up with ceil() or down with floor().

min/max

If you need the smallest of a bunch of numbers, you can use min(). For the largest of a bunch of numbers, use max(). Both take up to three parameters, and they will return you back the smallest or largest of them. While that sounds pretty boring, it does have a very immediate application:

void setup() {
    size(500, 100);
}

void draw() {
    background(230);
    float cannotUnderflow = max(50, mouseX);
    float cannotOverflow = min(width - 50, mouseX);

    circle(cannotUnderflow, 25, 40);
    circle(mouseX, 50, 40);
    circle(cannotOverflow, 75, 40);
}

While you could do the same with an if-statement, this one is shorter and conveys what it does more succinctly.

Tip

Slightly odd quirk: if you need a lower bound, you use max(). If you need an upper bound, you use min(). That is unintuitive by name, but once you think about it, it makes total sense. max() returns the largest number, so as long as your "over" your lower boundary, it will choose that number. Only once your input goes below the boundary, will it return the boundary.

Map: Convenient Way of Scaling

Map can take one set of numbers and map them to a different set of numbers. Imagine you want to draw a thermometer, and it measures values from -20°C to 65°C. But your screen has pixels, not °C, so you want to draw the bar in a height of pixels from 400 (lower end of your thermometer) to 50 (upper end of your thermometer). One way of calculating this would be a simple linear equation, but you could also use map()!

void setup() {
    size(100, 450);
}

void draw() {
    // don't worry too much about this, this just gets us
    // a value between 15 and 25.
    float temperature = sin(float(millis())/1000.0) * 10 + 15;

    // here we convert that value to pixels
    float pixelHeight = map(temperature,  -20, 65,  400, 50);

    background(230);
    strokeWeight(15);
    stroke(255, 255, 255);
    fill(255, 255, 255);
    line(50, 400, 50, 50);
    circle(50, 400, 20);

    strokeWeight(10);
    stroke(255, 0, 0);
    fill(255, 0, 0);
    circle(50, 400, 15);
    line(50, 400, 50, pixelHeight);
    text(temperature+"°C", 60, pixelHeight);
}

Trigonometry: Sine, Cosine and Friends

Your Asteroids clone absolutely needs trigonometry. Trigonometry is more fun when the calculations are automated and running at 60fps!

angles in radians!

Since these are all about angles, I would like to remind you that angles in most programming languages are in radians, not degrees. Refer to the section about radians.

From school, you will still know sin() and cos(). If you have an angle in radians, these can give you the components along the x and y axis as they would appear on a unit-circle. There are many many more functions in the Trigonometry Category, but I just want to highlight one more, which probably didn't come up in math class: atan2(). atan2() is special, because it can give you an angle based off of x and y coordinates. Please note that the parameters on this one are atan2(y, x)¹ - y first and then x.

float spaceShipX = 100; // no, not gonna write spaceX
float spaceShipY = 150;

void setup() {
  size(200, 300);
}

void spaceShip(float x, float y, float angle) {
    push();
    translate(x, y);
    rotate(angle);
    beginShape();
    vertex(20, 0);
    vertex(-16, -10);
    vertex(-10, 0);
    vertex(-16, 10);
    endShape(CLOSE);
    pop();
}

void draw() {
    float deltaX = mouseX - spaceShipX;
    float deltaY = mouseY - spaceShipY;
    float heading = atan2(deltaY, deltaX);
    background(0);
    spaceShip(spaceShipX, spaceShipY, heading);
}

Assignment: Have fun with your portrait's eyes

Modify your portrait assignment. Its eyes should now follow the mouse pointer. This can be done in a number of ways, but sin()/cos() are a great way to do this.

Also, the eyes should close when you click the mouse.

(this is a very animated version of the result, it does not need to be this fancy.)

Assignment: Refine your Animations

Some of the functions above could enhance your animations assignment. sin() and cos() are interesting choices for smooth animations. noise() is also very interesting to use.

---

1. this stems from its root in math, and its relationship with the arctangent. ↩