let volume;

let volumeT = ' ';

let cupV1, cupV2, cupV3, cupV4;

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

let cGrams = '';

let cStyle = ' ';

let cStyleT = ' ';

let offset = 7;

var italics;

var interReg, interMed;

let boxC = 21;

let boxW = 0.1;

let boxF = 240;

let cupF = 51;

let cupO = 51;

​

function preload() {

  italics = loadFont('LibreBaskerville-Italic.ttf');

  interReg = loadFont('Inter-Regular.ttf');

  interMed = loadFont('Inter-Medium.ttf');

}

​

function setup() {

  createCanvas(400, 400);

  noCursor();

  describe("coffee shapes");

    pixelDensity(2);

}

​

function draw() {

  background(245);

  // baseGrid();

  noStroke();

  fill(0);

  coffeeType();

  vol();

  stroke(0);

  strokeWeight(1);

  noFill();

  circle(mouseX, mouseY, map(volume, 0, 1700, 2, 100));

  strokeWeight(3);

  point(mouseX, mouseY);

  calc();

    describe("The cup is shaped to hold "+cGrams+" grams of coffee.")

}

​

function mousePressed() {

  //Calculate amount of coffee in grams

  //Calculate cup dimensions

  //Fudging volume by representing it as 2D surface area

  stroke(0);

  strokeWeight(1);

  cGrams = round(volume * ratio) + 'gms of coffee';

  cupV1 = 0.2 * volume * 0.25;

  cupV2 = 0.3 * volume * 0.25;

  cupV3 = 0.3 * volume * 0.25;

  cupV4 = 0.2 * volume * 0.25;

  cupR1 = random(cupV1 / 2 - 10, cupV1 / 2 + 10);

  cupH1 = random(cupV1 / 2 - 10, cupV1 / 2 + 10);

  cupR2 = random(cupV2 / 2 - 10, cupV2 / 2 + 10);

  cupH2 = random(cupV2 / 2 - 10, cupV2 / 2 + 10);

  cupR3 = random(cupV3 / 2 - 10, cupV3 / 2 + 10);

  cupH3 = random(cupV3 / 2 - 10, cupV3 / 2 + 10);

  cupR4 = random(cupV4 / 2 - 10, cupV4 / 2 + 10);

  cupH4 = random(cupV4 / 2 - 10, cupV4 / 2 + 10);

  cStyleT = cStyle;

  volumeT = volume + 'ml ';

}

​

function cup(hd1, hd2, hd3, hd4, wd1, wd2, wd3, wd4) {

  //Make the cup!

  strokeWeight(9);

  strokeJoin(ROUND);

  stroke(cupF);

  fill(cupF);

  beginShape();

  vertex(width / 2 - wd4, height / 2 - hd3 - hd4); //x5

  vertex(width / 2 - wd3, height / 2 - hd3); //x4

  vertex(width / 2 - wd2, height / 2); //x3

  vertex(width / 2 - wd1, height / 2 + hd2); //x2

  vertex(width / 2 - wd4, height / 2 + hd1 + hd2); //x1

  vertex(width / 2 + wd4, height / 2 + hd1 + hd2); //x1

  vertex(width / 2 + wd1, height / 2 + hd2); //x2

  vertex(width / 2 + wd2, height / 2); //x3

  vertex(width / 2 + wd3, height / 2 - hd3); //x4

  vertex(width / 2 + wd4, height / 2 - hd3 - hd4); //x5

  endShape(CLOSE);

  // stroke(51);

  strokeWeight(5);

  noFill();

  // beginShape();

  // vertex(width / 2 - wd4+offset, height / 2 - hd3 - hd4+offset); //x5

  // vertex(width / 2 - wd3+offset, height / 2 - hd3); //x4

  // vertex(width / 2 - wd2+offset, height / 2); //x3

  // vertex(width / 2 - wd1+offset, height / 2 + hd2); //x2

  // vertex(width / 2 - wd4+offset, height / 2 + hd1 + hd2-offset); //x1

  // vertex(width / 2 + wd4-offset, height / 2 + hd1 + hd2-offset); //x1

  // endShape();

}

​

