순수한 젠투펭귄님의 이글루입니다

HannahYUUN.egloos.com


포토로그


interactive video week 6


For this assignment, I've tried to follow the format of a normal smartphone screen size. 
The name of this app is "Your Screen Time' and its concept is checking screen time on your smartphone based on the top five apps you've used most last week.

When you click the screen, you can see what day you've most used your smartphone compared with other days by colour gradient.

And then, when you press your keyboard from 1 to 7, which mean from Mon day to Sun day each, you can see the bar graph based on your screen time. There will be 5 bars in the graph and each means Kakao talk, Youtube, Instagram, Facebook and Chrome. Also, you can check your screen time on the top of the app. if you want to go back, press your mouse button.


CODE :
 
PImage sp;
PImage light;
PImage star;
PFont yun;
PFont ng;
float mousex1 = 0;
float mousey1 = 0;
float mainY = 260;
float stpy = 681;
float ly = -228;
int nb = 60;

float[] st = new float[7];
float[] mon = new float[5];
float[] tue = new float[5];
float[] wed = new float[5];
float[] thu = new float[5];
float[] fri = new float[5];
float[] sat = new float[5];
float[] sun = new float[5];

void setup()
{
  size (450, 800);
  background (12, 17, 45);
  
  st[0] = 14.3;
  st[1] = 4.1;
  st[2] = 8.6;
  st[3] = 10.5;
  st[4] = 16.0;
  st[5] = 15.1;
  st[6] = 8.2;
  
  mon[0] = 35.4;
  mon[1] = 31.4;
  mon[2] = 11.4;
  mon[3] = 26.4;
  mon[4] = 35.4;  

  tue[0] = 5;
  tue[1] = 12;
  tue[2] = 34;
  tue[3] = 3;
  tue[4] = 6;
  
  wed[0] = 13;
  wed[1] = 21;
  wed[2] = 40;
  wed[3] = 23;
  wed[4] = 23;
  
  thu[0] = 40;
  thu[1] = 26;
  thu[2] = 34;
  thu[3] = 15;
  thu[4] = 17;
  
  fri[0] = 22;
  fri[1] = 18;
  fri[2] = 24;
  fri[3] = 10;
  fri[4] = 31;
  
  sat[0] = 12;
  sat[1] = 4;
  sat[2] = 7;
  sat[3] = 21;
  sat[4] = 44;
  
  sun[0] = 50;
  sun[1] = 32;
  sun[2] = 18;
  sun[3] = 14;
  sun[4] = 15;
  
  yun = loadFont ("YDIYGO310-48.vlw");
  ng = loadFont ("NanumGothicBold-48.vlw");
  sp = loadImage ("smartphone.png");
  light = loadImage ("light.png");
  star = loadImage ("star.png");
}

