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