diff --git a/.gitignore b/.gitignore index a7a5cec..89876e4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .vscode/ node_modules/ -note.txt \ No newline at end of file +note.txt +test* \ No newline at end of file diff --git a/TODO.md b/TODO.md index b053e1b..4d5be36 100644 --- a/TODO.md +++ b/TODO.md @@ -1,17 +1,18 @@ # ToDo -- [W] Colorspace selection. +- [ ] Colorspace selection. - [X] Add Aspect ratio awareness. - [X] Move download buttons to preview area. -- [ ] Add Impressum, Datenschutzerklärung and About page. +- [ ] Add Impressum, Datenschutzerklärung and About page. -> Just Links. - [ ] Mention trianglify. - [X] Randomly generate Pattern intensity, Triangle variance and Cell size. - [X] Add random color button as buttongroup next to "regenerate pattern" button. - [X] Switch to a js package manager and deliver js without external cdns. - [ ] Investigate size issue -#- [ ] Use datasets for all values -#- [ ] x, y color allow to set both(buttongroup to switch axis) default for y axis = match +- [ ] Use datasets for all values +- [W] x, y color allow to set both(buttongroup to switch axis) default for y axis = match - [ ] Concept to not overload the UI while preserving all features -#- [ ] Predefinded resolution picker(1080p, 1440p..) +- [ ] Predefinded resolution picker(1080p, 1440p..) - [ ] Add api via get parameters - [ ] share link (api?) - +- [ ] Animation pattern system +- [ ] Custom points (logos?) diff --git a/css/style.css b/css/style.css index 1c05d09..19804c6 100644 --- a/css/style.css +++ b/css/style.css @@ -25,6 +25,7 @@ main { .hoverGrow:hover { transform: scale(1.025); transition-duration: .2s; + cursor: pointer; } .svg-center { @@ -58,7 +59,7 @@ main { height: auto; width: auto; object-fit: contain; - filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, .2)) + filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, .2)); } .preview-float { diff --git a/index.html b/index.html index a0250ca..c0e84c7 100644 --- a/index.html +++ b/index.html @@ -20,19 +20,18 @@
- +
- - - + + +
- +
@@ -52,8 +51,7 @@ - + @@ -67,26 +65,50 @@ - - - + + + +
+
+ + +
+
+ + +
+
+ +
- +
- - + +
- + @@ -102,4 +124,4 @@ - + \ No newline at end of file diff --git a/js/index.js b/js/index.js index 14cd5cd..6a85b65 100644 --- a/js/index.js +++ b/js/index.js @@ -8,11 +8,25 @@ * @author 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); \ No newline at end of file +pattern = generateCanvas(targetCanvas); diff --git a/js/test.js b/js/test.js deleted file mode 100644 index a5ece45..0000000 --- a/js/test.js +++ /dev/null @@ -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')); -