Current state of development
This commit is contained in:
64
js/index.js
64
js/index.js
@ -8,11 +8,25 @@
|
||||
* @author HATBE <https://github.com/HATBE>
|
||||
*/
|
||||
|
||||
const debugmode = true // Enables debug messages
|
||||
let ExportImageC = new ExportImage();
|
||||
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 colorPaternsEl = $("#color-patterns");
|
||||
let colorPaternsElX = $("#color-patterns-x");
|
||||
let colorPaternsElY = $("#color-patterns-y");
|
||||
|
||||
const colorpatterns = {
|
||||
YlGn: ['#ffffe5', '#f7fcb9', '#d9f0a3', '#addd8e', '#78c679', '#41ab5d', '#238443', '#006837', '#004529'],
|
||||
@ -42,11 +56,15 @@ const colorpatterns = {
|
||||
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: ['#ffffff', '#f0f0f0', '#d9d9d9', '#bdbdbd', '#969696', '#737373', '#525252', '#252525', '#000000']
|
||||
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 selectedColorPattern = generateRandColor(); // get random init colors
|
||||
@ -78,13 +96,13 @@ function generateSeed() {
|
||||
for (let i = 0; i < 64; i++) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
}
|
||||
return (btoa(result)); // TODO DEPRECATED
|
||||
return (btoa(result));
|
||||
}
|
||||
|
||||
/**
|
||||
* Regenerates canvas
|
||||
* @param {*} targetCanvas Canvas to print on.
|
||||
* @returns
|
||||
* @returns {Object} trianglifyObj Generated basic Trianglify object
|
||||
*/
|
||||
|
||||
function generateCanvas(targetCanvas) {
|
||||
@ -118,6 +136,8 @@ function generateCanvas(targetCanvas) {
|
||||
seed: seed,
|
||||
colorSpace: "lab",
|
||||
colorFunction: colFunc,
|
||||
// strokeWidth: 1,
|
||||
fill: true
|
||||
}
|
||||
|
||||
const trianglifyObj = trianglify(options);
|
||||
@ -125,7 +145,7 @@ function generateCanvas(targetCanvas) {
|
||||
try {
|
||||
trianglifyObj.toCanvas(targetCanvas);
|
||||
} catch (e) {
|
||||
if (debugmode) {console.error(e)};
|
||||
debugmode && console.error(e);
|
||||
console.error("Could not print to canvas! Resolution is probably to high.");
|
||||
}
|
||||
|
||||
@ -153,7 +173,7 @@ function generateColorPatterns() {
|
||||
liEl.appendChild(colEl);
|
||||
});
|
||||
|
||||
colorPaternsEl.append(liEl);
|
||||
colorPaternsElX.append(liEl);
|
||||
}
|
||||
|
||||
updateActiveColor(document.querySelector(`.colorpattern-${selectedColorPattern}`));
|
||||
@ -165,6 +185,23 @@ function updateActiveColor(activeItem) {
|
||||
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
|
||||
|
||||
@ -190,7 +227,7 @@ $('#export_png').on('click', () => {
|
||||
});
|
||||
|
||||
// == listen on click on colors
|
||||
colorPaternsEl.on('click', (e) => {
|
||||
colorPaternsElX.on('click', (e) => {
|
||||
if (e.target.parentNode.dataset.name) {
|
||||
selectedColorPattern = e.target.parentNode.dataset.name;
|
||||
updateActiveColor(e.target.parentNode);
|
||||
@ -225,5 +262,12 @@ $('#randomize').on('click', () => {
|
||||
|
||||
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, j);
|
||||
}
|
||||
}
|
||||
|
||||
generateColorPatterns();
|
||||
pattern = generateCanvas(targetCanvas);
|
||||
pattern = generateCanvas(targetCanvas);
|
||||
|
||||
45
js/test.js
45
js/test.js
@ -1,45 +0,0 @@
|
||||
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'));
|
||||
|
||||
Reference in New Issue
Block a user