image-tessellator v1.0.6

Tessellations

This project is a cute little program that loads up a random image and draws triangles over it. It is meant to be nothing more than a simple screen saver like application.

Available as an npm package

Live Demo

Navigate to https://edricy.github.io/Tessellations/demo (tested in Google Chrome)

Download

npm install image-tessellator

File include

<script src="tessellator.js"></script>

ES6 Module

import ImageTessellator from path/to/tessellator.es.js';

CommonJS

require("image-tesselator");

Basic Usage

See the demo code

Setup your canvas like you want it.

<style>
#c {
	width: 50vw;
	height: 50vh;
}
</style>
<canvas id="c"></canvas>

include the script <script src="/path/to/tessellator.js"></script>

call the constructor

let c = document.getElementById("c");
let src = "path/to/img.png"
let tess = new  ImageTessellator(c, src, {loadCallback: "playAnimation"});

Options

An example with different options specified: https://edricy.github.io/Tessellations/demo?splitMode=1&traversalMode=1&doStroke=false&doFadeAfter=true

FitOptions:
FIT: 0      // largest possible size while still fitting inside canvas
FILL: 1     // fill canvas completely while keeping aspect ratio
SAME: 2     // draw at original image size
STRETCH: 3  // stretch to canvas dimensions

TraversalOptions:
LARGEST_FIRST: 0
IN_ORDER: 1
RANDOM_ORDER: 2

SplitOptions:
HALVE: 0
SIERPINSKI: 1
CENTROID: 2