Week 16





explanation
My project is a diet app that calculates what you eat and how much you exercise. On the main screen, two bars each show information about the food you eat and how much you exercise. When you press the first bar, you turn it into a screen where you can add food you eat, and when you press the second bar, you turn it into a screen where you can detect movement. The two circles of the bottom of the main screen shows the leftover calories and amount of exercise you have to do. 


Here is p5.js link.
https://editor.p5js.org/tibetfox25/full/BN5oXRq18


Here is my code.
var stage = 0;
var step = 0;
var outKcal = 0;
var fastStep = 0;
var midiumStep = 0;
var slowStep = 0;
var fastKcal = 0;
var midiumKcal = 0;
var slowKcal = 0;
//var button1, button2, button3, button4, button5, button6;
var foodKcal = 0;
var foodCarbohydrate = 0;
var foodProtein = 0;
var foodFat = 0;
var foodVitamin = 0;
var foodMineral = 0;

var inKcal = [];
var carbohydrate = [];
var protein = [];
var fat = [];
var vitamin = [];
var mineral = [];
var count = 10;
var sum = 0;


function setup() {
  createCanvas(750,1334);
  
  //food1 
  inKcal.push(495);
  carbohydrate.push(63);
  protein.push(18);
  fat.push(13);
  vitamin.push(3);
  mineral.push(5);
  
  //food2
  inKcal.push(480);
  carbohydrate.push(45);
  protein.push(17);
  fat.push(26);
  vitamin.push(10);
  mineral.push(5);
  
  //food3
  inKcal.push(632);
  carbohydrate.push(56);
  protein.push(35);
  fat.push(30);
  vitamin.push(5);
  mineral.push(1);
  
  //food4
  inKcal.push(485);
  carbohydrate.push(74);
  protein.push(15);
  fat.push(15);
  vitamin.push(10);
  mineral.push(10);
  
  //food5
  inKcal.push(500);
  carbohydrate.push(60);
  protein.push(8);
  fat.push(15);
  vitamin.push(0);
  mineral.push(0);
  
  //food6 
  inKcal.push(800);
  carbohydrate.push(30);
  protein.push(20);
  fat.push(30);
  vitamin.push(5);
  mineral.push(10);
  
  //food7
  inKcal.push(380);
  carbohydrate.push(65);
  protein.push(17);
  fat.push(6);
  vitamin.push(4);
  mineral.push(5);
  
  //food8
  inKcal.push(10);
  carbohydrate.push(1);
  protein.push(1);
  fat.push(1);
  vitamin.push(1);
  mineral.push(1);
  
  //food9
  inKcal.push(180);
  carbohydrate.push(13);
  protein.push(10);
  fat.push(5);
  vitamin.push(2);
  mineral.push(1);
  
  //food10
  inKcal.push(200);
  carbohydrate.push(24);
  protein.push(8);
  fat.push(8);
  vitamin.push(1);
  mineral.push(1);
  
    if (50 < accelerationX) {
    fastStep += 1;
    fastKcal =  fastStep
  }
  
    if (accelerationX < 50 && accelerationX > 10) {
    mediumStep += 1;
    midiumKcal = 0.5 * mediumStep
  }
  
    if (accelerationX < 10 && accelerationX > 5) {
    slowStep += 1;
    slowKcal = 0.1 * slowStep
  }
  
    if (accelerationX < 5) {
    Nostep = 0;
  }
  
  step = fastStep + midiumStep + slowStep;
  outKcal = fastKcal + midiumKcal + slowKcal;
  
}



