p5.js Web Editor | cclab_assignment_9

xxxxxxxxxx
let myData;
​
let z = 0;
​
let chi_ = 0;
​
let rectLocation = [];
​
let dayCount = 0;
​
let stressLevel;
​
let fin_msg = false;
​
//Load JSON and Images
function preload() { 
  myData = loadJSON('gabestresstracker.json');
  stress_0 = loadImage('assets/stress_0.png');
  stress_1 = loadImage('assets/stress_1.png');
  stress_2 = loadImage('assets/stress_2.png');
  stress_3 = loadImage('assets/stress_3.png');
  stress_4 = loadImage('assets/stress_4.png');
  stress_5 = loadImage('assets/stress_5.png');
}
​
function setup() {
  createCanvas(600, 600);
  
  
  //setInterval(chi, 4000);
  setInterval(hour_increment, 166.67);
  setTimeout(fin, 28000);
  
    
  // create vector that keeps track of the location of the rect
  
  let x_ = 10;
  for (let i = 0; i <= 23; i++ ){
    rectLocation[i] = createVector(x_,height/2);
    x_ += 25.25;
  }
     
  
}
​
function draw() {
  //Loop Weeks
  if (dayCount == myData.gabeStressTracker.length){
    dayCount = 0;
  }
  //Indicate Stress Level
  stressLevel = myData.gabeStressTracker[dayCount].stressLevel;
  background(255);
  
  //Colors for circles
  let day_blend_1 = color(random(0, 65),random(201, 221),random(252, 255));
​
let night_blend_1 = color(random(133, 107),random(89, 73),random(136, 132));
  
  let z = 10;
  
  //Create Stress Smileys
  if (stressLevel == 0){
    image(stress_0, (width/2)-150, (height/2)-150);
    stress_0.resize(300, 300);
  } else if (stressLevel == 1){
    image(stress_1, (width/2)-150, (height/2)-150);
    stress_1.resize(300, 300);
  } else if (stressLevel == 2){
    image(stress_2, (width/2)-150, (height/2)-150);
    stress_2.resize(300, 300);
  } else if (stressLevel == 3){
    image(stress_3, (width/2)-150, (height/2)-150);
    stress_3.resize(300, 300);
  } else if (stressLevel == 4){
    image(stress_4, (width/2)-150, (height/2)-150);
    stress_4.resize(300, 300);
  } else if (stressLevel == 5){
    image(stress_5, (width/2)-150, (height/2)-150);
    stress_5.resize(300, 300);
  }
  
      for (let o = 0; o <= 23; o++ ){
    
    var target = createVector(z,height-(stressLevel*120));
​
    var distance = target.dist(rectLocation[o]);
    
    var mappedDistance;
    
    //Create stress circles
    if ( o == 0 || o == 23 ){
      mappedDistance = map(distance, 100, 0, 0.8, 1.00);
    } else if ( o == 1 || o == 22 ){
      mappedDistance = map(distance, 100, 0, 0.85, 1.00);
    } else if ( o == 2 || o == 21 ){
      mappedDistance = map(distance, 100, 0, 0.95, 1.00);
    } else if ( o == 3 || o == 20 ){
      mappedDistance = map(distance, 100, 0, 1.05, 1.00);
    } else if ( o == 4 || o == 19 ){
      mappedDistance = map(distance, 100, 0, 1.15, 1.00);
    } else if ( o == 5 || o == 18 ){
      mappedDistance = map(distance, 100, 0, 1.25, 1.00);
    } else if ( o == 6 || o == 17 ){
      mappedDistance = map(distance, 100, 0, 1.35, 1.00);
    } else if ( o == 7 || o == 16 ){
      mappedDistance = map(distance, 100, 0, 1.5, 1.00);
    } else if ( o == 8 || o == 15 ){
      mappedDistance = map(distance, 100, 0, 1.65, 1.00);
    } else if ( o == 9 || o == 14 ){
      mappedDistance = map(distance, 100, 0, 1.8, 1.00);
    } else if ( o == 10 || o == 13 ){
      mappedDistance = map(distance, 100, 0, 1.9, 1.00);
    } else if ( o == 11 || o == 12 ){
      mappedDistance = map(distance, 100, 0, 2.00, 1.00);
    }    
    else {
      mappedDistance = map(distance, 100, 0, 1.6, 0.5);
    }
    
    target.sub(rectLocation[o]);
​
    target.normalize();
​
    target.mult(mappedDistance);  
​
    rectLocation[o].add(target);
    
    push();
    noStroke();
    //Set color for stres circles
    if(dayCount == 0){
      if(o < 7) {
        fill(night_blend_1);
      } else {
        fill(day_blend_1);
      }
    } else if (dayCount == 1){
      if(o < 7) {
        fill(night_blend_1);
      } else {
        fill(day_blend_1);
      }
    } else if (dayCount == 2){
      if(o < 9) {
        fill(night_blend_1);
      } else {
        fill(day_blend_1);
      }
    } else if (dayCount == 3){
      if(o < 9) {
        fill(night_blend_1);
      } else {
        fill(day_blend_1);
      }
    } else if (dayCount == 4){
      if(o < 8) {
        fill(night_blend_1);
      } else {
        fill(day_blend_1);
      }
    } else if (dayCount == 5){
      if(o < 8) {
        fill(night_blend_1);
      } else {
        fill(day_blend_1);
      }
    } else {
      if(o < 8) {
        fill(night_blend_1);
      } else {
        fill(day_blend_1);
      }
    }
      
    ellipse(rectLocation[o].x, rectLocation[o].y, 25,25);
    pop();
    
    z += 25.25;
  }
​
  
  push();
  fill(255);
  blendMode(DIFFERENCE);
  rect(width+1, -1, chi_, height+2);
  pop();
  
  
  
  
  push();
  textSize(12);
  blendMode(DIFFERENCE);
  textAlign(RIGHT);
 
  strokeWeight(1);
  fill(255);
  text("Level 0", 0, 585, width);
  text("Level 1", 0, 465, width);
  text("Level 2", 0, 345, width);
  text("Level 3", 0, 225, width);
  text("Level 4", 0, 105, width);
  text("Level 6", 0, 0, width);
  strokeWeight(1);
  stroke(255);
  line(0, 120, width, 120);
  stroke(255);
  line(0, 240, width, 240);
  stroke(255);
  line(0, 360, width, 360);
  stroke(255);
  line(0, 480, width, 480);
  fill(255);
  textSize(32);
  textAlign(CENTER);
  text("Stress Level Tracker", 0, 40, width);
  text(myData.gabeStressTracker[dayCount].date, 0, 550, width);
  pop();
  if (fin_msg == true){
    push();
    textSize(32);
    blendMode(DIFFERENCE);
    fill(255);
    textAlign(CENTER);
    text('You Made It Through A Week 👍', 0, 500, width);
    pop();
  }
  
}
​
/*
function chi() {
  
  
  
  chi_= 0;
  
  
}
*/
​
function fin() {
  fin_msg = true;
}
​
function hour_increment(){
  
  chi_-= 25.1;
  if (chi_ <= -600){
    dayCount++;
    chi_= 0;
  }
}
Cookies

Sketch Files

Console

Preview
