# bitshadowmachine
> Bit-Shadow-Machine renders particles in a web browser using CSS box shadows.
Latest version **3.0.7** (published 2014-11-25) · MIT license · 0 weekly downloads
## Install
```sh
npm install bitshadowmachine
pnpm add bitshadowmachine
yarn add bitshadowmachine
bun add bitshadowmachine
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.0.7 |
| Published | 2014-11-25 |
| First published | 2014-09-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 37 |
| Author | Vince Allen |
| Maintainers | vinceallenvince |
## Links
- npm: https://www.npmjs.com/package/bitshadowmachine
- Repository: https://github.com/vinceallenvince/Bit-Shadow-Machine
- Issues: https://github.com/vinceallenvince/Bit-Shadow-Machine/issues
- npm.io page: https://npm.io/package/bitshadowmachine
## Dependencies (3)
- [burner](https://npm.io/package/burner.md) ^3.1.5
- [quietriot](https://npm.io/package/quietriot.md) ^0.1.2
- [fpsdisplay](https://npm.io/package/fpsdisplay.md) ^0.1.3
## Recent versions
- 3.0.7 (latest) — 2014-11-25
- 3.0.6 — 2014-11-25
- 3.0.5 — 2014-10-31
- 3.0.4 — 2014-09-28
- 3.0.3 — 2014-09-17
- 3.0.2 — 2014-09-15
- 3.0.1 — 2014-09-14
- 3.0.0 — 2014-09-14
## 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.
```html
Bit-Shadow Machine
```
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](http://vinceallenvince.github.io/Bit-Shadow-Machine/Bit.Box.html).
## Animation
Let's make the box move.
```html
Bit-Shadow Machine
```
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](http://vinceallenvince.github.io/Bit-Shadow-Machine/Bit.BoxAnim.html).
## Multiple items
Now we'll see the power of the Bit-Shadow Machine. Replace the System.init() call with the following.
```javascript
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](http://vinceallenvince.github.io/Bit-Shadow-Machine/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.
```javascript
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](http://vinceallenvince.github.io/Bit-Shadow-Machine/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.
```html
Bit-Shadow Machine
```
View it at [public/Bit.World.html](http://foldi.github.io/Bit-Shadow-Machine/Bit.World.html).
## Multple worlds
Bit-Shadow Machine can support multiple worlds. Just add them in the setup function.
```html
Bit-Shadow Machine
```
You should see three Bit-Shadow worlds each with their own set of animated items. View it at [public/Bit.MultipleWorlds.html](http://vinceallenvince.github.io/Bit-Shadow-Machine/Bit.MultipleWorlds.html).
##Docs
To learn more, please review [the docs](http://vinceallenvince.github.io/bitshadowmachine/doc/).
Building this project
------
This project uses [Grunt](http://gruntjs.com). 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](http://vinceallenvince.github.io/bitshadowmachine/reports/) report.
---
_Source: https://npm.io/package/bitshadowmachine · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._