function calc() {

  //Showing the cup and accompanying text

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

  noStroke();

  fill(0);

  textAlign(RIGHT);

  textFont(interMed);

  text(volumeT + cStyleT, width / 2 - 12, height - 30);

  textAlign(CENTER);

  textFont(interReg);

  text('—', width / 2, height - 30);

  textFont(italics);

  textAlign(LEFT);

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

​

}

​

function vol() {

  //Calculate total volume of drink

​

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

  let tw = textWidth(volume + 'ml') / 2;

  textFont(italics);

  // blendMode(SCREEN);

  fill(0);

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

  // blendMode(BLEND);

}

​

function coffeeType() {

  //Choose Type of coffee

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

  textFont(interMed);

  strokeWeight(boxW);

​

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

    stroke(boxC);

    fill(boxF);

    rect(0, 0, width, 50);

    fill(0);

    noStroke();

    cStyle = "Drip Coffee";

    let t = 'DRIP COFFEE';

    let tw = textWidth(t) / 2;

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

    ratio = 1 / 17;

    //165mg 1:17

  } else if ((mouseY > 50) && (mouseY < 100) && (mouseX > 0) && (mouseX < width)) {

    stroke(boxC);

    fill(boxF);

    rect(0, 50, width, 50);

    fill(0);

    noStroke();

    cStyle = "Cold Brew";

    let t = 'COLD BREW';

    let tw = textWidth(t) / 2;

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

    ratio = 1 / 8;

    //155mg 1:8

  } else if ((mouseY > 100) && (mouseY < 150) && (mouseX > 0) && (mouseX < width)) {

    stroke(boxC);

    fill(boxF);

    rect(0, 100, width, 50);

    fill(0);

    noStroke();

    cStyle = "Flat White";

    let t = 'FLAT WHITE';

    let tw = textWidth(t) / 2;

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

    ratio = 1 / 5;

    //130mg 1:5

  } else if ((mouseY > 150) && (mouseY < 200) && (mouseX > 0) && (mouseX < width)) {

    stroke(boxC);

    fill(boxF);

    rect(0, 150, width, 50);

    fill(0);

    noStroke();

    cStyle = "Espresso";

    let t = 'ESPRESSO';

    let tw = textWidth(t) / 2;

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

    ratio = 1 / 2;

    //75mg 1:2

  } else if ((mouseY > 200) && (mouseY < 250) && (mouseX > 0) && (mouseX < width)) {

    stroke(boxC);

    fill(boxF);

    rect(0, 200, width, 50);

    fill(0);

    noStroke();

    cStyle = "Cappuccino";

    let t = 'CAPPUCCINO';

    let tw = textWidth(t) / 2;

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

    ratio = 1 / 3;

    //75mg 1:3

  } else if ((mouseY > 250) && (mouseY < 300) && (mouseX > 0) && (mouseX < width)) {

    stroke(boxC);

    fill(boxF);

    rect(0, 250, width, 50);

    fill(0);

    noStroke();

    cStyle = "Americano";

    let t = 'AMERICANO';

    let tw = textWidth(t) / 2;

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

    ratio = 1 / 4;

    //75mg 1:4

  } else if ((mouseY > 300) && (mouseY < 350) && (mouseX > 0) && (mouseX < width)) {

    stroke(boxC);

    fill(boxF);

    rect(0, 300, width, 50);

    fill(0);

    noStroke();

    cStyle = "French Press";

    let t = 'FRENCH PRESS';

    let tw = textWidth(t) / 2;

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

    ratio = 1 / 12;

    //63mg 1:12

  } else if ((mouseY > 350) && (mouseY < 400) && (mouseX > 0) && (mouseX < width)) {

    stroke(boxC);

    fill(boxF);

    rect(0, 350, width, 50);

    fill(0);

    noStroke();

    cStyle = "Instant Coffee";

    let t = 'INSTANT COFFEE';

    let tw = textWidth(t) / 2;

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

    ratio = 1 / 20;

    //63mg 1:20

  }

  // else if(((mouseX < 0)&&(mouseY > 0)) || ((mouseX > width)&&(mouseY > 0))) {

  //   background(245);

  // }

}

​

function keyPressed() {

  if (keyCode === 83) {

    save('coffee-cup-maker.png');

  }

}

​

​

function baseGrid() {

  //Sketching layer

  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);

​

}