add matrix size feature

filipeedr · Jun 20, 2023 · 2934ecd · 2934ecd
1 parent e930314
commit 2934ecd
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -1 +1 @@
-<!doctype html><html lang=en xmlns=http://www.w3.org/1999/xhtml xmlns:fb=http://ogp.me/ns/fb# prefix="og: https://ogp.me/ns#"><meta charset=UTF-8><meta name=viewport content="width=device-width,shrink-to-fit=0,user-scalable=no,minimum-scale=1,maximum-scale=1"><title>Durves - Pattern Design Tool</title><meta name=description content="A tool for creating and exporting dot patterns for graphic designers, ui/ux and other visual professionals."><meta property=og:type content=website><meta property=og:title content="Durves - Pattern Design Tool"><meta property=og:description content="A tool for creating and exporting dot patterns for graphic designers, ui/ux and other visual professionals."><meta property=og:url content=https://filipeedr.github.io/durves/public><meta property=og:image content=../src/assets/ogImage.png><link rel=icon type=image/x-icon href=../src/assets/durves-icon.ico><link rel=stylesheet href=../src/style.css><!-- Google tag (gtag.js) --><script async src="https://www.googletagmanager.com/gtag/js?id=G-TJRKHH4Z69"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-TJRKHH4Z69")</script><section class=leftSide><div class=inputs><header><img class=logo src=../src/assets/durves-logo.svg> <a href=https://github.com/filipeedr/durves target=_blank><img class=githubLogo src=../src/assets/github.svg></a></header><div class=inputSlider><div class=labelSlider><div class=label><img class=inputIcons src=../src/assets/size.svg alt="dot radius icon"> <label>Dot radius</label></div><label><span id=valueRoundSize></span></label></div><input type=range min=1 max=5 step=0.1 value=3 id=roundSizeSlider alt="Dot radius slider"></div><div class=inputSlider><div class=labelSlider><div class=label><img class=inputIcons src=../src/assets/amplitude.svg alt="amplitude icon"> <label>Amplitude</label></div><label><span id=valueAmplitude></span></label></div><input type=range min=-150 max=150 step=0.1 value=60 id=amplitudeSlider alt="Amplitude slider"></div><div class=inputSlider><div class=labelSlider><div class=label><img class=inputIcons src=../src/assets/waves.svg alt="waves icon"> <label>Waves</label></div><label><span id=valueWaves></span></label></div><input type=range min=-10 max=10 step=0.1 value=1.8 id=wavesSlider alt="Wave slider"></div><div class=inputSlider><div class=labelSlider><div class=label><img class=inputIcons src=../src/assets/frequency.svg alt="frequency icon"> <label>Frequency</label></div><label><span id=valueFrequency></span></label></div><input type=range min=0 max=0.005 step=0.0001 value=0.0009 id=frequencySlider alt="Frequency slider"></div></div><footer><div class=buttons><button class=iconButton id=restartSettings><img src=../src/assets/refresh.svg alt="refresh icon"></button> <button id=downloadDurves>Download</button></div><div class=credits><p>Design & Code by <a href=https://twitter.com/filipeedr target=_blank>Filipe Esteves</a> <img src=../src/assets/heart.svg alt="heart icon"><a href="https://www.paypal.com/donate/?business=MMWWS4LFHDUWG&no_recurring=0&item_name=Thank+you+for+your+donation+%3A%29&currency_code=USD" target=_blank>Donate?</a>:)</div></footer></section><section><script src=index.js></script></section>
+<!doctype html><html lang=en xmlns=http://www.w3.org/1999/xhtml xmlns:fb=http://ogp.me/ns/fb# prefix="og: https://ogp.me/ns#"><meta charset=UTF-8><meta name=viewport content="width=device-width,shrink-to-fit=0,user-scalable=no,minimum-scale=1,maximum-scale=1"><title>Durves - Pattern Design Tool</title><meta name=description content="A tool for creating and exporting dot patterns for graphic designers, ui/ux and other visual professionals."><meta property=og:type content=website><meta property=og:title content="Durves - Pattern Design Tool"><meta property=og:description content="A tool for creating and exporting dot patterns for graphic designers, ui/ux and other visual professionals."><meta property=og:url content=https://filipeedr.github.io/durves/public><meta property=og:image content=../src/assets/ogImage.png><link rel=icon type=image/x-icon href=../src/assets/durves-icon.ico><link rel=stylesheet href=../src/style.css><!-- Google tag (gtag.js) --><script async src="https://www.googletagmanager.com/gtag/js?id=G-TJRKHH4Z69"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-TJRKHH4Z69")</script><section class=leftSide><div class=inputs><header><img class=logo src=../src/assets/durves-logo.svg> <a href=https://github.com/filipeedr/durves target=_blank><img class=githubLogo src=../src/assets/github.svg></a></header><div class=inputSlider><div class=labelSlider><div class=label><img class=inputIcons src=../src/assets/matrixSize.svg alt="matrix icon"> <label>Matrix</label></div><label><span id=valueMatrixSize></span></label></div><input type=range min=16 max=152 step=8 value=64 id=matrixSizeSlider alt="Matrix size slider"></div><div class=inputSlider><div class=labelSlider><div class=label><img class=inputIcons src=../src/assets/size.svg alt="dot radius icon"> <label>Dot radius</label></div><label><span id=valueRoundSize></span></label></div><input type=range min=1 max=5 step=0.1 value=3 id=roundSizeSlider alt="Dot radius slider"></div><div class=inputSlider><div class=labelSlider><div class=label><img class=inputIcons src=../src/assets/amplitude.svg alt="amplitude icon"> <label>Amplitude</label></div><label><span id=valueAmplitude></span></label></div><input type=range min=-150 max=150 step=0.1 value=60 id=amplitudeSlider alt="Amplitude slider"></div><div class=inputSlider><div class=labelSlider><div class=label><img class=inputIcons src=../src/assets/waves.svg alt="waves icon"> <label>Waves</label></div><label><span id=valueWaves></span></label></div><input type=range min=-10 max=10 step=0.1 value=1.8 id=wavesSlider alt="Wave slider"></div><div class=inputSlider><div class=labelSlider><div class=label><img class=inputIcons src=../src/assets/frequency.svg alt="frequency icon"> <label>Frequency</label></div><label><span id=valueFrequency></span></label></div><input type=range min=0 max=0.005 step=0.0001 value=0.0009 id=frequencySlider alt="Frequency slider"></div></div><footer><div class=buttons><button class=iconButton id=restartSettings><img src=../src/assets/refresh.svg alt="refresh icon"></button> <button id=downloadDurves>Download</button></div><div class=credits><p>Design & Code by <a href=https://twitter.com/filipeedr target=_blank>Filipe Esteves</a> <img src=../src/assets/heart.svg alt="heart icon"><a href="https://www.paypal.com/donate/?business=MMWWS4LFHDUWG&no_recurring=0&item_name=Thank+you+for+your+donation+%3A%29&currency_code=USD" target=_blank>Donate?</a>:)</div></footer></section><section><script src=index.js></script></section>
diff --git a/index.js b/index.js
diff --git a/index.js.map b/index.js.map
diff --git a/src/assets/abstract.gif b/src/assets/abstract.gif
diff --git a/src/assets/matrixSize.svg b/src/assets/matrixSize.svg
diff --git a/src/index.html b/src/index.html
@@ -29,6 +29,16 @@
             <img class="logo" src="../src/assets/durves-logo.svg">
             <a href="https://github.com/filipeedr/durves" target="_blank"><img class="githubLogo" src="../src/assets/github.svg"></a>
           </header>
