Bouncehouse
A toolbox for building WebGl experiences
Installation
NPM
npm i bouncehouse
UNPKG
<script src="https://unpkg.com/bouncehouse@0.0.1/dist/bouncehouse.iife.js"></script>
Contents
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 withthis.mouseX
andthis.mouseY
. Optional defaults tofalse
-
Initialize
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
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
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
-
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
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 to0
-
endAngle
: Number defaults toMath.PI * 2
-
counterClockwise
: Boolean defaults tofalse
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,
});