function draw() {
  
  
  if (stage == 0) { //main hwamyeon
    background(0);
    
    
    //show food nutritions 
    noStroke();
    fill(255,255,255);
    rect(0,300,750,50);
    
    fill(255,190,190);
    rect(0,300,foodCarbohydrate,50);
    textSize(20);
    text('Carbohydrate',0,290);
    
    fill(255,150,150);
    rect(foodCarbohydrate,300,foodProtein,50);
    textSize(20);
    text('Protein',120,290);
    
    fill(255,100,100);
    rect(foodCarbohydrate+foodProtein,300,foodFat,50);
    textSize(20);
    text('Fat',190,290);
    
    fill(255,50,50);
    rect(foodCarbohydrate+foodProtein+foodFat,300,foodVitamin,50);
    textSize(20);
    text('Vitamin',220,290);
    
    fill(255,10,10);
rect((foodCarbohydrate+foodProtein+foodFat+foodVitamin),300,foodMineral,50);
    textSize(20);
    text('Mineral',290,290);
    
    fill(0);
    textSize(20);
    text(foodKcal+'Kcal',650,330);
  
  
  //show step Record 
   noStroke();
   fill(255,255,255);
   rect(0,500,750,50);
  
  fill(190,190, 255);
  rect(0,500,fastKcal,50);
  textSize(20);
  text('Fast',10,490);
    
  fill(150,150,255);
  rect(fastKcal,500,midiumKcal,50);
  textSize(20);
  text('Medium',55,490);
    
  fill(50,50,255);
  rect((fastKcal+midiumKcal),500,slowKcal,50);
  textSize(20);
  text('Slow',130,490);
    
    fill(0);
    textSize(20);
    text(int(outKcal)+'Kcal',650,530);
    
    //workout ~ hours to use up all leftover Kcal
    
    fill(255,255,255);
    ellipse(200, 1000, (foodKcal-outKcal)/5, (foodKcal-outKcal)/5)
    fill(255,100,100);
    stroke(255,0,0);
    strokeWeight(2);
    textSize((foodKcal-outKcal)/20);
    text((foodKcal-outKcal),200-(foodKcal-outKcal)/30,1000);
    
    fill(0);
    noStroke();
    textSize((foodKcal-outKcal)/80);
    text('Kcal left',185,1020);
  
    //
    fill(255,255,255);
    ellipse(550, 1000, (foodKcal-outKcal)*2/5, (foodKcal-outKcal)*2/5)
    fill(255,100,100);
    stroke(255,0,0);
    strokeWeight(2);
    textSize((foodKcal-outKcal)*2/20);
    text((foodKcal-outKcal)*2,520-2*(foodKcal-outKcal)/30,1000);
    
    fill(0);
    noStroke();
    textSize((foodKcal-outKcal)/80);
    text('steps left',540,1020);
  
  }
  

  if (stage == 1) { //steprecorder
    
    background(0);
    fill('Green')
    noStroke();
    textSize(30);
    text(step+'steps', 200, 300);
    text(int(outKcal)+'kcal', 200, 400);
    
    if (50 < accelerationX) {
    fastStep += 1;
    fastKcal =  fastStep
  }
  
    if (accelerationX < 50 && accelerationX > 10) {
    mediumStep += 1;
    midiumKcal = 0.5 * mediumStep
  }
  
    if (accelerationX < 10 && accelerationX > 5) {
    slowStep += 1;
    slowKcal = 0.1 * slowStep
  }
  
    if (accelerationX < 5) {
    Nostep = 0;
  }
  
  step = fastStep + midiumStep + slowStep;
  outKcal = fastKcal + midiumKcal + slowKcal;
  
    
    //back to main button
    fill(100, 255, 150);
    stroke(100, 255, 255);
    strokeWeight(4);
    rect(50, 1200, 650, 100, 10);
    
    fill(0,100,255);
    textSize(70);
    text("Home", 310, 1280);
    
  }
    
    
  if (stage == 2) { //foodRecorder
    
    background(0);
    
    //back to main button
    fill(100, 255, 150);
    stroke(100, 255, 255);
    strokeWeight(4);
    rect(50, 1200, 650, 100, 10);
    
    fill(0,100,255);
    textSize(70);
    text("Home", 310, 1280);
    

   //button 1 볶음우동
   fill(255, 234, 150);
   stroke(255, 204, 0);
   strokeWeight(4);
   rect(200, 150, 120, 40, 10);
   fill (255,100,0);
   textSize(15);
   text('볶음우동',210,170)
   text('fried udon',210,185)
  
   //button2 서브웨이 에그마요
   fill(255, 234, 150);
   stroke(255, 204, 0);
   strokeWeight(4);
   rect(400, 150, 120, 40, 10);
  fill (255,100,0);
   textSize(15);
   text('서브웨이 에그마요',405,170)
   text('egg mayo sub',410,185)
  
   //button3 갈비만두
   fill(255, 234, 150);
   stroke(255, 204, 0);
   strokeWeight(4);
   rect(200, 300, 120, 40, 10);
   fill (255,100,0);
   textSize(15);
   text('갈비만두',210,320)
   text('meat dumplings',210,335)
  
   //button4 김밥
   fill(255, 234, 150);
   stroke(255, 204, 0);
   strokeWeight(4);
   rect(400, 300, 120, 40, 10);
   fill (255,100,0);
   textSize(15);
   text('김밥',405,320)
   text('kimbab',410,335)
  
   //button5 라면
   fill(255, 234, 150);
   stroke(255, 204, 0);
   strokeWeight(4);
   rect(200, 450, 120, 40, 10);
   fill (255,100,0);
   textSize(15);
   text('라면',210,470)
   text('ramen',210,485)
  
   
   //button6 마라탕 
   fill(255, 234, 150);
   stroke(255, 204, 0);
   strokeWeight(4);
   rect(400, 450, 120, 40, 10);
   fill (255,100,0);
   textSize(15);
   text('마라탕',410,470)
   text('maratang',410,485)
  
   //button7 냉면
   fill(255, 234, 150);
   stroke(255, 204, 0);
   strokeWeight(4);
   rect(200, 600, 120, 40, 10);
   fill (255,100,0);
   textSize(15);
   text('냉면',210,620)
   text('cold noodles',210,635)
  
   //button8 아메리카노
   fill(255, 234, 150);
   stroke(255, 204, 0);
   strokeWeight(4);
   rect(400, 600, 120, 40, 10);
   fill (255,100,0);
   textSize(15);
   text('아메리카노',410,620)
   text('americano',410, 635)
  
    //button9 라떼
   fill(255, 234, 150);
   stroke(255, 204, 0);
   strokeWeight(4);
   rect(200, 750, 120, 40, 10);
   fill (255,100,0);
   textSize(15);
   text('라떼',210,770)
   text('latte',210,785)
  
   //button10
   fill(255, 234, 150);
   stroke(255, 204, 0);
   strokeWeight(4);
   rect(400, 750, 120, 40, 10);
   fill (255,100,0);
   textSize(15);
   text('카라멜 마끼아또',410,770)
   text('caramel macchiato',410, 785)
  
   //show totalfoodkcal 
   fill(255, 214, 160);
   stroke(255, 204, 0);
   strokeWeight(4);
   rect(200, 1000, 350, 110, 10);
  
   fill(255);
   textSize(30);
   text("Today's food Kcal", 270, 1010);
    
   fill('RED')
   textSize(50);
   strokeWeight(2);
   text(foodKcal + 'kcal', 320, 1070);
  }
}



