let scl = 0.3;

// change scl to 0.3

let size;

let noOfBindis = 3;

let block;

let mode;

let numnum = 0;

let rads = [];

let bigrads = 0;

​

function preload() {

  // img = loadImage("Skull.png");

  // img = loadImage("gandhiji.png");

  // img = loadImage("Gandhiji.png");

  // img = loadImage("woman.png");

  // img = loadImage("Monkey.png");

  // img = loadImage("Sandeep.png");

  img = loadImage("Frame 1.png");

  img1 = loadImage("iitgn_logo.png");

}

​

function setup() {

  frameRate(1);

  let cnv = createCanvas((w = 2478 * scl), (h = 3504 * scl));

  cnv.position(300, 0);

​

  img.resize(img.width <= img.height ? w : 0, img.width > img.height ? w : 0);

  img.loadPixels();

  img.updatePixels();

​

  settings = QuickSettings.create(0, 0, "Settings");

  settings.setWidth(300);

​

  settings.addHTML(

    "Choose Image",

    "<input accept='.png, .jpg, .jpeg' type='file' id='upload' onchange='handleFile()'/>"

  );

  settings.addDropDown("Sizes", [5, 4, 3, 2, 1], restart);

  settings.addDropDown("Max Size", [30, 40, 50, 60], restart);

  settings.addDropDown("Output", ["Bindis", "Sizes"], restart);

  settings.addBoolean("Fill", 1, restart);

  settings.addButton("Export", exportA4);

  settings.overrideStyle("Export", "width", "280px");

  settings.overrideStyle("Export", "background-color", "#000000");

  settings.overrideStyle("Export", "color", "white");

​

  textAlign(CENTER, CENTER);

}

​

function draw() {

  background(255);

  img1.resize(100, 100);

  image(img1, 10, 10);

​

  textSize(16);

  text("CCL, IIT Gandhinagar", 200, 60);

​

  push();

  translate(0, 150);

  makeBindiArt();

  pop();

  bigrads = 0;

​

  // console.log(numnum);

  numnum = 0;

  noLoop();

}

​

function makeBindiArt() {

  img.resize(img.width <= img.height ? w : 0, img.width > img.height ? w : 0);

  // img = img.get(0, 0, w, w);

  img.loadPixels();

  img.updatePixels();

​

  size = int(settings.getValue("Max Size").value) * scl;

  // change size back to 60

  noOfBindis = int(settings.getValue("Sizes").value);

  block = size / (noOfBindis + 1);

​

  let bindiSizeCount = [];

​

  //---------------------------------------------------------//

  //---------------------👇🏼SUB-FUNCTIONS👇🏼---------------------//

  //---------------------------------------------------------//

​

  //   let decideRadd = function (oldRad, noOfBindis) {

  //     let newRad;

  //     let block = size / (noOfBindis + 1);

  //     for (let i = 0; i < noOfBindis + 1; i++) {

  //       if (oldRad >= i * block && oldRad < (i + 1) * block) {

  //         newRad = i * block;

  //         break;

  //       } else {

  //         newRad = i * block;

  //       }

  //     }

  //     return newRad;

  //   };

​

  let drawBindis = function (x, y, rad) {

    settings.showControl("Fill");

    if (settings.getValue("Fill") == 1) {

      fill(255, 0, 0);

    }

    circle(x + size / 2, y + size / 2, rad);

    stroke(255, 0, 0);

  };

​

  let drawText = function (x, y, rad) {

    noStroke();

    settings.hideControl("Fill");

    fill(255, 0, 0);

    if (rad != 0) {

      textSize(8);

      text(rad / block, x + size / 2, y + size / 2);

    }

  };

​

  let giveMeRad = function (indx) {

    let r = img.pixels[indx + 0];

    let g = img.pixels[indx + 0];

    let b = img.pixels[indx + 0];

​

    let bright = floor(0.3 * r + 0.59 * g + 0.11 * b);

    let rad = map(bright, 255, 0, 0, size);

    let newRad;

    let block = size / (noOfBindis + 1);

    for (let i = 0; i < noOfBindis + 1; i++) {

      if (rad >= i * block && rad < (i + 1) * block) {

        newRad = i * block;

        break;

      } else {

        newRad = i * block;

      }

    }

    return newRad;

  };

​

  //---------------------------------------------------------//

  //---------------------👆🏼SUB-FUNCTIONS👆🏼---------------------//

  //---------------------------------------------------------//

​

  let cols = img.width / size;

  let rows = img.height / size;

  let cells = cols * rows;

​

  for (let starty = 0; starty < img.height; starty += 1 * size) {

    for (let startx = 0; startx < img.width; startx += 1 * size) {

      let index = (startx + starty * img.width) * 4;

      let rad = giveMeRad(index);

      rads.push(rad);

      if (rad > ((noOfBindis - 1) * size) / (noOfBindis + 1)) {

        bigrads++;

      }

    }

  }

​

  for (let starty = 0; starty < img.height; starty += 1 * size) {

    for (let startx = 0; startx < img.width; startx += 1 * size) {

      let index = (startx + starty * img.width) * 4;

      // let indexRight = (startx + size + starty * img.width) * 4;

      // let indexBottom = (startx + (starty + size) * img.width) * 4;

      // let indexDiag = (startx + size + (starty + size) * img.width) * 4;

​

      let rad = giveMeRad(index);

      let sizeNo = rad / block;

      bindiSizeCount.push(sizeNo + 1);

      // let radRight = giveMeRad(indexRight);

      // let radBottom = giveMeRad(indexBottom);

      // let radDiag = giveMeRad(indexDiag);

​

      mode = settings.getValue("Output").value;

​

      if (mode == "Sizes") {

        drawText(startx, starty, rad);

      } else {

        drawBindis(startx, starty, rad);

        /*

        if (rad < ((noOfBindis - 1) * size) / (noOfBindis + 1)) {

          drawBindis(startx, starty, rad);

        } else {

          if (numnum<500 && random(1)<400/bigrads) {

            numnum++

            drawText(startx, starty, rad);

          } else {

            drawBindis(startx, starty, rad);

          }

        }

        */

      }

    }

  }

​

  for (let j = 1; j < noOfBindis + 1; j++) {

    fill(255, 0, 0);

    circle(j * 30, h - 200, (j * size) / (noOfBindis + 1));

    noStroke();

    textSize(16);

    text(j, j * 30, h - 180);

  }

  textSize(16);

  text(numnum + " Bindis required", w - 100, h - 200);

  console.log(`size 1: ${bindiSizeCount.filter((x) => x == 1).length}, 

size 2: ${bindiSizeCount.filter((x) => x == 2).length}, 

size 3: ${bindiSizeCount.filter((x) => x == 3).length}, 

size 4: ${bindiSizeCount.filter((x) => x == 4).length}, 

size 5: ${bindiSizeCount.filter((x) => x == 5).length}`);

}

​

function restart() {

  loop();

}

​

function exportA4() {

  let c = get();

  c.resize(2478, 0);

  c.save("photo", "png");

}

​

function handleFile(file) {

  const selectedFile = document.getElementById("upload");

  const myImageFile = selectedFile.files[0];

  let urlOfImageFile = URL.createObjectURL(myImageFile);

  img = loadImage(urlOfImageFile);

​

  loop();

  restart();

}

​