# burner

> A DOM-based rendering engine.

Latest version **3.1.7** (published 2014-11-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install burner
pnpm add burner
yarn add burner
bun add burner
```

## 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.1.7 |
| Published | 2014-11-25 |
| First published | 2014-08-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Vince Allen |
| Maintainers | vinceallenvince |

## Links

- npm: https://www.npmjs.com/package/burner
- Repository: http://github.com/vinceallenvince/Burner
- Homepage: https://github.com/vinceallenvince/Burner
- Issues: https://github.com/vinceallenvince/Burner/issues
- npm.io page: https://npm.io/package/burner

## Dependencies (3)

- [fpsdisplay](https://npm.io/package/fpsdisplay.md) ^0.1.3
- [vector2d-lib](https://npm.io/package/vector2d-lib.md) ^0.0.7
- [drawing-utils-lib](https://npm.io/package/drawing-utils-lib.md) ^0.1.5

## Recent versions

- 3.1.7 (latest) — 2014-11-25
- 3.1.6 — 2014-09-29
- 3.1.5 — 2014-09-15
- 3.1.4 — 2014-09-14
- 3.1.3 — 2014-09-14
- 3.1.2 — 2014-09-10
- 3.1.1 — 2014-09-03
- 3.1.0 — 2014-09-01
- 3.0.17 — 2014-09-01
- 3.0.13 — 2014-08-18
- 3.0.12 — 2014-08-13
- 3.0.11 — 2014-08-13
- 3.0.3 — 2014-08-10

## README

![Build status](https://travis-ci.org/vinceallenvince/Burner.svg?branch=master)

#Burner: A rendering engine for DOM-based animation.

Use Burner to setup a DOM-based rendering system in a web browser. Burner supplies some convenient functions for controlling playback, controlling the camera, detecting world boundaries, and optimizing object management via object pooling.

##Install

To include Burner as a component in your project, use the node module.

```
npm install burner --save
```

You can also use the [standalone version](https://github.com/vinceallenvince/Burner/releases/latest) and reference both the css and js files from your document.

```
<html>
  <head>
    <link href="css/burner.min.css" type="text/css" charset="utf-8" rel="stylesheet" />
    <script src="scripts/burner.js" type="text/javascript" charset="utf-8"></script>
  </head>
  ...
```

##Usage

Burner contains the essential classes for creating a rendering engine... [System](https://github.com/vinceallenvince/Burner/blob/master/src/System.js), [World](https://github.com/vinceallenvince/Burner/blob/master/src/World.js) and [Item](https://github.com/vinceallenvince/Burner/blob/master/src/Item.js). You can use these built-in classes to create [simple systems](http://vinceallenvince.github.io/Burner).

```
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/burner.min.css" type="text/css" charset="utf-8" />
  <script src="scripts/burner.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <script type="text/javascript" charset="utf-8">
      Burner.System.setup(function() {
        this.add('World');
        this.add('Obj');
      });
      Burner.System.loop();
    </script>
  </body>
</html>
```

## Using your own classes

To create something more complex, you need supply a library of classes like <a href='http://github.com/foldi/FloraJS'>FloraJS</a> that inherit from the [Item](https://github.com/vinceallenvince/Burner/blob/master/src/Item.js) class.

A class must meet some minimum requirements:

* It must extend the Burner.Item class via Burner.Utils.extend. (ie. Burner.Utils.extend(Obj, Burner.Item))
* It must call Burner.Item in its constructor. (ie. Burner.Item.call(this))

You must add an entry for your class in Burner's 'Classes' map. Call setup() and pass a function that adds an instance of your class. Finally, call loop().

```html

<!DOCTYPE html>
<html>
<head>
  <title>Burner | Custom classes</title>
  <link rel="stylesheet" href="css/Burner.min.css" type="text/css" charset="utf-8" />
  <script src="scripts/Burner.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <script type="text/javascript" charset="utf-8">

      /**
       * Creates a new Obj.
       *
       * @param {Object} [opt_options=] A map of initial properties.
       * @constructor
       */
      function Obj(opt_options) {
        Burner.Item.call(this);
        this.name = 'obj';
      }
      Burner.Utils.extend(Obj, Burner.Item);

      // Uncomment to provide your own step function.
      /*Obj.prototype.step = function() {
        // your code to update this obj every frame goes here
      };*/

      /**
       * Tell Burner where to find classes.
       */
      Burner.System.Classes = {
        Obj: Obj
      };

      /**
       * Create a new Burner system.
       */
      Burner.System.setup(function() {
        this.add('World', {
          color: [200, 200, 200]
        });
        this.add('Obj', {
          color: [0, 0, 0]
        });
      });
      Burner.System.loop();
    </script>
  </body>
</html>

```

Running the code, you should see a black box fall to the ground. The [Item](https://github.com/vinceallenvince/Burner/blob/master/src/Item.js) class has a default step() function that runs a gravity simulation.

You can override the default step() function to control your object's behavior any way you want.

##Docs

To learn more, please review [the docs](http://vinceallenvince.github.io/burner/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/burner/reports/) report.

---
_Source: https://npm.io/package/burner · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
