var pixelsPerInch = 96

var canvasWidth = 6 * pixelsPerInch

var canvasHeight = canvasWidth / pictureAspectRatio

​

var padding = 120

​

var markers = []

var maxMarkerCount = 26

​

var _faceMarkers = [[247,366],[322,351],[370,308],[376,240],[368,169],[306,117],[236,122],[198,179],[186,249],[188,318]]

var _bodyMarkers = [[4,714],[1,681],[2,643],[1,601],[2,561],[4,514],[12,472],[26,430],[55,404],[91,384],[127,367],[161,350],[187,340],[372,328],[395,348],[415,375],[448,389],[480,411],[513,426],[538,444],[568,465],[574,498],[574,539],[573,580],[573,625],[573,677]]

​

var faceMarkers = [[108,770],[163,770],[220,770],[274,770],[327,770],[380,770],[429,770],[480,770],[534,770],[583,770]]

var bodyMarkers = [[66,762],[64,708],[62,659],[63,609],[66,556],[73,507],[108,483],[145,464],[182,444],[219,428],[257,440],[288,459],[320,479],[358,486],[394,470],[420,452],[448,429],[482,454],[516,474],[555,493],[593,521],[630,551],[635,602],[634,661],[634,709],[635,762]]

​

var letters = "abcdefghijklmnopqrstuvwxyz";

var numbers = "0123456789";

​

var markerMap = {}

for (var i = 0; i < letters.length; i++) {

  var letter = letters[i]

  markerMap[letter] = bodyMarkers[i]

}

for (var j = 0; j < numbers.length; j++) {

  var number = numbers[j]

  markerMap[number] = faceMarkers[j]

}

​

var showPicture = true

​

function preload() {

  img = loadImage("./images/ktr-miniscule.jpg")

}

​

function setup() {

  createCanvas(canvasWidth + padding, canvasHeight + padding, SVG)

  angleMode(DEGREES)

  textAlign(CENTER, CENTER)

  noLoop()

}

​

function draw() {

  background(255)

  translate(padding/2, padding/2)

  drawImage()

  translate(-padding/2, -padding/2)

  drawShapes()

  drawDOB()

  drawMarkers()

}

​

function drawDOB() {

  noFill()

  stroke('black')

  drawWave(markerMap[1][0], markerMap[1][1] - 10, markerMap[9][0], markerMap[9][1] - 10, 250, 0, 180)

  drawWave(markerMap[9][0], markerMap[9][1] - 10, markerMap[7][0], markerMap[7][1] - 10, 100, 180, 360)

  drawWave(markerMap[7][0], markerMap[7][1] - 10, markerMap[6][0], markerMap[6][1] - 10, 50, 180, 360)

​

  drawWave(markerMap[2][0], markerMap[2][1] - 10, markerMap[4][0], markerMap[4][1] - 10, 100, 0, 180)

​

  drawWave(markerMap[0][0], markerMap[0][1] - 10, markerMap[7][0], markerMap[7][1] - 10, 200, 0, 180)

  fill(0)

  circle(markerMap[1][0], markerMap[1][1] - 15, 10)

  circle(markerMap[2][0], markerMap[2][1] - 15, 10)

  circle(markerMap[0][0], markerMap[0][1] - 15, 10)

}

​

function drawImage() {

  for (var gridX = 0; gridX < img.width; gridX++) {

    for (var gridY = 0; gridY < img.height; gridY++) {

      var tileWidth = (width - padding) / img.width;

      var tileHeight = (height - padding) / img.height;

      var posX = tileWidth * gridX;

      var posY = tileHeight * gridY;

​

      img.loadPixels();

      var c = color(img.get(gridX, gridY));

      var greyscale = round(

        red(c) * 0.222 + green(c) * 0.707 + blue(c) * 0.071

      );

      strokeWeight(0.75);

      var c2 = color(img.get(min(gridX + 1, img.width - 1), gridY));

      stroke(c2);

      var greyscale2 = floor(

        red(c2) * 0.222 + green(c2) * 0.707 + blue(c2) * 0.071

      );

      var d1 = map(greyscale, 0, 255, 8, 0);

      var d2 = map(greyscale2, 0, 255, 8, 0);

      line(posX - d1, posY + d1, posX + tileWidth - d2, posY + d2);

    }

  }

}

​

function drawShapes() {

  strokeWeight(0.75)

  //stroke("#817ED9")

  stroke("#F25E86")

  noFill("#F25E8660")

  drawCurve('Kalvakuntla')

  //stroke("#F2F2F2")

  stroke("#F2B705")

  noFill("#F2B70560")

  drawCurve('Taraka')

​

  //stroke("#5752D9")

  stroke("#0E7373")

  fill("#0E737360")

  drawCurve('Rama')

​

  stroke("#C6C4F2")

  fill("#C6C4F260")

  drawCurve('Rao')

}

​

