let mode = 1;

​

​

function preload(){

  myData = loadJSON('data.json');

}

​

​

function setup() {

  createCanvas(400, 400);

  console.log(myData.data);

  angleMode(DEGREES);

  // w = random(20, 50);

}

​

function draw() {

  background(0);

  switch(mode){

    case 1: 

      scene1();

      break;

    case 2: 

      scene2();

      break;

    case 3:

      scene3();

      break;  

    case 4:

      scene4();

      break;

    case 5:

      scene5();

      break;

    case 6:

      scene6();

      break;

    case 7:

      scene7();

      break;

      default:

  }

}

​

//scene1 = Nov.17th

function scene1(){

  clear();

  background(0);

  let m = millis();

​

//texts

  push();

  fill(255);

  textSize(12);

  text('Nov.17th', 18, 50);

  fill(255, 153, 0);

  textSize(14);

  text('w others in-person', 5, 360);

  fill(255, 0,0);

  textSize(14);

  text('w others over internet', 120, 380);

  fill(179, 255, 204);

  textSize(14);

  text('myself out loud', 300, 390);

  fill(0, 153, 51);

  textSize(14);

  text('myself at phone', 260, 350);  

  pop();

//data

  push();

  //红色

  noFill();

  stroke(255,0,0);

  strokeWeight(6);

  let end = map(m, 0, 100000, 0, 360);

  arc(50,90,60,70,0,end);

  //橙色

  stroke(255, 153, 0);

  strokeWeight(3);

  let end2 = map(m, 0, 50000, 0, 360);

  arc(60, 95, 50, 50, 0, end2);

  //深绿

  stroke(0, 153, 51);

  strokeWeight(4);

  let end3 = map(m, 0, 80000, 0, 360);

  arc(40, 110, 30, 30, 0, end3);

  //浅绿

  stroke(179, 255, 204);

  strokeWeight(1);

  let end4 = map(m, 0, 30000, 0, 360);

  arc(30, 80, 10, 20, 0, end4);

  pop();

}

​

​

​

//scene2 = Nov.18th

function scene2(){

  clear();

  background(0);

  let m = millis();

//texts

  push();

  fill(255);

  textSize(12);

  text('Nov.18th', 100, 100);

  fill(255, 153, 0);

  textSize(14);

  text('w others in-person', 5, 360);

  fill(255, 0,0);

  textSize(14);

  text('w others over internet', 120, 380);

  fill(179, 255, 204);

  textSize(14);

  text('myself out loud', 300, 390);

  fill(0, 153, 51);

  textSize(14);

  text('myself at phone', 260, 350);  

  pop();

​

//data

  push();

  //红色

  noFill();

  stroke(255,0,0);

  strokeWeight(4);

  let end = map(m, 0, 70000, 0, 360);

  arc(100,200,50,50,0,end);

  //橙色

  stroke(255, 153, 0);

  strokeWeight(3);

  let end2 = map(m, 0, 50000, 0, 360);

  arc(130, 150, 30, 40, 0, end2);

  //深绿

  stroke(0, 153, 51);

  strokeWeight(6);

  let end3 = map(m, 0, 90000, 0, 360);

  arc(130, 230, 70, 60, 0, end3);

  //浅绿

  stroke(179, 255, 204);

  strokeWeight(1);

  let end4 = map(m, 0, 30000, 0, 360);

  arc(100, 120, 20, 20, 0, end4);

  pop();

}

​

​

//scene3 = Nov.19th

function scene3(){

  clear();

  background(0);

  let m = millis();

//texts

  push();

  fill(255);

  textSize(12);

  text('Nov.19th', 200, 200);

  fill(255, 153, 0);

  textSize(14);

  text('w others in-person', 5, 360);

  fill(255, 0,0);

  textSize(14);

  text('w others over internet', 120, 380);

  fill(179, 255, 204);

  textSize(14);

  text('myself out loud', 300, 390);

  fill(0, 153, 51);

  textSize(14);

  text('myself at phone', 260, 350);  

  pop();

​

//data

  push();

  //红色

  noFill();

  stroke(255,0,0);

  strokeWeight(6);

  let end = map(m, 0, 50000, 0, 360);

  arc(200,250,40,30,0,end);

  //橙色

  stroke(255, 153, 0);

  strokeWeight(6);

  let end2 = map(m, 0, 50000, 0, 360);

  arc(200, 240, 30, 40, 0, end2);

  //深绿

  stroke(0, 153, 51);

  strokeWeight(8);

  let end3 = map(m, 0, 100000, 0, 360);

  arc(200, 220, 70, 70, 0, end3);

  //浅绿

  stroke(179, 255, 204);

  strokeWeight(1);

  let end4 = map(m, 0, 30000, 0, 360);

  arc(170, 250, 10, 10, 0, end4);

  pop();

}

​

​

//scene4 = Nov.20th

function scene4(){

  clear();

  background(0);

  let m = millis();

//texts

  push();

  fill(255);

  textSize(12);

  text('Nov.20th', 250, 180);

  fill(255, 153, 0);

  textSize(14);

  text('w others in-person', 5, 360);

  fill(255, 0,0);

  textSize(14);

  text('w others over internet', 120, 380);

  fill(179, 255, 204);

  textSize(14);

  text('myself out loud', 300, 390);

  fill(0, 153, 51);

  textSize(14);

  text('myself at phone', 260, 350);  

  pop();

​

//data

  push();

  //红色

  noFill();

  stroke(255,0,0);

  strokeWeight(4);

  let end = map(m, 0, 50000, 0, 360);

  arc(250,200,40,30,0,end);

  //橙色

  stroke(255, 153, 0);

  strokeWeight(8);

  let end2 = map(m, 0, 100000, 0, 360);

  arc(230, 240, 70, 70, 0, end2);

  //深绿

  stroke(0, 153, 51);

  strokeWeight(6);

  let end3 = map(m, 0, 80000, 0, 360);

  arc(200, 220, 30, 40, 0, end3);

  //浅绿

  stroke(179, 255, 204);

  strokeWeight(1);

  let end4 = map(m, 0, 30000, 0, 360);

  arc(220, 250, 10, 10, 0, end4);

  pop();

}

​

​

 function keyPressed(){

    if(key=='1'){

      mode = 1;

    }else if(key =='2'){

      mode = 2;

    }else if (key =='3'){

      mode = 3;

    }

    else if (key == '3'){

      mode = 3;

    }

   else if (key == '4'){

      mode = 4;

    }

   else if (key == '5'){

      mode = 5;

    }

   else if (key == '6'){

      mode = 6;

    }

   else if (key == '7'){

      mode = 7;

    }

    print(mode);

  }