trigen/js/index.js

/**
 * Copyright (c) 2022
 *
 * This is not a trianglify.io clone
 *
 * @author TheGreydiamond <https://github.com/TheGreyDiamond>
 * @author Spacelord09 <https://github.com/Spacelord09>
 * @author HATBE <https://github.com/HATBE>
 */

let ExportImageC = new ExportImage();

const targetCanvas = document.getElementById('pattern');
let colorPaternsEl = $("#color-patterns");

const colorpatterns = {
	YlGn: ['#ffffe5', '#f7fcb9', '#d9f0a3', '#addd8e', '#78c679', '#41ab5d', '#238443', '#006837', '#004529'],
	YlGnBu: ['#ffffd9', '#edf8b1', '#c7e9b4', '#7fcdbb', '#41b6c4', '#1d91c0', '#225ea8', '#253494', '#081d58'],
	GnBu: ['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081'],
	BuGn: ['#f7fcfd', '#e5f5f9', '#ccece6', '#99d8c9', '#66c2a4', '#41ae76', '#238b45', '#006d2c', '#00441b'],
	PuBuGn: ['#fff7fb', '#ece2f0', '#d0d1e6', '#a6bddb', '#67a9cf', '#3690c0', '#02818a', '#016c59', '#014636'],
	PuBu: ['#fff7fb', '#ece7f2', '#d0d1e6', '#a6bddb', '#74a9cf', '#3690c0', '#0570b0', '#045a8d', '#023858'],
	BuPu: ['#f7fcfd', '#e0ecf4', '#bfd3e6', '#9ebcda', '#8c96c6', '#8c6bb1', '#88419d', '#810f7c', '#4d004b'],
	RdPu: ['#fff7f3', '#fde0dd', '#fcc5c0', '#fa9fb5', '#f768a1', '#dd3497', '#ae017e', '#7a0177', '#49006a'],
	PuRd: ['#f7f4f9', '#e7e1ef', '#d4b9da', '#c994c7', '#df65b0', '#e7298a', '#ce1256', '#980043', '#67001f'],
	OrRd: ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000'],
	YlOrRd: ['#ffffcc', '#ffeda0', '#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c', '#bd0026', '#800026'],
	YlOrBr: ['#ffffe5', '#fff7bc', '#fee391', '#fec44f', '#fe9929', '#ec7014', '#cc4c02', '#993404', '#662506'],
	Purples: ['#fcfbfd', '#efedf5', '#dadaeb', '#bcbddc', '#9e9ac8', '#807dba', '#6a51a3', '#54278f', '#3f007d'],
	Blues: ['#f7fbff', '#deebf7', '#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#08519c', '#08306b'],
	Greens: ['#f7fcf5', '#e5f5e0', '#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#006d2c', '#00441b'],
	Oranges: ['#fff5eb', '#fee6ce', '#fdd0a2', '#fdae6b', '#fd8d3c', '#f16913', '#d94801', '#a63603', '#7f2704'],
	Reds: ['#fff5f0', '#fee0d2', '#fcbba1', '#fc9272', '#fb6a4a', '#ef3b2c', '#cb181d', '#a50f15', '#67000d'],
	Greys: ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000'],
	PuOr: ['#7f3b08', '#b35806', '#e08214', '#fdb863', '#fee0b6', '#f7f7f7', '#d8daeb', '#b2abd2', '#8073ac', '#542788', '#2d004b'],
	BrBG: ['#543005', '#8c510a', '#bf812d', '#dfc27d', '#f6e8c3', '#f5f5f5', '#c7eae5', '#80cdc1', '#35978f', '#01665e', '#003c30'],
	PRGn: ['#40004b', '#762a83', '#9970ab', '#c2a5cf', '#e7d4e8', '#f7f7f7', '#d9f0d3', '#a6dba0', '#5aae61', '#1b7837', '#00441b'],
	PiYG: ['#8e0152', '#c51b7d', '#de77ae', '#f1b6da', '#fde0ef', '#f7f7f7', '#e6f5d0', '#b8e186', '#7fbc41', '#4d9221', '#276419'],
	RdBu: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#f7f7f7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac', '#053061'],
	RdGy: ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#ffffff', '#e0e0e0', '#bababa', '#878787', '#4d4d4d', '#1a1a1a'],
	RdYlBu: ['#a50026', '#d73027', '#f46d43', '#fdae61', '#fee090', '#ffffbf', '#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695'],
	Spectral: ['#9e0142', '#d53e4f', '#f46d43', '#fdae61', '#fee08b', '#ffffbf', '#e6f598', '#abdda4', '#66c2a5', '#3288bd', '#5e4fa2'],
	RdYlGn: ['#a50026', '#d73027', '#f46d43', '#fdae61', '#fee08b', '#ffffbf', '#d9ef8b', '#a6d96a', '#66bd63', '#1a9850', '#006837']
};

