Project-Name-Here/trigen
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Current state of develeopment

Browse Source
This commit is contained in:
Leon
2022-03-11 22:37:01 +01:00
parent 862a6954ba
commit 94378af9d9
9 changed files with 738 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
js/generator.js Normal file
View File

@ -0,0 +1,3 @@
class Generator {
}

100
js/index.js
View File

@ -1,13 +1,14 @@
/**
* Copyright (c) 2022
*
* This is not a trianglify.io clone
* 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 debugmode = true // Enables debug messages
let ExportImageC = new ExportImage();
const targetCanvas = document.getElementById('pattern');
@ -40,10 +41,15 @@ const colorpatterns = {
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']
RdYlGn: ['#a50026', '#d73027', '#f46d43', '#fdae61', '#fee08b', '#ffffbf', '#d9ef8b', '#a6d96a', '#66bd63', '#1a9850', '#006837'],
spacelord: ['#000000', '#0bff09'],
hatbe: ['#2B3342', '#9F9F9F'],
greydiamond: ['#000000', '#FFFFFF', '#000000'],
dgreys: ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000', '#252525', '#525252', '#737373', '#969696', '#bdbdbd', '#d9d9d9', '#f0f0f0', '#ffffff'],
rdgreys: ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000']
};
let selectedColorPattern = generateRandColor() // get random init colors
let selectedColorPattern = generateRandColor(); // get random init colors
let pattern = null;
let seed = null;
let colorFunctionUsr = null;
@ -57,7 +63,7 @@ let colorFunctionUsr = null;
*/
function generateRandColor() {
return(colorpatterns[Object.keys(colorpatterns)[Object.keys(colorpatterns).length * Math.random() << 0]]);
return (Object.keys(colorpatterns)[Object.keys(colorpatterns).length * Math.random() << 0]);
}
/**
@ -72,8 +78,7 @@ function generateSeed() {
for (let i = 0; i < 64; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
// return("PATTERN"); // DEBUG
return(btoa(result));
return (btoa(result)); // TODO DEPRECATED
}
/**
@ -93,20 +98,20 @@ function generateCanvas(targetCanvas) {
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;
}
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,
xColors: colorpatterns[selectedColorPattern],
yColors: 'match',
cellSize: 255 * usrCell,
variance: usrVar,
@ -114,34 +119,50 @@ function generateCanvas(targetCanvas) {
colorSpace: "lab",
colorFunction: colFunc,
}
const trianglifyObj = trianglify(options);
trianglifyObj.toCanvas(targetCanvas);
return trianglifyObj;
const trianglifyObj = trianglify(options);
try {
trianglifyObj.toCanvas(targetCanvas);
} catch (e) {
if (debugmode) {console.error(e)};
console.error("Could not print to canvas! Resolution is probably to high.");
}
return trianglifyObj;
}
function generateColorPatterns() {
for(const pattern in colorpatterns) {
for (const pattern in colorpatterns) {
const liEl = document.createElement('li');
liEl.id = `colorpattern`;
liEl.classList.add(`colorpattern-${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);
});
colorPaternsEl.append(liEl);
}
updateActiveColor(document.querySelector(`.colorpattern-${selectedColorPattern}`));
}
function updateActiveColor(activeItem) {
const actives = document.querySelectorAll('#colorpattern.active');
actives.forEach(item => item.classList.remove('active'));
activeItem.classList.add('active');
}
// ================
@ -155,7 +176,7 @@ $('input.changable').on('input', () => {
// == check for radio input : generate new canvas
$('input.radio-changable').on('click', (e) => {
colorFunctionUsr = e.target.dataset.name;
generateCanvas(targetCanvas);
pattern = generateCanvas(targetCanvas);
});
// == export canvas to svg
@ -170,22 +191,39 @@ $('#export_png').on('click', () => {
// == listen on click on colors
colorPaternsEl.on('click', (e) => {
if(e.target.parentNode.dataset.name) {
if (e.target.parentNode.dataset.name) {
selectedColorPattern = e.target.parentNode.dataset.name;
generateCanvas(targetCanvas);
updateActiveColor(e.target.parentNode);
pattern = generateCanvas(targetCanvas);
}
});
$('#generate_seed').on('click', () => {
seed = generateSeed();
generateCanvas(targetCanvas);
pattern = generateCanvas(targetCanvas);
});
$('#generate_color').on('click', () => {
selectedColorPattern = generateRandColor();
updateActiveColor(document.querySelector(`.colorpattern-${selectedColorPattern}`));
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.
// Stuff we do initially.
seed = generateSeed();
generateColorPatterns();
pattern = generateCanvas(targetCanvas);
pattern = generateCanvas(targetCanvas);

45
js/test.js Normal file
View File

@ -0,0 +1,45 @@
let obj1 = document.getElementById("CanvasWidth");
let obj2 = document.getElementById("CanvasHeight");
let current1 = null;
let current2 = null;
function countup() {
current1 = parseInt(obj1.value);
current2 = parseInt(obj2.value);
current1 = current1 + 16;
current2 = current2 + 9;
obj1.value = current1;
obj2.value = current2;
selectedColorPattern = generateRandColor()
pattern = generateCanvas(targetCanvas);
}
//let counter = setInterval(countup, 10);
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results==null) {
return null;
}
return decodeURI(results[1]) || 0;
}
let urlParams = new URLSearchParams(window.location.search);
//if (debugmode) {
if (urlParams.has("rick")) {
console.warn("You are getting ricked in randomness ;)");
}
//} else {
// console.warn("You are NOT getting ricked in randomness ;)");
//}
//console.log(urlParams.toString());
console.info("FUCK= " + $.urlParam('fuck'));
console.info("RICK= " + $.urlParam('norick'));