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

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

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 to 0
• endAngle: Number defaults to Math.PI * 2
• counterClockwise: Boolean defaults to false

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,
});