trigen/js/index.js

/**
 * Copyright (c) 2022
 *
 * This product aims to provide up zo 100% api coverage from trianglify to the end user.
 *
 * @author TheGreydiamond <https://github.com/TheGreyDiamond>
 * @author Spacelord09 <https://github.com/Spacelord09>
 * @author HATBE <https://github.com/HATBE>
 */

const ExportImageC = new ExportImage(); // Class
const debugmode = true; // Enables debug messages

// TODO
let globalConfig = { // Initial config object including initial values. ONLY STATIC VALUES, function generated values are declared as "NULL".
	width: 3840,
	height: 2160,
	xColors: null,
	yColors: null,
	cellSize: 255 * 0.5,
	variance: 0.5,
	seed: null,
	colorSpace: 'lab',
	colorFunction: null,
}

const targetCanvas = document.getElementById('pattern');
let colorPatternsElX = $("#color-patterns-x");
let colorPatternsElY = $("#color-patterns-y");

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'],

	spacelord: ['#000000', '#0bff09'],
	hatbe: ['#2B3342', '#9F9F9F'],
	greydiamond: ['#000000', '#FFFFFF', '#000000'],

	blacks: ['#000000', '#FFFFFF', '#000000'],
	dgreys: ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000', '#252525', '#525252', '#737373', '#969696', '#bdbdbd', '#d9d9d9', '#f0f0f0', '#ffffff'],
	rdgreys: [ "#000000", "#252525", "#525252", "#737373", "#969696", "#bdbdbd", "#d9d9d9", "#f0f0f0", "#ffffff", '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000'],
	rdgreysr: [ "#000000", "#252525", "#525252", "#737373", "#969696", "#bdbdbd", "#d9d9d9", "#f0f0f0", "#e31a1c", '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000']
};

let selectedColorPatternX = generateRandColor(); // get random init colors
let selectedColorPatternY = null;//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 (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 (btoa(result));
}

/**
 *  Regenerates canvas
 * @param {*} targetCanvas Canvas to print on.
 * @returns {Object} trianglifyObj Generated basic Trianglify object
 */

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: colorpatterns[selectedColorPatternX],
		yColors: colorpatterns[selectedColorPatternY] || 'match',
		cellSize: 255 * usrCell,
		variance: usrVar,
		seed: seed,
		colorSpace: "lab",
		colorFunction: colFunc,
//		strokeWidth: 1,
		fill: true
	}

	const trianglifyObj = trianglify(options);

	try {
		trianglifyObj.toCanvas(targetCanvas);
	} catch (e) {
		debugmode && console.error(e);
		console.error("Could not print to canvas! Resolution is probably to high.");
	}

	return trianglifyObj; 
}

function generateColorPatterns() {
	const create = (xory) => {
		let div = document.createElement('div');
		for (const pattern in colorpatterns) {
			const liEl = document.createElement('li');
			liEl.id = `colorpattern-${xory}`;
			liEl.classList.add(`colorpattern-${xory}-${pattern}`);
			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);
			});
			div.appendChild(liEl);
			
		}
		return div;
	}

	const x = create("x");
	colorPatternsElX.append(x);
	const y = create("y");
	colorPatternsElY.append(y);

	updateActiveColor(document.querySelector(`.colorpattern-x-${selectedColorPatternX}`));
	updateActiveColor(document.querySelector(`.colorpattern-y-${selectedColorPatternY}`));
}

function updateActiveColor(activeItem) {
	/*const actives = document.querySelectorAll('#colorpattern.active');
	actives.forEach(item => item.classList.remove('active'));
	activeItem.classList.add('active');*/
}

function getRandomColor() {
	var letters = '0123456789ABCDEF';
	var color = '#';
	for (var i = 0; i < 6; i++) {
		color += letters[Math.floor(Math.random() * 16)];
	}
	return color;
}

function generateRandomColorArray(size) {
	let colors = [];
	for (let i = 0; i < size; i++) {
		colors.push(getRandomColor());
	}
	return colors;
};

// ================
// 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;
	pattern = 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
colorPatternsElX.on('click', (e) => {
	if (e.target.parentNode.dataset.name) {
		selectedColorPatternX = e.target.parentNode.dataset.name;
		updateActiveColor(e.target.parentNode);
		pattern = generateCanvas(targetCanvas);
	}
});
colorPatternsElY.on('click', (e) => {
	if (e.target.parentNode.dataset.name) {
		selectedColorPatternY = e.target.parentNode.dataset.name;
		updateActiveColor(e.target.parentNode);
		pattern = generateCanvas(targetCanvas);
	}
});

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

$('#generate_color').on('click', () => {
	selectedColorPatternX = generateRandColor();
	selectedColorPatternY = generateRandColor();
	updateActiveColor(document.querySelector(`.colorpattern-x-${selectedColorPatternX}`));
	updateActiveColor(document.querySelector(`.colorpattern-y-${selectedColorPatternY}`));
	pattern = generateCanvas(targetCanvas);
});

$('#randomize').on('click', () => {
	let rangeIntense = document.getElementById("rangeIntense");
	let rangeVar = document.getElementById("rangeVar");
	let rangeCell = document.getElementById("rangeCell");

	rangeIntense.value = Math.random() * (parseInt(rangeIntense.min) - parseInt(rangeIntense.max)) + parseInt(rangeIntense.max);
	rangeVar.value = Math.random() * (parseInt(rangeVar.min) - parseInt(rangeVar.max)) + parseInt(rangeVar.max);
	rangeCell.value = Math.random() * (parseInt(rangeCell.min) - parseInt(rangeCell.max)) + parseInt(rangeCell.max);
	pattern = generateCanvas(targetCanvas);
});

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

seed = generateSeed();

for (let i = 2; i < 9; i=i*2) {
	for (let j = 1; j < 17; j++) {
		//debugmode && console.log(`I=${i}, J=${j}`);
		colorpatterns[`random-${i}-${j}`] = generateRandomColorArray(i);
	}
}

generateColorPatterns();
pattern = generateCanvas(targetCanvas);