bouncehouse
Version:
A toolbox for building WebGl experiences
175 lines (128 loc) • 3.48 kB
Markdown
# 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,
});
```