npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bitshadowmachine

v3.0.7

Published

Bit-Shadow-Machine renders particles in a web browser using CSS box shadows.

Downloads

11

Readme

Bit-Shadow Machine: A JavaScript framework for creating particle and frame-based animation.

Bit-Shadow Machine renders particles in a web browser using CSS box shadows. That's it. No HTML5 Canvas, WebGL or even a single DOM element.

By default, the box shadows are attached to your document's body. Freed from parsing the render tree, the browser can animate many more particles than with conventional methods. You should be able to easily render several hundred particles at 60 frames per second.

View a demo at http://www.bitshadowmachine.com

Create a Simple System

Think of a Bit-Shadow Machine as a rendering engine. You supply the particles to animate. It takes care of drawing them on screen.

To setup a simple Bit-Shadow Machine, reference bitshadowmachine.min.js and the bitshadowmachine.css from a script tag in the <head> of your document.

In the body, add a <script> tag and create a new Bit-Shadow system. Pass the system a function that adds items to the system.

IMPORTANT: Your items must extend the BitShadowMachine.Item class.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Bit-Shadow Machine</title>
  <link href="css/bitshadowmachine.min.css" type="text/css" charset="utf-8" rel="stylesheet" />
  <script src="scripts/BitShadowMachine.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id='worldA'></div>
    <script type="text/javascript" charset="utf-8">

      function Box(opt_options) {
        var options = opt_options || {};
        options.name = 'Box';
        BitShadowMachine.Item.call(this, options);
      }
      BitShadowMachine.Utils.extend(Box, BitShadowMachine.Item);

      // An init() method is required.
      Box.prototype.init = function(options) {
        this.color = options.color || [100, 100, 100];
        this.location = options.location || new BitShadowMachine.Vector(this.world.width / 2, this.world.height / 2);
      };

      /**
       * Tell BitShadowMachine where to find classes.
       */
      BitShadowMachine.Classes = {
        Box: Box
      };

      /**
       * Create a new BitShadowMachine system.
       */
      BitShadowMachine.System.setup(function() {
        var world = this.add('World', {
          width: 960,
          height: 540,
          resolution: 4,
          el: document.getElementById('worldA'),
          color: [0, 0, 0],
          gravity: new BitShadowMachine.Vector(),
          c: 0
        });

        this.add('Box');
      });
      /**
       * Start the animation loop.
       */
      BitShadowMachine.System.loop();
    </script>
  </body>
</html>

Notice we're defining a Box class that extends BitShadowMachine.Item. The class must also have an init() method to set additional properties.

Loading the above, you should see a white box in the middle of the browser. View it at public/Bit.Box.html.

Animation

Let's make the box move.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Bit-Shadow Machine</title>
  <link href="css/bitshadowmachine.min.css" type="text/css" charset="utf-8" rel="stylesheet" />
  <script src="scripts/BitShadowMachine.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <script type="text/javascript" charset="utf-8">

      function Box(opt_options) {
        var options = opt_options || {};
        options.name = 'Box';
        BitShadowMachine.Item.call(this, options);
      }
      BitShadowMachine.Utils.extend(Box, BitShadowMachine.Item);

      // An init() method is required.
      Box.prototype.init = function(options) {
        this.color = options.color || [100, 100, 100];
        this.location = options.location || new BitShadowMachine.Vector(this.world.width / 2, this.world.height / 2);
        this.acceleration = options.acceleration || new BitShadowMachine.Vector();
        this.velocity = options.velocity || new BitShadowMachine.Vector();
        this.mass = options.mass || 10;
        this.maxSpeed = typeof options.maxSpeed === 'undefined' ? 10 : options.maxSpeed;
        this.minSpeed = options.minSpeed || 0;
        this.bounciness = options.bounciness || 1;
        this._force = new BitShadowMachine.Vector();
      };

      Box.prototype.step = function() {
        if (this.beforeStep) {
          this.beforeStep.call(this);
        }
        this.applyForce(this.world.gravity);
        this.velocity.add(this.acceleration);
        this.velocity.limit(this.maxSpeed, this.minSpeed);
        this.location.add(this.velocity);
        this._checkWorldEdges();
        this.acceleration.mult(0);
      };

      Box.prototype.applyForce = function(force) {
        if (force) {
          this._force.x = force.x;
          this._force.y = force.y;
          this._force.div(this.mass);
          this.acceleration.add(this._force);
          return this.acceleration;
        }
      };

      Box.prototype._checkWorldEdges = function() {
        if (this.location.y > this.world.height) { // bottom
          this.velocity.mult(-this.bounciness);
          this.location.y = this.world.height;
          return;
        }
      };

      /**
       * Tell BitShadowMachine where to find classes.
       */
      BitShadowMachine.Classes = {
        Box: Box
      };

      /**
       * Create a new BitShadowMachine system.
       */
      BitShadowMachine.System.setup(function() {
        var world = this.add('World', {
          resolution: 4,
          color: [0, 0, 0],
          gravity: new BitShadowMachine.Vector(0, 0.1),
          c: 0
        });

        this.add('Box');
      });
      /**
       * Start the animation loop.
       */
      BitShadowMachine.System.loop();
    </script>
  </body>
