let myObj = {

  "-----": ["------", 0, 0, "#F3EFE0", "#7A7A7A"],

  marital_status: ["DIVORCED", 12.8, 21.7, "#E5D4ED", "#6D72C3"],

  education: ["HIGHER EDUCATION", 43.1, 32.9, "#395B1A9", "#EB5151"],

  job: ["UNEMPLOYED", 32.7, 52.4, "#E4572E", "#29335C"],

  health: ["GOOD CONDITION", 76.9, 36.5, "#3066BE", "#119DA4"],

  stress: ["HIGH LEVEL", 12.4, 36.3, "#595457", "#710627"],

  physical_function: ["UNLIMITED", 81.1, 51.4, "#FF751F", "#443742"],

  smoking: ["NEVER BEFORE", 53, 54.9, "#E8C547", "#63667E"],

  alcohol: ["NEVER BEFORE", 42.6, 49.8, "#696D7D", "#6F9283"],

  walking: ["MORE THAN 1 HR/DAY", 49.3, 35, "#F4E8C1", "#A0C1B9"],

  sleep: ["7-8 HRS/DAY", 69.2, 55.7, "#D7F9F1", "#7AA095"]

}

​

let rectDif= 100;  // the level of moving for the rectagle

let xAfter = 0      // where want the rectangle to move to

let percent;       // calculate percentage of the ikigai-certain group

let percentRef = 50; // percent reference (50%) 

let selectedItem;

let count = 0;     // used for animated transitions of changed percent

let xPre = 0;      // used for store the position of the rectangle of the previous item

function setup() {

  createCanvas(windowWidth, windowHeight);

  frameRate(200);

  textAlign(CENTER);

  background(200);

  sel = createSelect();

  rectMode(CENTER);

  sel.position(10,10);

  // set up the options

  sel.option('-----')

  sel.option('marital_status');

  sel.option('education');

  sel.option('job');

  sel.option('health');

  sel.option('stress');

  sel.option('physical_function');

  sel.option('smoking');

  sel.option('alcohol');

  sel.option('walking');

  sel.option('sleep');

  sel.selected('nothing');

  selectedItem = myObj[sel.value()]; // initalize the selectedItem to the inital selected item;

  sel.changed(mySelectEvent);

}

​

// play as a reset when user changes the option

function mySelectEvent() { 

  selectedItem = myObj[sel.value()];

  xPre = xAfter;

  count = 0;

  // calculate the percentage between ikigai-yes and ikigai-no

  percent = floor((selectedItem[1] / (selectedItem[1]+selectedItem[2])) * 100);

  console.log(percent);

  xAfter = int(windowWidth * ((percent-percentRef)/100));

}

​

function draw() {

  background(selectedItem[4]);

  noStroke();

  rectMode(CENTER);

  fill(selectedItem[3]);

  if (abs(xPre-xAfter) > 4) { // estimate the difference

    if (xPre > xAfter)        // move the rectangle to the left if the after position is less than the previous position

      xPre-= 4;

    else if (xPre < xAfter)   // vice versa

      xPre+= 4;  

  }

  rect(xPre, windowHeight/2, windowWidth, windowHeight);

  fill(0);

  rect(windowWidth/2, windowHeight/2, windowWidth/6, windowWidth/8);

  textAlign(CENTER);

  textSize(windowWidth/80)

  fill(selectedItem[3])

  text(selectedItem[0], windowWidth/2, windowHeight/2-windowWidth/40);

  text(`with ikigai: ${selectedItem[1]}%`, windowWidth/2, windowHeight/2 + windowWidth/100);

  fill(selectedItem[4])

  text(`without ikigai: ${selectedItem[2]}%`, windowWidth/2, windowHeight/2+windowWidth/30);

}