Understanding Transformations in p5.js

Note: this page has been created with the use of AI. Please take caution, and note that the content of this page does not necessarily reflect the opinion of Cratecode.

If you're looking to create mesmerizing generative art, you'll want to dive headfirst into the world of transformations in p5.js. Transformations allow you to manipulate shapes and objects on the canvas in various ways, such as translating, rotating, and scaling. In this article, we'll explore these transformation functions and demonstrate how you can use them to level up your generative art game.

What Are Transformations?

In the realm of p5.js, transformations are functions that modify the position, rotation, or size of your canvas elements. They essentially act as a set of instructions for the renderer to follow when drawing your shapes and objects. Transformations are handy when you want to create complex, dynamic visuals without needing to manually calculate every single coordinate or angle.

Types of Transformations

There are three primary types of transformations in p5.js:

1. Translate: This function shifts the origin point (0, 0) of the canvas to a new location. It's useful when you want to move an entire group of objects or change the center point of your canvas.
2. Rotate: The rotate function spins your entire canvas around the origin point by a specified angle (in radians). This is helpful when you want to create rotating visuals or manipulate objects around a central point.
3. Scale: Lastly, the scale function resizes your canvas elements by a given factor, either uniformly or non-uniformly. This is great for creating zooming effects, modifying object sizes, or generating perspective illusions.

Using Transformations in p5.js

Now that we know what transformations are and their different types, let's see how to use them in a p5.js sketch.

Translate

The translate() function in p5.js moves the origin point of the canvas to a new location. It accepts two arguments, x and y, which define the new origin point.

function draw() {
    background(255);
    
    translate(100, 100);
    rect(0, 0, 50, 50);
}

In this example, we translate the origin point to (100, 100), and then draw a rectangle. The rectangle's top-left corner is now at the new origin point, (100, 100).

Rotate

The rotate() function in p5.js rotates the entire canvas around the origin point by a specified angle, given in radians. To convert degrees to radians, you can use the radians() function.

function draw() {
    background(255);
    
    translate(100, 100);
    rotate(radians(45));
    rect(0, 0, 50, 50);
}

In this example, we first translate the origin point and then rotate the canvas by 45 degrees. The rectangle we draw will be rotated by 45 degrees around the new origin point (100, 100).

Scale

The scale() function in p5.js resizes your canvas elements by a given factor. You can provide one or two arguments to scale uniformly or non-uniformly, respectively.

function draw() {
    background(255);
    
    translate(100, 100);
    scale(2);
    rect(0, 0, 50, 50);
}

In this example, we first translate the origin point and then scale the canvas by a factor of 2. The rectangle we draw will be twice its original size, having its top-left corner at the new origin point (100, 100).

Combining Transformations

By combining these transformation functions, you can create intricate and mesmerizing generative art. Remember that the order in which you apply transformations matters, as they build upon each other.

function draw() {
    background(255);
    
    translate(width / 2, height / 2);
    rotate(frameCount * 0.01);
    scale(1 + sin(frameCount * 0.05) * 0.5);
    rect(-25, -25, 50, 50);
}

In this example, we translate the origin point to the center of the canvas, rotate it based on the frame count, and scale it using a sine wave. This creates a captivating spinning and pulsating square animation.

By mastering transformations in p5.js, you'll be well on your way to creating stunning generative art that mesmerizes and engages audiences. Happy coding!