</html>

The Bit-Shadow Machine system will execute an item's step() method each iteration of the animation loop. In the example above, we've added some additional properties and use them in the step() method to simulate a gravitational force on the box. View it at public/Bit.BoxAnim.html.

Multiple items

Now we'll see the power of the Bit-Shadow Machine. Replace the System.init() call with the following.

BitShadowMachine.System.setup(function() {
  var rand = BitShadowMachine.Utils.getRandomNumber;
  for (var i = 0; i < 500; i++) {
    var scale = rand(0.25, 4, true);
    this.add('Box', {
      location: new BitShadowMachine.Vector(rand(0, world.width),
          rand(0, world.height / 2)),
      opacity: BitShadowMachine.Utils.map(scale, 0.25, 4, 1, 0.25),
      scale: scale,
      mass: BitShadowMachine.Utils.map(scale, 0.25, 4, 10, 15)
    });
  }
});

We're adding 500 items with random scale and random location. We've also inversely mapped scale and opacity so the largest items have the least opacity.

Press 's' on your keyboard. You should see a status menu appear in the top left that indicates the total number of objects and the current frame rate. You should see 501 items (the world counts as an item) and a frame rate close to 60 frames per second.

View it at public/Bit.BoxAnimItems.html.

Blur

Since we're using CSS box-shadows, we can also apply blur to our items. Replace the System.init function with the following.

BitShadowMachine.System.init(function() {
  var rand = BitShadowMachine.Utils.getRandomNumber;
  for (var i = 0; i < 100; i++) {
    var scale = rand(0.25, 4, true);
    this.add('Box', {
      location: new BitShadowMachine.Vector(rand(0, world.width),
          rand(0, world.height / 2)),
      opacity: BitShadowMachine.Utils.map(scale, 0.25, 4, 1, 0.25),
      scale: scale,
      mass: BitShadowMachine.Utils.map(scale, 0.25, 4, 10, 15),
      beforeStep: function() {
        this.blur = BitShadowMachine.Utils.map(this.velocity.mag(), this.minSpeed,
            this.maxSpeed, 0, 50);
      }
    });
  }
});

We've added a function as a beforeStep property that gets called from step(). In beforeStep, we're mapping the magnitude of the item's velocity to its min/max speed and producing a blur value between 0 and 100. Running the code you should see the items blur as they accelerate.

Rendering blur is an intensive operation that requires us to decrease the total number of items to maintain 60fps. View it at public/Bit.BoxAnimItemsBlur.html.

A world

A Bit-Shadow world can be any element that has a box shadow. In the example below, we've placed a <div> in the body and passed it as an 'el' property when adding a new World.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Bit-Shadow Machine</title>
  <link href="css/bitshadowmachine.min.css" type="text/css" charset="utf-8" rel="stylesheet" />
  <script src="scripts/BitShadowMachine.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id='worldA'></div>
    <script type="text/javascript" charset="utf-8">
      function Box(opt_options) {
        var options = opt_options || {};
        options.name = 'Box';
        BitShadowMachine.Item.call(this, options);
      }
      BitShadowMachine.Utils.extend(Box, BitShadowMachine.Item);

      // An init() method is required.
      Box.prototype.init = function(options) {
        this.color = options.color || [100, 100, 100];
        this.location = options.location || new BitShadowMachine.Vector(this.world.width / 2, this.world.height / 2);
      };

      /**
       * Tell BitShadowMachine where to find classes.
       */
      BitShadowMachine.Classes = {
        Box: Box
      };

      /**
       * Create a new BitShadowMachine system.
       */
      BitShadowMachine.System.setup(function() {
        var world = this.add('World', {
          width: 960,
          height: 540,
          resolution: 4,
          el: document.getElementById('worldA'),
          color: [0, 0, 0],
          gravity: new BitShadowMachine.Vector(0, 0.1),
          c: 0
        });

        this.add('Box');
      });
      /**
       * Start the animation loop.
       */
      BitShadowMachine.System.loop();
    </script>
  </body>
