295 lines
11 KiB
JavaScript
295 lines
11 KiB
JavaScript
/**
|
|
* 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);
|