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

Current state of development

This commit is contained in:
Leon Meier 2022-03-12 02:07:00 +01:00
parent 94378af9d9
commit c41bc2c796
6 changed files with 108 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,3 +1,4 @@
.vscode/
node_modules/
note.txt
note.txt
test*

13
TODO.md
View File

@ -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?)

3
css/style.css
View File

@ -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 {

64
index.html
View File

@ -20,19 +20,18 @@
<div class="container m-2">
<div class="row">
<div class="col">
<input type="number" class="changable form-control" id="CanvasWidth" placeholder="3840" value="3840">
<input type="number" class="changable form-control" id="CanvasWidth"
placeholder="3840" value="3840">
</div>
<div class="col-1 svg-center">
<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24"
fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z" />
<path fill-rule="evenodd"
d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z" />
<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z" />
<path fill-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z" />
</svg>
</div>
<div class="col">
<input type="number" class="changable form-control" id="CanvasHeight" placeholder="2160" value="2160">
<input type="number" class="changable form-control" id="CanvasHeight"
placeholder="2160" value="2160">
</div>
</div>
</div>
@ -52,8 +51,7 @@
</div>
<label for="rangeIntense" class="form-label">Pattern intensity</label>
<input type="range" class="changable form-range" id="rangeIntense" min="0.0" max="1"
step="0.01">
<input type="range" class="changable form-range" id="rangeIntense" min="0.0" max="1" step="0.01">
<label for=" rangeVar" class="form-label">Triangle variance</label>
<input type="range" class="changable form-range" id="rangeVar" min="0" max="1" step="0.01">
@ -67,26 +65,50 @@
<button type="button" class="my-2 btn btn-outline-success badge" id="generate_seed">Regenerate pattern</button>
<button type="button" class="my-2 btn btn-outline-success badge" id="generate_color">Random color</button>
</div>
<label class="mt-2">Colors</label>
<ul class="m-0 p-0" id="color-patterns"></ul>
<!--<div class="my-2 btn-group" role="group">
<button type="button" class="my-2 btn btn-outline-success" id="export_png">Export as png</button>
<button type="button" class="my-2 btn btn-outline-danger" id="export_svg">Export as svg</button>
</div>-->
<ul class="nav nav-pills nav-fill" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="xcolors-tab" data-bs-toggle="tab" data-bs-target="#xcolors" type="button" role="tab" aria-selected="true">Colors (X Axis)</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link disabled" id="ycolors-tab" data-bs-toggle="tab" data-bs-target="#ycolors" type="button" role="tab" aria-selected="false">Colors (Y Axis)</button> <!-- TODO -->
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="xcolors" role="tabpanel" aria-labelledby="xcolors-tab">
<label class="mt-2">Colors (X Axis)</label>
<ul class="m-0 p-0" id="color-patterns-x"></ul>
</div>
<div class="tab-pane fade" id="ycolors" role="tabpanel" aria-labelledby="ycolors-tab">
<label class="mt-2">Colors (Y Axis)</label>
<ul class="m-0 p-0" id="color-patterns-y"></ul>
</div>
</div>
</div>
<div class="preview">
<div class="preview_content">
<canvas id="pattern"></canvas>
<canvas class="bg-light" id="pattern"></canvas>
</div>
<div class="preview-float d-flex">
<button type="button" class="opacity mx-2 svg-center btn btn-outline-transparent rounded-circle border-0" id="export_png"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-filetype-png" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5Zm-3.76 8.132c.076.153.123.317.14.492h-.776a.797.797 0 0 0-.097-.249.689.689 0 0 0-.17-.19.707.707 0 0 0-.237-.126.96.96 0 0 0-.299-.044c-.285 0-.506.1-.665.302-.156.201-.234.484-.234.85v.498c0 .234.032.439.097.615a.881.881 0 0 0 .304.413.87.87 0 0 0 .519.146.967.967 0 0 0 .457-.096.67.67 0 0 0 .272-.264c.06-.11.091-.23.091-.363v-.255H8.82v-.59h1.576v.798c0 .193-.032.377-.097.55a1.29 1.29 0 0 1-.293.458 1.37 1.37 0 0 1-.495.313c-.197.074-.43.111-.697.111a1.98 1.98 0 0 1-.753-.132 1.447 1.447 0 0 1-.533-.377 1.58 1.58 0 0 1-.32-.58 2.482 2.482 0 0 1-.105-.745v-.506c0-.362.067-.678.2-.95.134-.271.328-.482.582-.633.256-.152.565-.228.926-.228.238 0 .45.033.636.1.187.066.348.158.48.275.133.117.238.253.314.407Zm-8.64-.706H0v4h.791v-1.343h.803c.287 0 .531-.057.732-.172.203-.118.358-.276.463-.475a1.42 1.42 0 0 0 .161-.677c0-.25-.053-.475-.158-.677a1.176 1.176 0 0 0-.46-.477c-.2-.12-.443-.179-.732-.179Zm.545 1.333a.795.795 0 0 1-.085.381.574.574 0 0 1-.238.24.794.794 0 0 1-.375.082H.788v-1.406h.66c.218 0 .389.06.512.182.123.12.185.295.185.521Zm1.964 2.666V13.25h.032l1.761 2.675h.656v-3.999h-.75v2.66h-.032l-1.752-2.66h-.662v4h.747Z"/></svg></button>
<button type="button" class="opacity mx-2 svg-center btn btn-outline-dark rounded-circle border-0" id="export_svg"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-filetype-svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM0 14.841a1.13 1.13 0 0 0 .401.823c.13.108.288.192.478.252.19.061.411.091.665.091.338 0 .624-.053.858-.158.237-.105.416-.252.54-.44a1.17 1.17 0 0 0 .187-.656c0-.224-.045-.41-.135-.56a1 1 0 0 0-.375-.357 2.027 2.027 0 0 0-.565-.21l-.621-.144a.97.97 0 0 1-.405-.176.37.37 0 0 1-.143-.299c0-.156.061-.284.184-.384.125-.101.296-.152.513-.152.143 0 .266.023.37.068a.625.625 0 0 1 .245.181.56.56 0 0 1 .12.258h.75a1.092 1.092 0 0 0-.199-.566 1.21 1.21 0 0 0-.5-.41 1.813 1.813 0 0 0-.78-.152c-.293 0-.552.05-.776.15-.225.099-.4.24-.528.421-.127.182-.19.395-.19.639 0 .201.04.376.123.524.082.149.199.27.351.367.153.095.332.167.54.213l.618.144c.207.049.36.113.462.193a.387.387 0 0 1 .153.326.512.512 0 0 1-.085.29.559.559 0 0 1-.256.193c-.111.047-.249.07-.413.07-.117 0-.224-.013-.32-.04a.837.837 0 0 1-.248-.115.578.578 0 0 1-.255-.384H0Zm4.575 1.09h.952l1.327-3.999h-.879l-.887 3.138H5.05l-.897-3.138h-.917l1.339 4Zm5.483-3.293c.076.152.123.316.14.492h-.776a.797.797 0 0 0-.096-.249.689.689 0 0 0-.17-.19.707.707 0 0 0-.237-.126.963.963 0 0 0-.3-.044c-.284 0-.506.1-.664.302-.157.2-.235.484-.235.85v.497c0 .235.033.44.097.616a.881.881 0 0 0 .305.413.87.87 0 0 0 .518.146.965.965 0 0 0 .457-.097.67.67 0 0 0 .273-.263c.06-.11.09-.23.09-.364v-.254h-.823v-.59h1.576v.798c0 .193-.032.377-.096.55a1.29 1.29 0 0 1-.293.457 1.37 1.37 0 0 1-.495.314c-.198.074-.43.111-.698.111a1.98 1.98 0 0 1-.752-.132 1.447 1.447 0 0 1-.534-.377 1.58 1.58 0 0 1-.319-.58 2.482 2.482 0 0 1-.105-.745v-.507c0-.36.066-.677.199-.949.134-.271.329-.482.583-.633.256-.152.564-.228.926-.228.238 0 .45.033.635.1.188.066.348.158.48.275.134.117.238.253.314.407Z"/></svg></button>
<button type="button" class="opacity mx-2 svg-center btn btn-outline-transparent rounded-circle border-0" id="export_png">
<svg xmlns="https://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-filetype-png" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5Zm-3.76 8.132c.076.153.123.317.14.492h-.776a.797.797 0 0 0-.097-.249.689.689 0 0 0-.17-.19.707.707 0 0 0-.237-.126.96.96 0 0 0-.299-.044c-.285 0-.506.1-.665.302-.156.201-.234.484-.234.85v.498c0 .234.032.439.097.615a.881.881 0 0 0 .304.413.87.87 0 0 0 .519.146.967.967 0 0 0 .457-.096.67.67 0 0 0 .272-.264c.06-.11.091-.23.091-.363v-.255H8.82v-.59h1.576v.798c0 .193-.032.377-.097.55a1.29 1.29 0 0 1-.293.458 1.37 1.37 0 0 1-.495.313c-.197.074-.43.111-.697.111a1.98 1.98 0 0 1-.753-.132 1.447 1.447 0 0 1-.533-.377 1.58 1.58 0 0 1-.32-.58 2.482 2.482 0 0 1-.105-.745v-.506c0-.362.067-.678.2-.95.134-.271.328-.482.582-.633.256-.152.565-.228.926-.228.238 0 .45.033.636.1.187.066.348.158.48.275.133.117.238.253.314.407Zm-8.64-.706H0v4h.791v-1.343h.803c.287 0 .531-.057.732-.172.203-.118.358-.276.463-.475a1.42 1.42 0 0 0 .161-.677c0-.25-.053-.475-.158-.677a1.176 1.176 0 0 0-.46-.477c-.2-.12-.443-.179-.732-.179Zm.545 1.333a.795.795 0 0 1-.085.381.574.574 0 0 1-.238.24.794.794 0 0 1-.375.082H.788v-1.406h.66c.218 0 .389.06.512.182.123.12.185.295.185.521Zm1.964 2.666V13.25h.032l1.761 2.675h.656v-3.999h-.75v2.66h-.032l-1.752-2.66h-.662v4h.747Z" />
</svg>
</button>
<button type="button" class="opacity mx-2 svg-center btn btn-outline-transparent rounded-circle border-0" id="export_svg">
<svg xmlns="https://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-filetype-svg" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM0 14.841a1.13 1.13 0 0 0 .401.823c.13.108.288.192.478.252.19.061.411.091.665.091.338 0 .624-.053.858-.158.237-.105.416-.252.54-.44a1.17 1.17 0 0 0 .187-.656c0-.224-.045-.41-.135-.56a1 1 0 0 0-.375-.357 2.027 2.027 0 0 0-.565-.21l-.621-.144a.97.97 0 0 1-.405-.176.37.37 0 0 1-.143-.299c0-.156.061-.284.184-.384.125-.101.296-.152.513-.152.143 0 .266.023.37.068a.625.625 0 0 1 .245.181.56.56 0 0 1 .12.258h.75a1.092 1.092 0 0 0-.199-.566 1.21 1.21 0 0 0-.5-.41 1.813 1.813 0 0 0-.78-.152c-.293 0-.552.05-.776.15-.225.099-.4.24-.528.421-.127.182-.19.395-.19.639 0 .201.04.376.123.524.082.149.199.27.351.367.153.095.332.167.54.213l.618.144c.207.049.36.113.462.193a.387.387 0 0 1 .153.326.512.512 0 0 1-.085.29.559.559 0 0 1-.256.193c-.111.047-.249.07-.413.07-.117 0-.224-.013-.32-.04a.837.837 0 0 1-.248-.115.578.578 0 0 1-.255-.384H0Zm4.575 1.09h.952l1.327-3.999h-.879l-.887 3.138H5.05l-.897-3.138h-.917l1.339 4Zm5.483-3.293c.076.152.123.316.14.492h-.776a.797.797 0 0 0-.096-.249.689.689 0 0 0-.17-.19.707.707 0 0 0-.237-.126.963.963 0 0 0-.3-.044c-.284 0-.506.1-.664.302-.157.2-.235.484-.235.85v.497c0 .235.033.44.097.616a.881.881 0 0 0 .305.413.87.87 0 0 0 .518.146.965.965 0 0 0 .457-.097.67.67 0 0 0 .273-.263c.06-.11.09-.23.09-.364v-.254h-.823v-.59h1.576v.798c0 .193-.032.377-.096.55a1.29 1.29 0 0 1-.293.457 1.37 1.37 0 0 1-.495.314c-.198.074-.43.111-.698.111a1.98 1.98 0 0 1-.752-.132 1.447 1.447 0 0 1-.534-.377 1.58 1.58 0 0 1-.319-.58 2.482 2.482 0 0 1-.105-.745v-.507c0-.36.066-.677.199-.949.134-.271.329-.482.583-.633.256-.152.564-.228.926-.228.238 0 .45.033.635.1.188.066.348.158.48.275.134.117.238.253.314.407Z" />
</svg>
</button>
</div>
</div>
</main>
<a id="link"></a>
@ -102,4 +124,4 @@
<script src="./js/index.js"></script>
</body>
</html>
</html>

64
js/index.js
View File

@ -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
View File

@ -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'));