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

    Install

    npm i p5.rotate-about

    DownloadsWeekly Downloads

    1

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    6.93 kB

    Total Files

    5

    Last publish

    Collaborators

    • osteele