p5.rotate-about

0.1.1 • Public • Published

p5.rotate-about

npm version

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.

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).

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

Package Sidebar

Install

npm i p5.rotate-about

Weekly Downloads

3

Version

0.1.1

License

MIT

Unpacked Size

6.93 kB

Total Files

5

Last publish

Collaborators

  • osteele