void draw()
{
  image (sp, 130, stpy, 200.4, 50.8);
  image (light, 0, ly, 450, 950.44);
  fill (255);
  textFont (yun);
  textSize (75);
  text ("Your", 120, mainY);
  text ("Screen", 120, mainY + 90);
  text ("Time", 120, mainY + 180);
  
   for (int i=0; i<7; i++)
  {
    if (ly ==0)
    {
      if (mouseY > 60 && mouseY < 654 && mouseX > 160 && mouseX <310)
      {
        fill (255);
      }
    else
    {
       fill (0,0,0,0);
    }
    rect (158, nb-2+i*90, 154, 84);
    }
  }

 if (ly==0)
  {
    noStroke();
    fill (15, 64, 116);
    rect (160, nb, 150, 80);
    rect (160, nb+90*5, 150, 80);
    fill (0, 182, 224);
    rect (160, nb+90*1, 150, 80);
    fill (5, 144, 198);
    rect (160, nb+90*2, 150, 80);
    rect (160, nb+90*6, 150, 80);
    fill (0,  106, 172);
    rect (160, nb+90*3, 150, 80);
    fill (22, 39, 99);
    rect (160, nb+90*4, 150, 80);

    fill(255);
    textFont (ng);
    textSize (40);
    text ("MON", 185, nb+54);
    text ("TUE", 197, nb+54+90*1);
    text ("WED", 190, nb+54+90*2);
    text ("THU", 196, nb+54+90*3);
    text ("FRI", 206, nb+54+90*4);
    text ("SAT", 199, nb+54+90*5);
    text ("SUN", 197, nb+54+90*6);
}

if (keyPressed)
{
  if (key == '1')
  {
    ly=-1;
    for (int i=0; i<mon.length; i++)
    {
      fill (0 + (mon[i]-8)*8, 182+(mon[i]-8)*8, 224+(mon[i]-8)*8);
      rect (45+(i*80), 800, 40, -mon[i]*15);
      fill (255);
      textFont (yun);
      textSize (80);
      text ("14.", 160, 110);
      textSize (30);
      text ("  hour", 280, 110);
      textSize (25);
      text ("Monday", 30, 40);
      text ("Total :", 30, 80);
      textFont (ng);
      textSize (30);
      fill (12, 17, 120);
      text ("K", 57, 780);
      text ("Y", 136, 780);
      text ("I", 221, 780);
      text ("F", 298, 780);
      text ("C", 376, 780);
    }
  }
}  

  if (keyPressed)
{
  if (key == '2')
  {
    ly=-1;
    for (int i=0; i<tue.length; i++)
    {
      fill (0 + (tue[i]-8)*8, 182+(tue[i]-8)*8, 224+(tue[i]-8)*8);
      rect (45+(i*80), 800, 40, -tue[i]*15);
      fill (255);
      textFont (yun);
      textSize (80);
      text (" 6.", 160, 110);
      textSize (30);
      text ("  hour", 280, 110);
      textSize (25);
      text ("Tuesday", 30, 40);
      text ("Total :", 30, 80);
      textFont (ng);
      textSize (30);
      fill (12, 17, 120);
      text ("K", 57, 780);
      text ("Y", 136, 780);
      text ("I", 221, 780);
      text ("F", 298, 780);
      text ("C", 376, 780);      
    }
  }
}

if (keyPressed)
{
  if (key == '3')
  {
    ly=-1;
    for (int i=0; i<wed.length; i++)
    {
      fill (0 + (wed[i]-8)*8, 182+(wed[i]-8)*8, 224+(wed[i]-8)*8);
      rect (45+(i*80), 800, 40, -wed[i]*15);
      fill (255);
      textFont (yun);
      textSize (80);
      text ("12.", 160, 110);
      textSize (30);
      text ("  hour", 280, 110);
      textSize (25);
      text ("Wednesday", 30, 40);
      text ("Total :", 30, 80);
      textFont (ng);
      textSize (30);
      fill (12, 17, 120);
      text ("K", 57, 780);
      text ("Y", 136, 780);
      text ("I", 221, 780);
      text ("F", 298, 780);
      text ("C", 376, 780);      
    }
  }
}

if (keyPressed)
{
  if (key == '4')
  {
    ly=-1;
    for (int i=0; i<thu.length; i++)
    {
      fill (0 + (thu[i]-8)*8, 182+(thu[i]-8)*8, 224+(thu[i]-8)*8);
      rect (45+(i*80), 800, 40, -thu[i]*15);
      fill (255);
      textFont (yun);
      textSize (80);
      text ("13.", 160, 110);
      textSize (30);
      text ("2 hour", 280, 110);
      textSize (25);
      text ("Thurs", 30, 40);
      text ("Total :", 30, 80);
      textFont (ng);
      textSize (30);
      fill (12, 17, 120);
      text ("K", 57, 780);
      text ("Y", 136, 780);
      text ("I", 221, 780);
      text ("F", 298, 780);
      text ("C", 376, 780);      
    }
  }
}

if (keyPressed)
{
  if (key == '5')
  {
    ly=-1;
    for (int i=0; i<fri.length; i++)
    {
      fill (0 + (fri[i]-8)*8, 182+(fri[i]-8)*8, 224+(fri[i]-8)*8);
      rect (45+(i*80), 800, 40, -fri[i]*15);
      fill (255);
      textFont (yun);
      textSize (80);
      text ("10.", 160, 110);
      textSize (30);
      text ("5 hour", 280, 110);
      textSize (25);
      text ("Friday", 30, 40);
      text ("Total :", 30, 80);
      textFont (ng);
      textSize (30);
      fill (12, 17, 120);
      text ("K", 57, 780);
      text ("Y", 136, 780);
      text ("I", 221, 780);
      text ("F", 298, 780);
      text ("C", 376, 780);      
    }
  }
}

if (keyPressed)
{
  if (key == '6')
  {
    ly=-1;
    for (int i=0; i<sat.length; i++)
    {
      fill (0 + (sat[i]-8)*8, 182+(sat[i]-8)*8, 224+(sat[i]-8)*8);
      rect (45+(i*80), 800, 40, -sat[i]*15);
      fill (255);
      textFont (yun);
      textSize (80);
      text (" 8.", 160, 110);
      textSize (30);
      text ("2 hour", 280, 110);
      textSize (25);
      text ("Saterday", 30, 40);
      text ("Total :", 30, 80);
      textFont (ng);
      textSize (30);
      fill (12, 17, 120);
      text ("K", 57, 780);
      text ("Y", 136, 780);
      text ("I", 221, 780);
      text ("F", 298, 780);
      text ("C", 376, 780);      
    }
  }
}

if (keyPressed)
{
  if (key == '7')
  {
    ly=-1;
    for (int i=0; i<sun.length; i++)
    {
      fill (0 + (sun[i]-8)*8, 182+(sun[i]-8)*8, 224+(sun[i]-8)*8);
      rect (45+(i*80), 800, 40, -sun[i]*15);
      fill (255);
      textFont (yun);
      textSize (80);
      text ("12.", 160, 110);
      textSize (30);
      text ("9 hour", 280, 110);
      textSize (25);
      text ("Sunday", 30, 40);
      text ("Total :", 30, 80);
      textFont (ng);
      textSize (30);
      fill (12, 17, 120);
      text ("K", 57, 780);
      text ("Y", 136, 780);
      text ("I", 221, 780);
      text ("F", 298, 780);
      text ("C", 376, 780);      
    }
  }
}

fill(255);
  mousex1 = mousex1 + (mouseX - mousex1);
  mousey1 = mousey1 + (mouseY - mousey1);
  image (star, mousex1, mousey1, 15, 15);
  circle (mousex1*1.05, mousey1*1.05, 8);

}

void mouseClicked()
{
    mainY = (mainY +600) * 1000;
    stpy = stpy +150;
    ly = 0;
}


Here is my zip file :


덧글

댓글 입력 영역