​

const PARAMS = {

  bg: "#c2d2c6",

  tableColor: "#c57ca3",

  cupColor: "#211a46",

  cupColor2: "#4a9988",

  handleThickness: 20.16,

  height: 296.32,

  width: 150,

  depth: 100,

};

​

function setup() {

  createCanvas(500, 500);

  rectMode(CENTER);

  // angleMode(DEGREES);

  noLoop();

  noFill();

​

  // add parameters

  pane.addInput(PARAMS, "bg", {

    view: "color",

  });

  pane.addInput(PARAMS, "tableColor", {

    view: "color",

  });

  pane.addInput(PARAMS, "cupColor", {

    view: "color",

  });

  pane.addInput(PARAMS, "cupColor2", {

    view: "color",

  });

  pane.addInput(PARAMS, "handleThickness", {

    min: 5,

    max: 50,

  });

  pane.addInput(PARAMS, "height", {

    min: 92.3,

    max: 400,

  });

  pane.addInput(PARAMS, "width", {

    min: 67,

    max: 400,

  });

​

  // redraw

  pane.on("change", function (ev) {

    redraw();

  });

}

​

​

function draw() {

  background(PARAMS.bg);

  teaCup(PARAMS.width,PARAMS.height,PARAMS.handleThickness,PARAMS.cupColor2, PARAMS.cupColor, PARAMS.tableColor);

}

​

function teaCup(cupWidth, cupHeight, handleThickness, darkerCupColor, lighterCupColor, tableColor) {

  //table

  push();

  fill(tableColor);

  noStroke();

  rect(250,400,500,250);

  pop();

  //cup shadow

  push();

  noStroke();

  fill(0,0,0,50);

  ellipse(width/2, height/2+cupHeight/2+5, cupWidth, 40);

  pop();

  //cup handle

  push();

  noFill();

  stroke(lighterCupColor);

  strokeWeight(handleThickness);

  rect(width/2+cupWidth/2, height/2, cupWidth/2,cupHeight/2,100);

  pop();

  //cup body

  push();

  noStroke();

  fill(lighterCupColor);

  rect(width/2, height/2, cupWidth, cupHeight, 0, 0, 50, 50);

  fill(darkerCupColor);

  ellipse(width/2, height/2-cupHeight/2, cupWidth, 40);

    fill(0,0,0,50);

  ellipse(width/2, height/2-cupHeight/2+10, cupWidth-40, 20);

  pop();

​

}