function mousePressed(){
  
  if (stage == 0) {
    if (mouseX >0 && mouseX<750 && mouseY>300 && mouseY<375){
      stage = 2;
    }else if (mouseX>0 && mouseX<750 && mouseY>500 && mouseY<565){
      stage = 1;
    }else
      stage=0;
  }
  
  else if (stage == 1) { 
    if (mouseX>50 && mouseX<700 && mouseY>1200 && mouseY<1300){
      stage = 0;
      
    }else
      stage = 1;
  }
  
  else if(stage ==2) { //foodRecorder
    
    if (mouseX >200 && mouseX<320 && mouseY>150 && mouseY<190) {
      kcalSum(0);
      
    }else if (mouseX >400 && mouseX<520 && mouseY>150 && mouseY<190) {
      kcalSum(1);
      
    }else if (mouseX >200 && mouseX<320 && mouseY>300 && mouseY<340) {
      kcalSum(2);
      
    }else if (mouseX >400 && mouseX<520 && mouseY>300 && mouseY<340) {
      kcalSum(3);
      
    }else if (mouseX >200 && mouseX<320 && mouseY>450 && mouseY<490) {
      kcalSum(4);
      
    }else if (mouseX >400 && mouseX<520 && mouseY>450 && mouseY<490) {
      kcalSum(5);
      
    }else if (mouseX >200 && mouseX<320 && mouseY>600 && mouseY<640) {
      kcalSum(6);
      
   }else if (mouseX >400 && mouseX<520 && mouseY>600 && mouseY<640) {
      kcalSum(7);
     
   }else if (mouseX >200 && mouseX<320 && mouseY>750 && mouseY<790) {
      kcalSum(8);
      
   }else if (mouseX >400 && mouseX<520 && mouseY>750 && mouseY<790) {
      kcalSum(9);

   }else if (mouseX>50 && mouseX<750 && mouseY>1200 && mouseY<1300){
  
     stage = 0;
    
   }
    else
      stage = 2;
    }
   
  else if(stage == 3){
    
    if(mouseX>50 && mouseX<700 && mouseY>1200 && mouseY<1300){
     stage = 0;
   
    }else 
      stage = 3; 
  }
}
  


