top of page

Description:

1. I have how many days, how many hours that i slept, and a wake up time in graph.

2. By click the mouse, you would get the time when i woke up.

2. The cloud and the emoji, represented when i haven't sleep for a day.

Visualization data

2018   /   04   /   18

VISUALIZATION DATA

​

Since my sleep schedule kinda mess, then i'm gonna represented about my sleep schedule by visualization data. Hoping that would be my motivation for sleep regularly. From the visualization that i created, it seems different because I've got a struggle how to make it good so i changed it a bit.

​

This is my drive:

https://drive.google.com/open?id=1V7Ar_d_UjVyladydP_ShAQAUJEsDTsjF

 

String []sleepSchedule;
int [] days;
int [] hours_slept;
int [] wake_up_times;
PImage stars;
PImage cloud;
PImage moon;
PImage sad;
PImage dizzy;
float xPos = 790;
float yPos = 100;
float xSpeed = 2;
float ySpeed = 2;


void setup() {
  size(1100, 800);
  sleepSchedule = loadStrings("sleep.txt");
  stars = loadImage("stars.png");
  cloud = loadImage("cloud.png");
  moon = loadImage("moon.png");
  sad = loadImage("sad.png");
  dizzy = loadImage("dizzy.png");

  String []temp0 = splitTokens(sleepSchedule[0], ", ");
  String []temp1 = splitTokens(sleepSchedule[1], ", ");
  String []temp2 = splitTokens(sleepSchedule[2], ", ");

  days = int(temp0);
  hours_slept =int(temp1); 
  wake_up_times = int(temp2);

  for (int i=0; i < days.length; i++) {
    println(days[i] + "days");
    println(hours_slept[i] + "Hours");
    println(wake_up_times[i] + " wake");
  }
}

void draw() {
  background(0);
  
  imageMode(CORNER);
  image(moon, 10, 20, 100, 100);
 


  line(200, 700, 200, 100);
  //line(900, 700, 900, 100);
  stroke(255);
  line(900, 700, 200, 700);

  textSize(40);
  fill(245, 183, 177);
  text("1", 250, 750);
  text("2", 360, 750);
  text("3", 470, 750);
  text("4", 580, 750);
  text("5", 690, 750);
  text("6", 800, 750);

  textSize(20);
  fill(247, 220, 111);
  text("1", 150, 600);
  text("2", 150, 510);
  text("3", 150, 420);
  text("4", 150, 330);
  text("5", 150, 240);
  text("6", 150, 150);

​

  for ( int i=0; i< 5; i++ ) {
    image(stars, 240 + i*110, 560 - hours_slept[i]*75, 40, 40);

    if ( mouseX > 240 + i*110 && mouseX < 240+i*110 + 40
      && mouseY > 560 - hours_slept[i]*75 && mouseY < 560 - hours_slept[i]*75+40
      && mousePressed ) {
      textSize(100);
      text( wake_up_times[i], 500, 400);
      image(sad, 700, 100, 60, 60);
    }
    
  }


  pushMatrix();
  imageMode(CORNER);
  image(cloud, xPos, yPos, 60, 40);
  image(dizzy, xPos, yPos, 50, 50);
  textSize(40);
  text("0", xPos, yPos);

  xPos = xPos + xSpeed;
  yPos = yPos + ySpeed;

  if (xPos>500) {
    xSpeed = -xSpeed;
  }
  if (xPos<60) {
    xSpeed = -xSpeed;
  }
  if (yPos>60) {
    ySpeed = -ySpeed;
  }
  if (yPos<600) {
    ySpeed = -ySpeed;
  }
  popMatrix();
}
 

Thank you.

CONTACT ME:

Success! Message received.

bottom of page