p5.rotate-about

p5.rotate-about is a p5.js library that adds rotateAbout() and scaleAbout() functions.

Whereas the p5.js rotate() function rotates around the origin, rotateAbout() takes additional x and y arguments (or an additional p5.Vector argument) that specify the center of rotation.

A short example:

// This sketch draws a rectangle that spins around the center of the canvas.
function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
}

function draw() {
  background(220, 20);
  rotateAbout(frameCount, 200, 200);
  rect(100, 100, 20, 30);
}

(You can run this canvas and browse additional examples here.)

Note: rotateAbout() is a very short, simple function. (See the final installation option, below.) This library is most useful when there is a way to include it automatically, or when you want to keep each sketch as short as possible, for example for pedagogical purposes.

Installation Options

Option 1: Using a CDN

Use the online version by adding the following line to your HTML document:

<script src="https://unpkg.com/p5.rotate-about"></script>

Option 2: Downloading the library file

Alternatively, download p5.rotateAbout.min.js from this repository. Include it in your HTML document by adding this line, after the line that includes p5.js or p5.min.js:

<script src="p5.rotateAbout.min.js"></script>

Option 3: Using the p5-server CLI or Visual Studio Code extension

The p5-server command-line tool, and the P5 Server Visual Studio Code Extension, will each infer this library from the presence of call to rotateAbout() or scaleAbout() in a JavaScript-only sketch (a sketch without an HTML file).

Option 4: Skip the library – simply copy rotateAbout() into your sketch

A minimal implementation of rotateAbout() – that doesn't work in p5 instance mode and doesn't accept instances of p5.Vector – is very simple. Just add the following function to your sketch:

function rotateAbout(x, y, angle) {
  translate(x, y);
  rotate(angle);
  translate(-x, -y);
}

Reference

rotateAbout()

rotateAbout(angle, 100, 200);

is equivalent to:

translate(100, 200);
rotate(angle);
translate(-100, -200);

It can also be used with a vector:

rotateAbout(angle, createVector(100, 200));

scaleAbout()

rotateAbout(2, 3, 100, 200);

is equivalent to:

translate(100, 200);
rotate(2, 3);
translate(-100, -200);

Unlike scale(), both the x and y values must be supplied to scaleAbout(). scaleAbout(2, 100, 200) does not work a shortcut for scaleAbout(2, 2, 100, 200). This may be fixed before version 1.0 is released.

Keeping in Touch

Report bugs, features requests, and suggestions here, or message me on Twitter.

Follow @osteele on Twitter for updates.

Other Work

p5.js Libraries lists my other p5.js libraries.

https://code.osteele.com lists my other p5.js projects. These include tools, libraries, and examples and educational materials.

License

MIT