let selectedColorPattern = generateRandColor() // get random init colors
let pattern = null;
let seed = null;
let colorFunctionUsr = null;

// ================
// Functions

/**
 * Picks a random colorpattern.
 * @returns {Array} A random pattern from colorpatterns
 */

function generateRandColor() {
	return(colorpatterns[Object.keys(colorpatterns)[Object.keys(colorpatterns).length * Math.random() << 0]]);
}

/**
 * Generates a random seed.
 * @returns {string} A random base-64 encoded string
 */

function generateSeed() {
	let result = '';
	let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
	let charactersLength = characters.length;
	for (let i = 0; i < 64; i++) {
		result += characters.charAt(Math.floor(Math.random() * charactersLength));
	}
//	return("PATTERN"); // DEBUG
	return(btoa(result));
}

/**
 *  Regenerates canvas
 * @param {*} targetCanvas Canvas to print on.
 * @returns 
 */

function generateCanvas(targetCanvas) {
	const usrWidth = parseInt(document.getElementById("CanvasWidth").value);
	const usrHeight = parseInt(document.getElementById("CanvasHeight").value);
	const usrCell = parseFloat(document.getElementById("rangeCell").value);
	const usrVar = parseFloat(document.getElementById("rangeVar").value);
	const usrIntense = parseFloat(document.getElementById("rangeIntense").value);

	let colFunc = null;

	switch (colorFunctionUsr || "gradient") {
		case "gradient":
				colFunc = trianglify.colorFunctions.interpolateLinear(usrIntense);
				break;
			case "sparkle":
				colFunc = trianglify.colorFunctions.sparkle(usrIntense / 2);
				break;
			case "shadows":
				colFunc = trianglify.colorFunctions.shadows(usrIntense / 2);
				break;
		}

	const options = {
		width: usrWidth,
		height: usrHeight,
		xColors: selectedColorPattern,
		yColors: 'match',
		cellSize: 255 * usrCell,
		variance: usrVar,
		seed: seed,
		colorSpace: "lab",
		colorFunction: colFunc,
	}
	
	const trianglifyObj = trianglify(options);
	trianglifyObj.toCanvas(targetCanvas);

	return trianglifyObj;
}

function generateColorPatterns() {
	for(const pattern in colorpatterns) {
		const liEl = document.createElement('li');
		liEl.dataset.name = pattern;
		liEl.style.display = "flex";
		liEl.style.flex = "grow";
		liEl.classList.add("hoverGrow", "shadow");
		liEl.style.margin = "5px";
		liEl.title = pattern;
	
		colorpatterns[pattern].forEach(color => {
			const colEl = document.createElement('span');
			colEl.style.flex = 1;
			colEl.style.height = '25px';
			colEl.style.backgroundColor = color;
	
			liEl.appendChild(colEl);
		});
	
		colorPaternsEl.append(liEl);
	}
}

// ================
// Listeners

// == check for input : generate new canvas
$('input.changable').on('input', () => {
	pattern = generateCanvas(targetCanvas);
})

// == check for radio input : generate new canvas
$('input.radio-changable').on('click', (e) => {
	colorFunctionUsr = e.target.dataset.name;
	generateCanvas(targetCanvas);
});

// == export canvas to svg
$('#export_svg').on('click', () => {
	ExportImageC.exportToSvg(pattern.toSVG(), `Trianglify-${new Date().getTime()}.svg`);
});

// == export canvas to png
$('#export_png').on('click', () => {
	ExportImageC.exportToPng(targetCanvas, `Trianglify-${new Date().getTime()}.png`);
});

// == listen on click on colors
colorPaternsEl.on('click', (e) => {
	if(e.target.parentNode.dataset.name) {
		selectedColorPattern = e.target.parentNode.dataset.name;
		generateCanvas(targetCanvas);
	}
});

$('#generate_seed').on('click', () => {
	seed = generateSeed();
	generateCanvas(targetCanvas);
});

// ================
// Stuff we do.

seed = generateSeed();

generateColorPatterns();

pattern = generateCanvas(targetCanvas);