O'Reilly logo

Make: Getting Started with p5.js by Ben Fry, Casey Reas, Lauren McCarthy

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 6. Translate, Rotate, Scale

An alternative technique for positioning and moving things on screen is to change the screen coordinate system. For example, you can move a shape 50 pixels to the right, or you can move the location of coordinate (0,0) 50 pixels to the right—the visual result on screen is the same.

By modifying the default coordinate system, we can create different transformations including translationrotation, and scaling.

Translate

Working with transformations can be tricky, but the translate() function is the most straightforward, so we’ll start with that. As Figure 6-1 shows, this function can shift the coordinate system left, right, up, and down.

Figure 6-1. Translating the coordinates

Example 6-1: Translating Location ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required