+          <div class="inputSlider">
+            <div class="labelSlider">
+              <div class="label">
+                <img class="inputIcons" src="../src/assets/matrixSize.svg" alt="matrix icon">
+                <label>Matrix</label>
+              </div>
+              <label><span id="valueMatrixSize"></span></label>
+            </div>
+            <input type="range" min="16" max="152" step="8" value="64" id="matrixSizeSlider" alt="Matrix size slider"> 
+          </div>
           <div class="inputSlider">
             <div class="labelSlider">
               <div class="label">

diff --git a/src/index.js b/src/index.js
@@ -1,30 +1,30 @@
-import {readRoundSize, readAmplitude, readWaves, readFrequency} from './inputReadFunctions.js';
+import {readMatrixSize, readRoundSize, readAmplitude, readWaves, readFrequency} from './inputReadFunctions.js';
 import {canvasSettings, userSettings} from './settings.js';
 
 const canvasSketch = require("canvas-sketch");
 const random = require("canvas-sketch-util/random");
 
 let canva;
 
+let points = [];
+
 const sketch = ({ width, height, exportFrame }) => {
 
-  const cols = userSettings.cols;
-  const rows = userSettings.rows;
-  const numCells = cols * rows;
+  let cols = userSettings.cols;
+  let rows = userSettings.rows;
+  let numCells = cols * rows;
 
   const gridWidth = width * userSettings.size;
   const gridHeight = width * userSettings.size;
 
-  const cellWidth = gridWidth / cols;
-  const cellHeight = gridHeight / rows;
+  let cellWidth = gridWidth / cols;
+  let cellHeight = gridHeight / rows;
 
-  const positionX = (width - gridWidth) * 0.5;
-  const positionY = (height - gridHeight) * 0.5;
+  let positionX = (width - gridWidth) * 0.5;
+  let positionY = (height - gridHeight) * 0.5;
 
   let x, y, noise;
 
-  let points = [];
-
   const drawPoints = () => {
     for (let i = 0; i < numCells; i++) {
       x = (i % cols) * cellWidth;
@@ -36,6 +36,20 @@ const sketch = ({ width, height, exportFrame }) => {
     }
   };
 
+  document.getElementById("matrixSizeSlider").addEventListener("input", (e) => {
+    cols = Number(readMatrixSize());
+    rows = Number(readMatrixSize());
+
+    numCells = cols * rows;
+
+    cellWidth = gridWidth / cols;
+    cellHeight = gridHeight / rows;
+
+    points = []
+
+    canva.update()
+  });
+
   document.getElementById("frequencySlider").addEventListener("input", (e) => {
       userSettings.frequency = readFrequency();
       points = []

diff --git a/src/inputReadFunctions.js b/src/inputReadFunctions.js
@@ -1,3 +1,16 @@
+export const readMatrixSize = () => {
+  var slider = document.getElementById("matrixSizeSlider");
+  var output = document.getElementById("valueMatrixSize");
+
+  output.innerHTML = slider.value + " x " + slider.value;
+
+  slider.oninput = function () {
+    output.innerHTML = this.value;
+  };
+
+  return slider.value;
+};
+
 export const readRoundSize = () => {
   var slider = document.getElementById("roundSizeSlider");
   var output = document.getElementById("valueRoundSize");

diff --git a/src/settings.js b/src/settings.js
@@ -1,4 +1,4 @@
-import {readRoundSize, readAmplitude, readWaves, readFrequency} from './inputReadFunctions.js';
+import {readMatrixSize, readRoundSize, readAmplitude, readWaves, readFrequency} from './inputReadFunctions.js';
 
 export const canvasSettings = {
   dimensions: [4320, 4320],
@@ -9,12 +9,13 @@ export const canvasSettings = {
 };
 
 export const userSettings = {
-  cols: 150,
-  rows: 150,
+  cols: readMatrixSize(),
+  rows: readMatrixSize(),
   size: 0.85,
   position: 0.5,
   roundSize: readRoundSize(),
   amplitude: readAmplitude(),
   waves: readWaves(),
-  frequency: readFrequency()
-};
+  frequency: readFrequency(),
+};
+