Initial commit
This commit is contained in:
32
js/ExportImage.js
Normal file
32
js/ExportImage.js
Normal file
@ -0,0 +1,32 @@
|
||||
class ExportImage {
|
||||
/**
|
||||
* Exports the target element to a svg and downloads it.
|
||||
* @param {Element} svgEl A DOM object of the SVG.
|
||||
* @param {string} name The target file name
|
||||
*/
|
||||
exportToSvg(svgEl, name) {
|
||||
svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
|
||||
var svgData = svgEl.outerHTML;
|
||||
var preface = '<?xml version="1.0" standalone="no"?>\r\n';
|
||||
var svgBlob = new Blob([preface, svgData], { type: "image/svg+xml;charset=utf-8" });
|
||||
var svgUrl = URL.createObjectURL(svgBlob);
|
||||
var downloadLink = document.createElement("a");
|
||||
downloadLink.href = svgUrl;
|
||||
downloadLink.download = name;
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
}
|
||||
|
||||
/**
|
||||
* Exports the target element to a png image and downloads it.
|
||||
* @param {Element} targetElement A simple DOM object in the form of a canvas
|
||||
* @param {string} name The target file name
|
||||
*/
|
||||
exportToPng(targetElement, name) {
|
||||
var link = document.getElementById('link');
|
||||
link.setAttribute('download', name);
|
||||
link.setAttribute('href', targetElement.toDataURL("image/png").replace("image/png", "image/octet-stream"));
|
||||
link.click();
|
||||
}
|
||||
}
|
||||
191
js/index.js
Normal file
191
js/index.js
Normal file
@ -0,0 +1,191 @@
|
||||
/**
|
||||
* 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);
|
||||
Reference in New Issue
Block a user