function kcalSum(idx) {

  foodKcal += inKcal[idx];
  foodCarbohydrate += carbohydrate[idx];
  foodProtein += protein[idx];
  foodFat += fat[idx];
  foodVitamin += vitamin[idx];
  foodMineral += mineral[idx];
  console.log("asdf" + inKcal[idx]);
  
}

week 14


var button;
var foodKcal;
var kcal;
var value = [];
var count = 6;
var sum = 0;

function setup() {
  createCanvas(750, 1334);
  background(0);
  
  button=createButton('foodName1')
  button.position(200,200)
  //value=150
  value.push(150);
  button.mousePressed(kcalSum(0));
  
  button=createButton('foodName2')
  button.position(500,200)
  value.push(250);
  button.mousePressed(kcalSum(1));

  button=createButton('foodName3')
  button.position(200,400)
  value.push(350);
  button.mousePressed(kcalSum(2));
  
  button=createButton('foodName4')
  button.position(500,400)
  value.push(450);
  button.mousePressed(kcalSum(3));
  
  button=createButton('foodName5')
  button.position(200,600)
  value.push(550);
  button.mousePressed(kcalSum(4));
  
  button=createButton('foodName6')
  button.position(500,600)
  value.push(650);
  button.mousePressed(kcalSum(5));
  
}

function kcalSum(idx) {
  //console.log("asdf" + idx);
   ///var kcalSum = 0;
   /*for(var i=0; i < count; i++ ){
       //if( button.mousePressed == true){
         //sum +=
         //Int('foodName[i]'.value);
         sum += value[i];
       //}
   }
   foodKcal = sum;*/
  foodKcal += value[idx];
}

function draw() {
  background(0);
  fill('Green')
  textSize(30);
  text(foodKcal+'kcal', 300, 1100);
}
  

  
--------------------------------------------------------------------------------------------------------------




Things I have to work on : 
1. nutritions calculation and total nutrition pie chart -> main 
2. leftover calories 
3. workouts to consume leftover calories 




* I added stages * 


function setup() {
  createCanvas(displayWidth,displayHeight);
  
}

var Stage=0; 
  if (Stage == 1) {
    drawMain();
  }else if (Stage == 2) {
    drawstepRecorder();
 }else if (Stage == 3) {
    drawfoodRecorder();
 }

//Main 

 
// step recorder 
function stepRecorder(){
  var step = 0;
  var kcal = 0;
  var fastStep = 0;
  var midiumStep = 0; 
  var slowStep = 0; 
  var fastKcal = 0;
  var midiumKcal = 0; 
  var slowKcal = 0; 
  
  function draw() {
    background(0);
    fill('Green');
    textSize(30);
    text(step, 30, 30);
    text(kcal, 30, 60);
    text("steps", 150, 30);
    text("kcal", 150, 60);
    
    if ( 100 < accelerationX ) {
      fastStep += 1;
      fastKcal = 0.1 * fastStep 
    }
    
    if ( 50 > accelerationX && accelerationX > 20) {
      mediumStep += 1;
      midiumKcal = 0.05 * mediumStep 
    }
    
    if ( 20 > accelerationX && accelerationX > 10 ) {
      slowStep += 1;
      slowKcal = 0.25 * slowStep
    }
    
    if (accelerationX < 10) {
      Nostep =0;
    }
    step = fastStep + midiumStep + slowStep ;
    kcal = fastKcal + midiumKcal + slowKcal ;
  }
}


// food recorder