</html>

View it at public/Bit.World.html.

Multple worlds

Bit-Shadow Machine can support multiple worlds. Just add them in the setup function.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Bit-Shadow Machine</title>
  <link href="css/bitshadowmachine.min.css" type="text/css" charset="utf-8" rel="stylesheet" />
  <script src="scripts/BitShadowMachine.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id='worldA'></div>
    <div id='worldB'></div>
    <div id='worldC'></div>
    <script type="text/javascript" charset="utf-8">

      var viewportSize = BitShadowMachine.Utils.getWindowSize(),
          rand = BitShadowMachine.Utils.getRandomNumber,
          map = BitShadowMachine.Utils.map;

      function Box(opt_options) {
        console.log(arguments);
        var options = opt_options || {};
        options.name = 'Box';
        BitShadowMachine.Item.call(this, options);
      }
      BitShadowMachine.Utils.extend(Box, BitShadowMachine.Item);

      // An init() method is required.
      Box.prototype.init = function(world, options) {
        console.log(arguments);
        this.color = options.color || [100, 100, 100];
        this.location = options.location || new BitShadowMachine.Vector(world.width / 2, world.height / 2);
      };

      /**
       * Tell BitShadowMachine where to find classes.
       */
      BitShadowMachine.Classes = {
        Box: Box
      };

      /**
       * Create a new BitShadowMachine system.
       */
      BitShadowMachine.System.setup(function() {
        var worldA = this.add('World', {
          width: 320,
          height: 480,
          location: new BitShadowMachine.Vector(0, viewportSize.height / 2 - 240),
          resolution: 4,
          colorMode: 'hsl',
          el: document.getElementById('worldA')
        });

        var worldB = this.add('World', {
          width: 320,
          height: 480,
          resolution: 4,
          colorMode: 'hsl',
          el: document.getElementById('worldB')
        });

        var worldC = this.add('World', {
          width: 320,
          height: 480,
          location: new BitShadowMachine.Vector(viewportSize.width - 320, viewportSize.height / 2 - 240),
          resolution: 4,
          colorMode: 'hsl',
          el: document.getElementById('worldC')
        });

        var i, scale;
        for (i = 0; i < 200; i++) {
          scale = rand(0.25, 2, true);
          this.add('Box', {
            location: new BitShadowMachine.Vector(rand(0, worldA.width), rand(0, worldA.height / 1.2)),
            scale: scale,
            mass: map(scale, 0.25, 2, 10, 20),
            opacity: map(scale, 0.25, 2, 0.8, 0.2),
            color: [0, 1, 0.5]
          }, worldA);
        }
        for (i = 0; i < 200; i++) {
          scale = rand(0.25, 2, true);
          this.add('Box', {
            location: new BitShadowMachine.Vector(rand(0, worldA.width), rand(0, worldA.height / 1.2)),
            scale: scale,
            mass: map(scale, 0.25, 2, 10, 20),
            opacity: map(scale, 0.25, 2, 0.8, 0.2),
            color: [20, 1, 0.5]
          }, worldB);
        }
        for (i = 0; i < 200; i++) {
          scale = rand(0.25, 2, true);
          this.add('Box', {
            location: new BitShadowMachine.Vector(rand(0, worldA.width), rand(0, worldA.height / 1.2)),
            scale: scale,
            mass: map(scale, 0.25, 2, 10, 20),
            opacity: map(scale, 0.25, 2, 0.8, 0.2),
            color: [40, 1, 0.5]
          }, worldC);
        }
      });
      /**
       * Start the animation loop.
       */
      BitShadowMachine.System.loop();
    </script>
  </body>
</html>

You should see three Bit-Shadow worlds each with their own set of animated items. View it at public/Bit.MultipleWorlds.html.

##Docs

To learn more, please review the docs.

Building this project

This project uses Grunt. To build the project first install the node modules.

npm install

Next, run grunt.

grunt

To run the tests, run 'npm test'.

npm test

To check test coverage run 'grunt coverage'.

grunt coverage

A pre-commit hook is defined in /pre-commit that runs jshint. To use the hook, run the following:

ln -s ../../pre-commit .git/hooks/pre-commit

A post-commit hook is defined in /post-commit that runs the Plato complexity analysis tools. To use the hook, run the following:

ln -s ../../post-commit .git/hooks/post-commit

View the code complexity report.