# Bouncehouse

A toolbox for building WebGl experiences

## Installation

### NPM

```sh
npm i bouncehouse
```

### UNPKG

```html
<script src="https://unpkg.com/bouncehouse@0.0.1/dist/bouncehouse.iife.js"></script>
```

## Contents

- [Render2D](#Render2D)

## `Render2D`

A class with helpful methods to build with `CanvasRenderingContext2D` inteface.

### Constructor

- `element` - An HTMLCanvasElement
- `options` - Options for the renderer
  - `height` - A number that sets height of the canvas. Required
  - `width` - A number that sets width of the canvas. Required
  - `trackMouse`: A boolean that enables tracking of the mouse position over that canvas. The values can be accessed with `this.mouseX` and `this.mouseY`. Optional defaults to `false`

### Initialize

```js
import { Render2D } from "bouncehouse";

const canvasElement = document.querySelector("canvas");

class Canvas extends Render2D {
  constructor(el, options) {
    super(el, options);
  }
}

new Canvas(canvasElement, {
  height: 400,
  width: window.innerWidth,
});
```

### Methods

#### `draw`

The method that is run in the animation render loop. Has access to the `context`, `time` and `canvas`

```js
import { Render2D } from "bouncehouse";

const canvasElement = document.querySelector("canvas");

class Canvas extends Render2D {
  constructor(el, options) {
    super(el, options);
  }

  draw(context, time, canvas) {
    console.log(context); // CanvasRenderingContext2D
    console.log(time); // Current time elapsed
    console.log(canvas); // Canvas element
  }
}

new Canvas(canvasElement, {
  height: 400,
  width: window.innerWidth,
});
```

#### `addGradient`

Method that can be used to add a gradient to the canvas element. It can be used within the `draw` method

**Usage**

```js
this.addGradient(colorStops, options);
```

- `colorStops` - An array of arrays that adds different stops to the gradient. `[[step, color]]`
- `options` - An object of options

  - `startX`: number
  - `startY`: number
  - `endX`: number
  - `endY`: number
  - `height`: number
  - `width`: number

```js
import { Render2D } from "bouncehouse";

const canvasElement = document.querySelector("canvas");

class Canvas extends Render2D {
  constructor(el, options) {
    super(el, options);
  }

  draw(context, time, canvas) {
    this.addGradient(
      [
        [0, "green"],
        [1, "red"],
      ],
      {
        startX: 100,
        startY: 100,
        endX: 150,
        endY: 100,
        height: 50 + Math.sin(time * 4) * 50,
        width: 200,
      }
    );
  }
}

new Canvas(canvasElement, {
  height: 400,
  width: window.innerWidth,
});
```

#### `addArc`

A method that can add arcs to the canvas

**Usage**

```js
this.addArc(x, y, radius, fill, startAngle, endAngle, counterClockwise);
```

- `x` - Number that sets X position on canvas
- `y` - Number that sets Y position on canvas
- `radius` - Number that sets the Arc radius
- `fill` - String that sets the Arc fill
- `startAngle`: Number defaults to `0`
- `endAngle`: Number defaults to `Math.PI * 2`
- `counterClockwise`: Boolean defaults to `false`

```js
import { Render2D } from "bouncehouse";

const canvasElement = document.querySelector("canvas");

class Canvas extends Render2D {
  constructor(el, options) {
    super(el, options);
  }

  draw(context, time, canvas) {
    this.addArc(50, 50, 100 + Math.sin(time * 5) * 40, "blue");
  }
}

new Canvas(canvasElement, {
  height: 400,
  width: window.innerWidth,
});
```