function foodRecorder(){
  var button;
  var foodKcal;
  var kcal;
  
  function setup() {
    createCanvas(750, 1334);
    background(51);
    
    button=createButton('foodName1')
    button.position(200,200)
    value=150
    onClick="kcalSum();"
    
    button=createButton('foodName2')
    button.position(500,200)
    value=250
    onClick="kcalSum();"
    
    button=createButton('foodName3')
    button.position(200,400)
    value=350
    onClick="kcalSum();"
    button=createButton('foodName4')
    button.position(500,400)
    value=450
    onClick="kcalSum();"
    
    button=createButton('foodName5')
    button.position(200,600)
    value=550
    onClick="kcalSum();"
    
    button=createButton('foodName6')
    button.position(500,600)
    value=650
    onClick="kcalSum();"
  
  }
  
  function kcalSum() {
    var kcalSum = 0;
    for(var i=0; i < count; i++ ){
      if( button.mousePressed == true){
        sum +=
          Int('foodName[i]'.value);
      }
    }
    kcalSum = sum;
  }
  
  function draw() {
    fill('Green')
    textSize(30);
    text(foodKcal+'kcal', 300, 1100);
  }
}

  

revised food selection code : 

var button;
var foodKcal;
var kcal;

function setup() {
  createCanvas(750, 1334);
  background(51);
  
  button=createButton('foodName1')
  button.position(200,200)
  value=150
  onClick="kcalSum();"
  
  button=createButton('foodName2')
  button.position(500,200)
  value=250
  onClick="kcalSum();"

  button=createButton('foodName3')
  button.position(200,400)
  value=350
  onClick="kcalSum();"
  
  button=createButton('foodName4')
  button.position(500,400)
  value=450
  onClick="kcalSum();"
  
  button=createButton('foodName5')
  button.position(200,600)
  value=550
  onClick="kcalSum();"
  
  button=createButton('foodName6')
  button.position(500,600)
  value=650
  onClick="kcalSum();"
  
}

function kcalSum() {
   var kcalSum = 0;
   for(var i=0; i < count; i++ ){
       if( button.mousePressed == true){
         sum +=
         parseInt('foodName[i]'.value);
       }
   }
   kcalSum = sum;
}

function draw() {
  fill('Green')
  textSize(30);
  text(foodKcal+'kcal', 300, 1100);
}




step recorder:
var step = 0;
var kcal = 0;
var fastStep = 0;
var midiumStep = 0; 
var slowStep = 0; 
var fastKcal = 0;
var midiumKcal = 0; 
var slowKcal = 0; 

function setup() {
  createCanvas(displayWidth,displayHeight);
  
}

function draw() {
  background(0);
  fill('Green')
  textSize(30);
  text(step, 30, 30);
  text(kcal, 30, 60);
  text("steps", 150, 30);
  text("kcal", 150, 60);
  
  if ( 100 < accelerationX ) {
    fastStep += 1;
    fastKcal = 0.1 * fastStep 
  }
  
  if ( 50 > accelerationX && accelerationX > 20) {
    mediumStep += 1;
    midiumKcal = 0.05 * mediumStep 
  }
    
  if ( 20 > accelerationX && accelerationX > 10 ) {
    slowStep += 1;
    slowKcal = 0.25 * slowStep
  }
  if (accelerationX < 10) {
    Nostep =0;
  }
  
  step = fastStep + midiumStep + slowStep ;
  kcal = fastKcal + midiumKcal + slowKcal ;
}

  


Week 13

revised step recorder code : 

var step = 0;
var kcal = 0;
var fastStep = 0;
var midiumStep = 0; 
var slowStep = 0; 
var fastKcal = 0;
var midiumKcal = 0; 
var slowKcal = 0; 

function setup() {
  createCanvas(displayWidth,displayHeight);
  
}

function draw() {
  background(0);
  fill('Green')
  textSize(30);
  text(step, 30, 30);
  text(kcal, 30, 60);
  text("steps", 150, 30);
  text("kcal", 150, 60);
  
  if ( 100 < accelerationX ) {
    fastStep += 1;
    fastKcal = 0.1 * fastStep 
  }
  
  if ( 50 > accelerationX && accelerationX > 20) {
    mediumStep += 1;
    midiumKcal = 0.05 * mediumStep 
  }
    
  if ( 20 > accelerationX && accelerationX > 10 ) {
    slowStep += 1;
    slowKcal = 0.25 * slowStep
  }
  if (accelerationX < 10) {
    Nostep =0;
  }
  
  step = fastStep + midiumStep + slowStep ;
  kcal = fastKcal + midiumKcal + slowKcal ;
}








