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

Property	Default	Notes
`imgSampleRatio`	`.01`	0 to 1. smaller value means less color accuracy but faster processing
`fitMethod`	`FitOptions.FIT`	Specifies how the canvas is fit to the container
`traversalMode`	`TraversalOptions.LARGEST_FIRST`	Specifies what order triangles are processed
`splitMode`	`SplitOptions.HALVE`	Specifies how the triangles are split
`loadCallback`	`null`	called after the image loads
`backgroundColor`	`#567`
`strokeColor`	`#555`
`doStroke`	`true`
`minColorArea`	`50`
`itersPerTick`	`200`
`areaPerTick`	`10000`
`tickMinDuration`	`0`
`renderImgPieces`	`false`	set to true to draw pieces of the actual image when triangles are tiny
`doFadeAfter`	`false`	fade the actual image on top when finished. renderImgPieces must be false
`fadeDelay`	`500`,	number of ms to wait before doing the after fade

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

EdricY/Tessellations