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.
Use the online version by adding the following line to your HTML document:
<script src="https://unpkg.com/p5.rotate-about"></script>
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>
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).
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);
}
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));
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.
Report bugs, features requests, and suggestions here
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.
MIT