food selection code ( with error ):

var button;
var sakedonKcal = 650; 
var kimbabKcal = 400;
var americanoKcal = 15; 
var kcalPlus = 0;

  function setup() {
  createCanvas(displayWidth,displayHeight);
  background(0);

}
function draw() {
  // kcalPlus = 
  background(0);
  noFill();
  stroke(255, 255, 255);
  strokeWeight(4);
  rect(displayWidth*2/10,displayWidth*8/10, displayHeight*14/20, displayHeight*18/20);
  fill(255,0,0);
  textSize(30);
  text("TOTAL",kcalPlus,"kcal", displayWidth/2 , dispalyHeight*8/10);
  
  eatSakedon = createButton('Sakedon');
  eatSakedon.position(displayWidth*4/10, 10);
  eatSakedon.mousePressed(addKcal);
  
  eatKimbab = createButton('Kimbab');
  eatKimbab.position(displayWidth*5/10, 30);
  eatKimbab.mousePressed(addKcal);
  
  eatAmericano = createButton('Americano');
  eatAmericano.position(displayWidth*6/10, 50);
  eatAmericano.mousePressed(addKcal);
    
  //still working on adding food buttons and shapes 

}

function addKcal() {
 // I WANT TO WRITE A FUCTION THAT ADDS TOTAL CALORIES CONSUMED TO PRINT kcalPLUS 
}



Week 12

strange Step recorder Code : 
( It does work but I don't know why ) 

var step = 0;
var kcal = 0;

function setup() {
  createCanvas(displayWidth,displayHeight);
}

function draw() {
  background(0);
  fill('Green')
  textSize(30);
  text(step, 30, 30);
  text(kcal, 30, 60);
  text("steps", 100, 30);
  text("kcal", 100, 60);
  
  if ( 50 < accelerationX ) {
    step += 1;
    kcal = 0.09 * step 
  }
  
  if ( 50 > accelerationX > 20) {
    step += 1;
    kcal = 0.05 * step 
  }
    
  if ( 20 > accelerationX > 10 ) {
    step += 1;
    kcal = 0.03 * step
  }
  if (accelerationX < 10) {
    step += 0;
  }
}



step recorder 
( It doesn't work and I don't know why )

var fastStep = 0;
var midiumStep = 0; 
var slowStep = 0; 
var fastKcal = 0;
var midiumKcal = 0; 
var slowKcal = 0; 

function setup() {
  createCanvas(displayWidth,displayHeight);
  step = fastStep + midiumStep + slowStep ;
  kcal = fastKcal + midiumKcal + slowKcal ;
}

function draw() {
  background(0);
  fill('Green')
  textSize(30);
  text(step, 30, 30);
  text(kcal, 30, 60);
  text("steps", 150, 30);
  text("kcal", 150, 60);
  
  if ( 100 < accelerationX ) {
    fastStep += 1;
    fastKcal = 0.1 * fastStep 
  }
  
  if ( 50 > accelerationX > 20) {
    mediumStep += 1;
    midiumKcal = 0.05 * mediumStep 
  }
    
  if ( 20 > accelerationX > 10 ) {
    slowStep += 1;
    slowKcal = 0.25 * slowStep
  }
  if (accelerationX < 10) {
    Nostep =0;
  }
}





Step recorder Code using deviceMoved :

var step = 0;
let threshold = 250;

function setup() {
  createCanvas(displayWidth,displayHeight);
}

function deviceMoved() {
  step = step + 0.01;
}

function draw() {
  background(0);
  fill('Green')
  textSize(30);
  text(step, 30, 30);
}
  
=> Cannot calculate the kcal. difference between speed.
ex) slow walking : 3.0 kcal / min 
fast walking: 4.5 kcal / min 
running: 9 kcal / min




  

Week11


       
String[] food = { "fried noodle", "Kimbab", "Sakedong" };
float[] calorie = { 500, 450, 650 };

JSONArray values;


//

Calorie Burn 

CB = [0.0215 x KPH**3 - 0.1765 x KPH**2 + 0.8710 x KPH + 1.4577] x WKG x T

CB = Calorie burn (in calories)
KPH = Walking speed (in kilometres per hour)
WKG = Weight (in kilograms)
T = Time (in hours)





1 2 3