update: readme

luigir-it · Sep 19, 2022 · a1e15a4 · a1e15a4
1 parent c3213b6
commit a1e15a4
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 92 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,17 @@
 # Image2Dice
+This script will allow you to convert your images to a dice art.
 
+Choose your image from your PC then select a "Horizontal Dice Count" from the list.
 
 [Live Demo](https://ilyasbilgihan.github.io/Image2Dice/)
+
+
+## Examples
+#### Mustafa Kemal Atatürk
+![Mustafa Kemal Atatürk](/example/mka.png)
+
+#### Paul Walker
+![Paul Walker](/example/pw.png)
+
+#### John Wick
+![John Wick](/example/jw.png)
diff --git a/example/jw.png b/example/jw.png
diff --git a/example/mka.png b/example/mka.png
diff --git a/example/pw.png b/example/pw.png
diff --git a/index.html b/index.html
@@ -10,23 +10,22 @@
 <body>
 
   <div>
+    <input type="file" onChange="openModal(window.URL.createObjectURL(this.files[0]))">
+    <br>
     <label for="">
-      <span>Horizontal Dice Count</span>
-      <input type="number" id="diceCount" value="80">
+      <span>Horizontal Dice Count: </span>
+      <select id="possibleDiceCounts">
+        <option value="">No Option Available</option>
+      </select>
     </label>
+    <br>
+    <button onClick="startProcess()">Calculate</button>
+    <br>
     <div class="info">
       <div id="verticalDiceCount"></div>
       <div id="totalDiceCount"></div>
       <a class="download" href=""></a>
     </div>
-    <br>
-    <input type="file" onChange="openModal(window.URL.createObjectURL(this.files[0]))">
-    <br>
-    <br>
-    <h2>Examples</h2>
-    <button onClick="setExample(1)">John Wick</button>
-    <button onClick="setExample(2)">Paul Walker</button>
-    <button onClick="setExample(3)">Mustafa Kemal</button>
     <div class="prev">
       <img src="" alt="">
       <canvas id="grayscale"></canvas>

diff --git a/main.js b/main.js
@@ -1,93 +1,117 @@
-var image, url, diceSize, pixels, HORIZONTAL_DICE_COUNT = 80;
+var image, canvas, ctx, url, img, diceSize, pixels, HORIZONTAL_DICE_COUNT = 80;
 var diceData = [];
 var res = document.querySelector("#result");
-var diceInput = document.querySelector("#diceCount")
-
+var options = document.querySelector("#possibleDiceCounts")
 
 function openModal(url){
+  options.innerHTML = ""
+  document.querySelector("#verticalDiceCount").innerText = "";
+  document.querySelector("#totalDiceCount").innerText = "";
+  document.querySelector(".download").innerHTML = "";
   res.innerHTML = ""
-  diceData = []
+
+  if (ctx){
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  }
 
   let uploadedImage = document.querySelector("img")
   uploadedImage.src = url
-  let img = new Image()
+  img = new Image()
   img.src = url
 
   img.onload = function(){
-    let canvas = document.querySelector("canvas#grayscale");
-    let ctx = canvas.getContext("2d");
-    HORIZONTAL_DICE_COUNT = diceInput.value;
 
-    diceSize = parseInt(img.width / HORIZONTAL_DICE_COUNT);
-    canvas.width = img.width;
-    canvas.height = img.height;
+    let possibilities = commDivs(img.width, img.height).map(i=>img.width/i).sort((a,b)=>a-b)
+    possibilities.forEach(item=>{
+      let option = document.createElement("option")
+      option.value = item
+      option.innerHTML = item
+      options.appendChild(option)
+    })
 
-    if(diceSize != (img.width / HORIZONTAL_DICE_COUNT)){
-      alert("Dice count is not a divisor of your image width")
-      return
-    }
-    if(img.height % diceSize != 0){
-      alert("Dice count is not a divisor of your image height")
-      return
-    }
+
+  }
+
+
+}
+
+function startProcess() {
+
+  res.innerHTML = ""
+  diceData = []
+
+  if(!img){
+    alert("Please upload an image")
+    return
+  }
+  if(!options.value){
+    alert("Please select a dice count")
+    return
+  }
+
+  HORIZONTAL_DICE_COUNT = parseInt(options.value)
+  diceSize = parseInt(img.width / HORIZONTAL_DICE_COUNT)
+
+  canvas = document.querySelector("canvas#grayscale");
+  ctx = canvas.getContext("2d");
+
+  canvas.width = img.width;
+  canvas.height = img.height;
+
+
+  ctx.drawImage(img, 0, 0, img.width, img.height);
+  let imgData = ctx.getImageData(0, 0, img.width, img.height);
+  pixels = imgData.data;
+
+  for (var i = 0; i < pixels.length; i += 4 ) {
 
-    ctx.drawImage(img, 0, 0, img.width, img.height);
-    let imgData = ctx.getImageData(0, 0, img.width, img.height);
-    pixels = imgData.data;
+    let lightness = parseInt((pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3);
+
+    pixels[i] = lightness;
+    pixels[i + 1] = lightness;
+    pixels[i + 2] = lightness;
 
-    for (var i = 0; i < pixels.length; i += 4 ) {
-
-      let lightness = parseInt((pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3);
-
-      pixels[i] = lightness;
-      pixels[i + 1] = lightness;
-      pixels[i + 2] = lightness;
-
-    }
-    ctx.putImageData(imgData, 0, 0);
+  }
+  ctx.putImageData(imgData, 0, 0);
+
+  for(var y = 0; y < parseInt(img.height / diceSize); y++ ){
 
-    for(var y = 0; y < parseInt(img.height / diceSize); y++ ){
-
-      let line = []
-
-      for(var x = 0; x < HORIZONTAL_DICE_COUNT; x++ ){
-        let topLeft = getIndexOfDice(x, y)
-        let avg = calculateAvgColor(topLeft)
-        line.push(parseInt(avg * 6 / 255) + 1)
-      }
-
-      diceData.push(line)
-
+    let line = []
+
+    for(var x = 0; x < HORIZONTAL_DICE_COUNT; x++ ){
+      let topLeft = getIndexOfDice(x, y)
+      let avg = calculateAvgColor(topLeft)
+      line.push(parseInt(avg * 6 / 255) + 1)
     }
-
-    ctx.putImageData(imgData, 0, 0);
-    let downloadArr = {}
-
-    document.querySelector("#verticalDiceCount").innerText = "Vertical Dice Count: " + diceData.length
-    document.querySelector("#totalDiceCount").innerText = "Total Dice Count: " + diceData.length * HORIZONTAL_DICE_COUNT
-    res.style.gridTemplateColumns = "repeat(" + HORIZONTAL_DICE_COUNT + ", 1fr)"
-    diceData.forEach((line, y) => {
-      line.forEach((dice, x) => {
-        let d = document.createElement("img")
-        d.style.width = `calc(50vw / ${HORIZONTAL_DICE_COUNT})` 
-        d.style.height = `calc(50vw / ${HORIZONTAL_DICE_COUNT})` 
-
-        d.src = `./dice/${dice}.png`
-        downloadArr[y + 1] ? downloadArr[y + 1].push(x + 1 + ": " + dice) : downloadArr[y + 1] = [x + 1 + ": " + dice]
-        res.append(d)
-
-      })
-    })
 
-    var downloadData = document.querySelector(".download")
-    downloadData.download = "dice-data.json"; 
-    downloadData.href = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(downloadArr));
-    downloadData.innerHTML = "Download Dice Data";
+    diceData.push(line)
 
-
   }
+
+  ctx.putImageData(imgData, 0, 0);
+  let downloadArr = {}
+
+  document.querySelector("#verticalDiceCount").innerText = "Vertical Dice Count: " + diceData.length
+  document.querySelector("#totalDiceCount").innerText = "Total Dice Count: " + diceData.length * HORIZONTAL_DICE_COUNT
+  res.style.gridTemplateColumns = "repeat(" + HORIZONTAL_DICE_COUNT + ", 1fr)"
+  diceData.forEach((line, y) => {
+    line.forEach((dice, x) => {
+      let d = document.createElement("img")
+      d.style.width = `calc(50vw / ${HORIZONTAL_DICE_COUNT})` 
+      d.style.height = `calc(50vw / ${HORIZONTAL_DICE_COUNT})` 
+
+      d.src = `./dice/${dice}.png`
+      downloadArr[y + 1] ? downloadArr[y + 1].push(x + 1 + ": " + dice) : downloadArr[y + 1] = [x + 1 + ": " + dice]
+      res.append(d)
+
+    })
+  })
 
-
+
+  var downloadData = document.querySelector(".download")
+  downloadData.download = "dice-data.json"; 
+  downloadData.href = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(downloadArr));
+  downloadData.innerHTML = "Download Dice Data";
 }
 
 function getIndexOfDice(x, y){
@@ -121,17 +145,29 @@ function calculateAvgColor(topLeft){
 }
 
 
-function setExample(id){
-  if(id == 1){
-    diceInput.value = 72
-    openModal("./example/1.jpg")
-  }
-  if(id == 2){
-    diceInput.value = 80
-    openModal("./example/2.webp")
-  }
-  if(id == 3){
-    diceInput.value = 80
-    openModal("./example/3.jpg")
+
+function gcd(a, b){
+  if (a == 0)
+    return b;
+
+  return gcd(b % a, a);
+}
+
+function commDivs(a, b){
+  let n = gcd(a, b);
+
+  let result = [];
+  for (let i = 1; i <= Math.sqrt(n); i++) {
+
+    if (n % i == 0) {
+      if (n / i == i){
+        result.push(i)
+      }
+      else{
+        result.push(n/i)
+        result.push(i)
+      }
+    }
   }
+  return result;
 }
diff --git a/style.css b/style.css
@@ -19,4 +19,4 @@
 
 .prev > * {
   width: 100%;
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,4 +19,4 @@ @@
     .prev > * {
       width: 100%;
-    }
+    }