function drawMarkers() {

  noStroke()

  fill(0)  

  for (var i = 0; i < faceMarkers.length; i++) {

    var x = faceMarkers[i][0]

    var y = faceMarkers[i][1]

    var numbersInDOB = "1976 07 24"

    if (numbersInDOB.includes(i)) {

      fill(0)

    } else {

      fill(180)

    }

    text(i, x, y)

  }

  for (var j = 0; j < bodyMarkers.length; j++) {

    var x = bodyMarkers[j][0]

    var y = bodyMarkers[j][1]

    var lettersInName = "Kalvakuntla Taraka Rama Rao".toLowerCase()

    if (lettersInName.includes(char(97 + j))) {

      fill(0)

    } else {

      fill(180)

    }

    text(char(97 + j), x, y)

  }  

}

​

function drawString(wordString, directionString) {

  var words = wordString.toLowerCase().split(" ")

  var directions = directionString.split(" ")

  for (var i = 0; i < words.length; i++) {

    var word = words[i].split("")

    for (var j = 0; j < word.length - 1; j++) {

      var fromLetter = word[j]

      var toLetter = word[j + 1]

      var fromX = markerMap[fromLetter][0]

      var fromY = markerMap[fromLetter][1]

      var toX = markerMap[toLetter][0]

      var toY = markerMap[toLetter][1]

      if (directions[i][j] === "0") {

        drawWaves(fromX, fromY, toX, toY, 200, 0, 180)

      }

      if (directions[i][j] === "1") {

        drawWaves(fromX, fromY, toX, toY, 200, 180, 360)

      }

    }

  }

}

​

function drawCurve(wordString) {

  var words = wordString.toLowerCase().split(" ")

  for (var i = 0; i < words.length; i++) {

    var word = words[i].split("")

    beginShape(TRIANGLE_STRIP)

    for (var j = 0; j < word.length; j++) {

      var letter = word[j]

      var letterX = markerMap[letter][0]

      var letterY = markerMap[letter][1]

      curveVertex(letterX, letterY)

    }

    endShape()

  }    

}

​

function drawWave(startX, startY, endX, endY, h, startAngle, endAngle) {

  var centerX = (startX + endX)/2

  var centerY = (startY + endY)/2

  var theta = Math.atan2(startY - endY, startX - endX) * 180 / Math.PI

  var w = dist(startX, startY, endX, endY)

  push()

  translate(centerX, centerY)

  rotate(theta)

  beginShape()

  curveVertex(w / 2 * cos(startAngle), h / 2 * sin(startAngle))

  for (var angle = startAngle; angle <= endAngle; angle += 10) {

    if (angle == startAngle || angle == endAngle) {

      var x = w / 2 * cos(angle)

      var y = h / 2 * sin(angle)

​

      curveVertex(x, y)

    } else {

      var x = (w / 2) * cos(angle)

      var y = (h / 2) * sin(angle)

​

      curveVertex(x, y)

    }

  }

  curveVertex(w / 2 * cos(endAngle), h / 2 * sin(endAngle))

  endShape()

  pop()

}

​

​

function drawWaves(startX, startY, endX, endY, h, startAngle, endAngle) {

  var centerX = (startX + endX)/2

  var centerY = (startY + endY)/2

  var theta = Math.atan2(startY - endY, startX - endX) * 180 / Math.PI

  var w = dist(startX, startY, endX, endY)

  push()

  translate(centerX, centerY)

  rotate(theta)

  for (var arcH = h - 24; arcH <= h + 24; arcH += 2) {

    beginShape()

    curveVertex(w / 2 * cos(startAngle), arcH / 2 * sin(startAngle))

    for (var angle = startAngle; angle <= endAngle; angle += 10) {

      if (angle == startAngle || angle == endAngle) {

        var x = w / 2 * cos(angle)

        var y = arcH / 2 * sin(angle)

​

        curveVertex(x, y)

      } else {

        var nangle = map(angle, startAngle, endAngle, 0, 10)

        var nheight = map(arcH, h - 30, h + 30, 0, 10)

​

        var nx = map(w / 2, 0, width, 0, 10)

        var ny = map(h / 2, 0, height, 0, 10)

​

        var n = noise(nangle, nheight)

​

        var x = (w / 2 + 10 * n) * cos(angle)

        var y = (arcH / 2 + 10 * n) * sin(angle)

​

        curveVertex(x, y)

      }

    }

    curveVertex(w / 2 * cos(endAngle), arcH / 2 * sin(endAngle))

    endShape()

  }

  pop()  

}

​

function mousePressed() {

  if (markers.length < maxMarkerCount) {

    if (mouseX < width && mouseX > 0 && mouseY < height && mouseY > 0) {

      markers.push([parseInt(mouseX), parseInt(mouseY)])

    }

  }

}

​

function keyPressed() {

  if (keyCode === 83) { // 's'how

    save("artwork", "svg")

  }

  if (keyCode === 90) { // 'z', undo

    markers.pop()

  }

  if (keyCode === 68) { // 'd'one

    console.log(JSON.stringify(markers, null, 2))

  }

}

​