let volume;

let cupV1, cupV2, cupV3;

let cupH1, cupH2, cupH3, cupR1, cupR2, cupR3, cupR4 = 0;

let cGrams = '';

let rand, xyratio;

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  pixelDensity(1);

  background(240);

  baseGrid();

  noStroke();

​

  fill(0);

  coffeeType();

  vol();

  stroke(0);

  strokeWeight(1);

  noFill();

  ellipse(mouseX, mouseY, 10, 10);

  calc();

}

​

function mousePressed() {

  //Calculate amount of coffee in grams

  //Calculate cup dimensions

  //Volume = PI/3*h*(r1*r1+r2*r2+r1*r2)

  //(Volume*3)/PI = h*(r1*r1+r2*r2+r1*r2)

​

  stroke(0);

  strokeWeight(1);

  cGrams = round(volume * ratio);

  cupV1 = 0.25 * volume;

  cupV2 = 0.5 * volume;

  cupV3 = 0.25 * volume;

  cupH1 = random(0.05, 0.09) * cupV1;

  cupH3 = random(0.05, 0.09) * cupV3;

​

​

  xyratio = random(0.6, 2);

  let total1 = (cupV1 * 3) / (PI * cupH1);

  cupR1 = ((total1) / ((xyratio * xyratio) + 1 + xyratio));

  cupR2 = total1 - cupR1;

  xyratio = random(0.9, 1.4);

  let total3 = (cupV3 * 3) / (PI * cupH3);

  cupR3 = ((total3) / ((xyratio * xyratio) + 1 + xyratio));

  cupR4 = total3 - cupR3;

  cupH2 = ((3 * cupV2) / (PI * ((cupR2 * cupR2) + (cupR3 * cupR3) + (cupR2 * cupR3))));

  console.log(cupH1 + " " + cupH2 + " " + cupH3);

  // console.log(cupR1 + " " + cupR2 + " " + cupR3 + " " + cupR4);

​

}

​

function cup(h1, h2, h3, r1, r2, r3, r4) {

  strokeWeight(4);

  // point(width / 2 - r2, height / 2 - h2 / 2);

  point(width / 2 - r3, height / 2 + h2 / 2);

  strokeWeight(1);

  stroke(0);

  beginShape();

  vertex(width / 2 - r1, height / 2 - h1 - h2 / 2);

  vertex(width / 2 - r2, height / 2 - h2 / 2);

  vertex(width / 2 - r3, height / 2 + h2 / 2);

  vertex(width / 2 - r4, height / 2 + h3 + h2 / 2);

  endShape();

​

  line(width / 2 - r4, height / 2 + h3 + h2 / 2, width / 2 + r4, height / 2 + h3 + h2 / 2);

  stroke(0);

  // curveVertex(width / 2 - r4, height / 2 + h3 + h2 / 2);

  // curveVertex(width / 2 + r4, height / 2 + h3 + h2 / 2);

  beginShape();

  vertex(width / 2 + r4, height / 2 + h3 + h2 / 2);

  vertex(width / 2 + r3, height / 2 + h2 / 2);

  vertex(width / 2 + r2, height / 2 - h2 / 2);

  vertex(width / 2 + r1, height / 2 - h1 - h2 / 2);

  endShape();

​

}

​

function calc() {

  //Showing the cup and accompanying text

  cup(cupH1, cupH2, cupH3, cupR1, cupR2, cupR3, cupR4);

  // let tw = textWidth(cGrams) / 2;

  // text(cGrams, width / 2 - tw, height / 2 + 30);

​

}

​

function vol() {

  //Calculate total volume of drink

​

  volume = round(map(mouseX, 0, width, 20, 1800));

  let tw = textWidth(volume) / 2;

  text(volume, mouseX - tw, mouseY + 20);

}

​

function coffeeType() {

  //Choose Type of coffee

  // Caffiene Amount + Ratio (coffee:water (in grams))

​

  if ((mouseY > 0) && (mouseY < 50)) {

    let t = 'DRIP COFFEE';

    let tw = textWidth(t) / 2;

    text('DRIP COFFEE', mouseX - tw, mouseY - 10);

    ratio = 1 / 17;

    //165mg 1:17

  }

  if ((mouseY > 50) && (mouseY < 100)) {

    let t = 'COLD BREW';

    let tw = textWidth(t) / 2;

    text('COLD BREW', mouseX - tw, mouseY - 10);

    ratio = 1 / 8;

    //155mg 1:8

  }

  if ((mouseY > 100) && (mouseY < 150)) {

    let t = 'FLAT WHITE';

    let tw = textWidth(t) / 2;

    text('FLAT WHITE', mouseX - tw, mouseY - 10);

    ratio = 1 / 5;

    //130mg 1:5

  }

  if ((mouseY > 150) && (mouseY < 200)) {

    let t = 'ESPRESSO';

    let tw = textWidth(t) / 2;

    text('ESPRESSO', mouseX - tw, mouseY - 10);

    ratio = 1 / 2;

    //75mg 1:2

  }

  if ((mouseY > 200) && (mouseY < 250)) {

    let t = 'CAPPUCCINO';

    let tw = textWidth(t) / 2;

    text('CAPPUCCINO', mouseX - tw, mouseY - 10);

    ratio = 1 / 3;

    //75mg 1:3

  }

  if ((mouseY > 250) && (mouseY < 300)) {

    let t = 'AMERICANO';

    let tw = textWidth(t) / 2;

    text('AMERICANO', mouseX - tw, mouseY - 10);

    ratio = 1 / 4;

    //75mg 1:4

  }

  if ((mouseY > 300) && (mouseY < 350)) {

    let t = 'FRENCH PRESS';

    let tw = textWidth(t) / 2;

    text('FRENCH PRESS', mouseX - tw, mouseY - 10);

    ratio = 1 / 12;

    //63mg 1:12

  }

  if ((mouseY > 350) && (mouseY < 400)) {

    let t = 'INSTANT COFFEE';

    let tw = textWidth(t) / 2;

    text('INSTANT COFFEE', mouseX - tw, mouseY - 10);

    ratio = 1 / 20;

    //63mg 1:20

  }

}

​

function baseGrid() {

  stroke(0, 100);

  strokeWeight(0.3);

  line(width / 2, 0, width / 2, height);

  line(0, height / 2, width, height / 2);

  strokeWeight(4);

  point(width / 2, height / 2 - 50);

  point(width / 2, height / 2 - 100);

  point(width / 2, height / 2 - 150);

  point(width / 2, height / 2 + 50);

  point(width / 2, height / 2 + 100);

  point(width / 2, height / 2 + 150);

  point(width / 2 - 50, height / 2);

  point(width / 2 - 100, height / 2);

  point(width / 2 - 150, height / 2);

  point(width / 2 + 50, height / 2);

  point(width / 2 + 100, height / 2);

  point(width / 2 + 150, height / 2);

​

}