Current dev state

js/index.js

@@ -25,8 +25,8 @@ let globalConfig = { // Initial config object including initial values. ONLY STA
 }
 
 const targetCanvas = document.getElementById('pattern');
-let colorPaternsElX = $("#color-patterns-x");
-let colorPaternsElY = $("#color-patterns-y");
+let colorPatternsElX = $("#color-patterns-x");
+let colorPatternsElY = $("#color-patterns-y");
 
 const colorpatterns = {
 	YlGn: ['#ffffe5', '#f7fcb9', '#d9f0a3', '#addd8e', '#78c679', '#41ab5d', '#238443', '#006837', '#004529'],
@@ -67,7 +67,9 @@ const colorpatterns = {
 	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
+let selectedColorPatternX = generateRandColor(); // get random init colors
+let selectedColorPatternY = null;//generateRandColor(); // get random init colors
+
 let pattern = null;
 let seed = null;
 let colorFunctionUsr = null;
@@ -129,8 +131,8 @@ function generateCanvas(targetCanvas) {
 	const options = {
 		width: usrWidth,
 		height: usrHeight,
-		xColors: colorpatterns[selectedColorPattern],
-		yColors: 'match',
+		xColors: colorpatterns[selectedColorPatternX],
+		yColors: colorpatterns[selectedColorPatternY] || 'match',
 		cellSize: 255 * usrCell,
 		variance: usrVar,
 		seed: seed,
@@ -153,36 +155,46 @@ function generateCanvas(targetCanvas) {
 }
 
 function generateColorPatterns() {
-	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);
-		});
-
-		colorPaternsElX.append(liEl);
+	const create = (xory) => {
+		let div = document.createElement('div');
+		for (const pattern in colorpatterns) {
+			const liEl = document.createElement('li');
+			liEl.id = `colorpattern-${xory}`;
+			liEl.classList.add(`colorpattern-${xory}-${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);
+			});
+			div.appendChild(liEl);
+			
+		}
+		return div;
 	}
 
-	updateActiveColor(document.querySelector(`.colorpattern-${selectedColorPattern}`));
+	const x = create("x");
+	colorPatternsElX.append(x);
+	const y = create("y");
+	colorPatternsElY.append(y);
+
+	updateActiveColor(document.querySelector(`.colorpattern-x-${selectedColorPatternX}`));
+	updateActiveColor(document.querySelector(`.colorpattern-y-${selectedColorPatternY}`));
 }
 
 function updateActiveColor(activeItem) {
-	const actives = document.querySelectorAll('#colorpattern.active');
+	/*const actives = document.querySelectorAll('#colorpattern.active');
 	actives.forEach(item => item.classList.remove('active'));
-	activeItem.classList.add('active');
+	activeItem.classList.add('active');*/
 }
 
 function getRandomColor() {
@@ -227,9 +239,16 @@ $('#export_png').on('click', () => {
 });
 
 // == listen on click on colors
-colorPaternsElX.on('click', (e) => {
+colorPatternsElX.on('click', (e) => {
 	if (e.target.parentNode.dataset.name) {
-		selectedColorPattern = e.target.parentNode.dataset.name;
+		selectedColorPatternX = e.target.parentNode.dataset.name;
+		updateActiveColor(e.target.parentNode);
+		pattern = generateCanvas(targetCanvas);
+	}
+});
+colorPatternsElY.on('click', (e) => {
+	if (e.target.parentNode.dataset.name) {
+		selectedColorPatternY = e.target.parentNode.dataset.name;
 		updateActiveColor(e.target.parentNode);
 		pattern = generateCanvas(targetCanvas);
 	}
@@ -241,8 +260,10 @@ $('#generate_seed').on('click', () => {
 });
 
 $('#generate_color').on('click', () => {
-	selectedColorPattern = generateRandColor();
-	updateActiveColor(document.querySelector(`.colorpattern-${selectedColorPattern}`));
+	selectedColorPatternX = generateRandColor();
+	selectedColorPatternY = generateRandColor();
+	updateActiveColor(document.querySelector(`.colorpattern-x-${selectedColorPatternX}`));
+	updateActiveColor(document.querySelector(`.colorpattern-y-${selectedColorPatternY}`));
 	pattern = generateCanvas(targetCanvas);
 });
 
@@ -265,7 +286,7 @@ 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);
+		colorpatterns[`random-${i}-${j}`] = generateRandomColorArray(i);
 	}
 }
 

js/resolutions.json

@@ -0,0 +1,45 @@
+{
+    "resolutions": [
+        {
+            "name": "1:1",
+            "x": "512",
+            "y": "512"
+        },
+        {
+            "name": "1:1",
+            "x": "1024",
+            "y": "1024"
+        },
+        {
+            "name": "1:1",
+            "x": "2048",
+            "y": "2048"
+        },
+        {
+            "name": "1:1",
+            "x": "4096",
+            "y": "4096"
+        },
+        {
+            "name": "8K Fulldome",
+            "x": "8192",
+            "y": "8192"
+        },
+
+        {
+            "name": "16:9",
+            "x": "1920",
+            "y": "1080"
+        },
+        {
+            "name": "QWXGA",
+            "x": "2048",
+            "y": "2252"
+        },
+        {
+            "name": "",
+            "x": "2560",
+            "y": "1440"
+        }
+    ]
+}