var nameInput, dateInput, monthInput, urlInput;

var qrcode;

​

var monthColors = [

  'rgb(184,  50,  53)', // Jan,  1, #b83235

  'rgb(221,  77, 139)', // Feb,  2, #dd4d8b

  'rgb(179, 132, 185)', // Mar,  3, #b384b9

  'rgb(243, 182, 112)', // Apr,  4, #f3b670

  'rgb( 35,  24, 109)', // May,  5, #23186d

  'rgb( 56, 109, 194)', // Jun,  6, #386dc2

  'rgb(137, 176, 208)', // Jul,  7, #89b0d0

  'rgb(188, 220, 120)', // Aug,  8, #bcdc78

  'rgb(236, 134, 119)', // Sep,  9, #ec8677 

  'rgb(127,  53,  21)', // Oct, 10, #7f3515

  'rgb( 93, 115,  64)', // Nov, 11, #5d7340

  'rgb(156, 209, 199)'  // Dec, 12, #9cd1c7

];

​

var selectedColor;

​

var font;

​

function preload() {

  font = loadFont("./fonts/Montserrat-Medium.ttf");

}

​

function setup() {

  canvas = createCanvas(393, 570);

​

  angleMode(DEGREES);

​

  nameInput = createInput("Muriel Cooper", "text");

  nameInput.attribute("placeholder", "Your name");

  nameInput.position(410, 0);

​

  dateInput = createInput("12", "number");

  dateInput.attribute("min", 1);

  dateInput.attribute("max", 31);

  dateInput.position(410, 30);

​

  var separator = createSpan("/");

  separator.position(450, 32);

​

  monthInput = createInput("12", "number");

  monthInput.attribute("min", 1);

  monthInput.attribute("max", 12);

  monthInput.position(460, 30);

​

  urlInput = createInput("https://en.wikipedia.org/wiki/Muriel_Cooper", "url");

  urlInput.attribute("placeholder", "Your website");

  urlInput.attribute("oninput", "generateQRCode()")

  urlInput.position(410, 60);

​

  var qrcodeDiv = createDiv();

  qrcodeDiv.attribute("id", "qrcode");

  qrcodeDiv.position(550, 30);

​

  qrcode = new QRCode(qrcodeDiv.elt, {

    text: "https://en.wikipedia.org/wiki/Muriel_Cooper",

    width: 50,

    height: 50,

    colorDark : "#5f6670",

    colorLight : "#ffffff",

    correctLevel : QRCode.CorrectLevel.H

  });

​

  var downloadButton = createButton("Download as JPEG");

  downloadButton.attribute("onclick", "saveImage()");

  downloadButton.position(410, 90);

​

  textFont(font);

  textSize(16);

  textAlign(CENTER, CENTER);

  //noLoop();

}

​

function draw() {

  background('#FFF');

​

  var month = Number(monthInput.value()) || 1;

  selectedColor = monthColors[month - 1];

​

  drawName();

  drawMonth();

  drawDate();

}

​

function drawName() {

  push();

  noFill();

  strokeWeight(8);

  // stroke('#dc5353');

  stroke(selectedColor);

​

  var name = nameInput.value();

  var nameClean = name.toLowerCase().replace(/[^a-z]/g, "");

​

  var xStart = 30;

  var yStart = 30;

  var xDiff = (width - 50) / 26;

  var yDiff = (height - 150) / (nameClean.length - 1);

​

  beginShape();

  for (var i = 1; i < nameClean.length; i++) {

    var prevCharNum = nameClean[i - 1].charCodeAt(0) - 97;

    var currCharNum = nameClean[i].charCodeAt(0) - 97;

    vertex(xStart + prevCharNum * xDiff,

           yStart + (i % 2 == 0 ? i - 1 : i + 1) * yDiff);

    vertex(xStart + currCharNum * xDiff,

           yStart + (i % 2 == 0 ? i - 1 : i + 1) * yDiff);

​

  }

  endShape();

​

  fill('#aaa');

  noStroke();

  text(name, 0.5 * width, height - 35);

​

  pop();

}

​

function drawMonth() {

  push();

  noFill();

  strokeWeight(1);

​

  var month = Number(monthInput.value()) || 1;

​

  //stroke('#dc5353');

  stroke(selectedColor);

  rect(10, 10, width - 20, height - 20);

​

  for (var i = 0; i < month; i++) {

    beginShape();

    vertex(40 + 5 * i, 10);

    vertex(40 + 5 * i, 250 - 5 * i);

    vertex(150 + 6 * i, 250 - 5 * i);

    vertex(150 + 6 * i, 400 - 10 * i);

    vertex(320 - 6 * i, 400 - 10 * i);

    vertex(320 - 6 * i, 120 - 5 * i);

    vertex(350 - 5 * i, 120 - 5 * i);

    vertex(350 - 5 * i, 10);

    endShape();

  }

  pop();

}

​

function drawDate() {

  push();

  noFill();

  strokeWeight(0.5);

  //stroke('#dc5353');

  stroke(selectedColor);

​

  var date = Number(dateInput.value()) || 1;

​

  for (var i = 0; i < date; i++) {

    beginShape();

    vertex(width -  10, 200 + 4 * i);

    vertex(width - 120 - 4 * i, 200 + 4 * i);

    vertex(width - 120 - 4 * i, 100 + 4 * i);

    vertex(width - 370 + 4 * i, 100 + 4 * i);

    vertex(width - 370 + 4 * i, 500 - 4 * i);

    vertex(width -  10, 500 - 4 * i);

    endShape();  

  }

​

  pop();

}

​

function generateQRCode() {

  console.log('here')

  var url = urlInput.value();

  qrcode.clear(); // clear the code.

  qrcode.makeCode(url); 

}

​

function saveImage() {

  var name = nameInput.value();

  var nameClean = name.toLowerCase().replace(/[^a-z]/g, "");

​

  const img = document.querySelector('#qrcode img');

  if (img.src !== "") {

    loadImage(img.src, imgData => {

      image(imgData, 300, 505, 50, 50);

      save(nameClean + ".jpeg");

    })

  }

}