//Xin Xin

//How many times do you pick up your phone in a day, and why? iOS has a feature that allows you to see how many times you pick up your phone and what was the first app you used. I registered 3 days of that data and calculated the average, which I then logged here! I separated the apps in four categories: Social Media (CIRCLE), Entertainment (SQUARE), Productivity (TRIANGLE) and others (LINE).

//Each symbol represents at what time I picked up my phone and why. Use the slider to go into am.

​

let slider;

​

//load for the font

function preload() {

  newFont = loadFont('Roboto-Thin.ttf');

}

​

function setup() {

  createCanvas(600, 600);

​

  //slider

  slider = createSlider(1, 2, 2);

  slider.position(280, 570);

  slider.style('width', '40px');

  slider.style('color', '#8c8c8c')

}

​

function draw() {

​

​

​

  colorChange();

​

  background(bgColor);

​

  number();

  clock();

  data();

​

​

}

​

//numbers of the clock

function number() {

​

  textSize(30)

  textFont(newFont)

  fill(clockColor)

​

  text('12', 280, 80)

  text('6', 292, 540)

​

  text('1', 400, 113)

  text('5', 400, 510)

  text('11', 170, 113)

  text('7', 175, 510)

​

  text('2', 485, 195)

  text('4', 485, 425)

  text('10', 85, 195)

  text('8', 95, 425)

​

  text('3', 515, 310)

  text('9', 65, 310)

​

  text('am', 230, 590)

  text('pm', 330, 590)

}

​

//Changes the color of clock() and number() with slider

function colorChange() {

​

  let colorValue = slider.value();

​

  if (colorValue == 1) {

    bgColor = color(250);

    clockColor = color(100);

  } else {

    bgColor = color(30);

    clockColor = color(150);

  }

}

​

//Input for the data collected

function data() {

​

  let ampm = slider.value(); //So the data changes with the slider

  if (ampm == 1) {

    noStroke();

​

    //am data

​

    //12

    rotate(30);

​

    fill(255, 255, 0)

    rect(0, -150, 15, 15)

​

    fill(255, 31, 94);

    ellipse(0, -170, 15, 15)

    ellipse(0, -190, 15, 15)

​

​

    //11

    rotate(-30);

​

    fill(13, 211, 255)

    rect(0, -95, 15, 5, 2)

​

    fill(255, 31, 94);

    ellipse(0, -110, 15, 15)

    ellipse(0, -130, 15, 15)

    ellipse(0, -150, 15, 15)

    ellipse(0, -170, 15, 15)

    ellipse(0, -190, 15, 15)

​

​

​

    //10

    rotate(-30);

​

    fill(13, 211, 255)

    rect(0, -35, 15, 5, 2)

    rect(0, -50, 15, 5, 2)

​

    fill(255, 31, 94);

    ellipse(0, -90, 15, 15)

    ellipse(0, -110, 15, 15)

    ellipse(0, -130, 15, 15)

    ellipse(0, -150, 15, 15)

    ellipse(0, -170, 15, 15)

    ellipse(0, -190, 15, 15)

​

    fill(74, 240, 62)

    triangle(0, -75, -10, -60, 10, -60)

​

​

    //1

    rotate(90)

    fill(255, 255, 0)

    rect(0, -190, 15, 15)

​

    //2   

    rotate(30)

    fill(255, 255, 0)

    rect(0, -190, 15, 15)

    fill(74, 240, 62)

    triangle(0, -175, -10, -160, 10, -160)

​

    //6

    rotate(120)

    fill(255, 255, 0)

    rect(0, -190, 15, 15)

​

    //9

    rotate(90)

    fill(13, 211, 255)

    rect(0, -190, 15, 5, 2)

​

​

  } else {

​

    //pm data

    //12

    rotate(30);

​

    fill(74, 240, 62)

    triangle(0, -95, -10, -80, 10, -80)

​

    fill(255, 255, 0)

    rect(0, -110, 15, 15)

​

    fill(255, 31, 94);

    ellipse(0, -130, 15, 15);

    ellipse(0, -150, 15, 15);

    ellipse(0, -170, 15, 15);

    ellipse(0, -190, 15, 15);

​

    //1

    rotate(30);

​

    fill(255, 255, 0)

    rect(0, -130, 15, 15)

​

    fill(255, 31, 94);

    ellipse(0, -150, 15, 15);

    ellipse(0, -170, 15, 15);

    ellipse(0, -190, 15, 15);

​

    //2

    rotate(30);

​

    fill(255, 255, 0)

    rect(0, -130, 15, 15)

    rect(0, -150, 15, 15)

​

    fill(255, 31, 94)

    ellipse(0, -170, 15, 15);

    ellipse(0, -190, 15, 15);

​

    //3

    rotate(30);

​

    fill(255, 255, 0)

    rect(0, -150, 15, 15)

​

    fill(13, 211, 255)

    rect(0, -130, 15, 5, 2)

​

    fill(255, 31, 94);

    ellipse(0, -170, 15, 15);

    ellipse(0, -190, 15, 15);

​

    //4

    rotate(30);

​

    fill(13, 211, 255)

    rect(0, -85, 15, 5, 2)

​

    fill(74, 240, 62)

    triangle(0, -115, -10, -100, 10, -100)

​

    fill(255, 255, 0)

    rect(0, -130, 15, 15)

    rect(0, -150, 15, 15)

​

    fill(255, 31, 94);

    ellipse(0, -170, 15, 15);

    ellipse(0, -190, 15, 15);

​

    //5

    rotate(30);

​

    fill(13, 211, 255)

    rect(0, -90, 15, 5, 2)

    rect(0, -105, 15, 5, 2)

​

    fill(74, 240, 62)

    triangle(0, -135, -10, -120, 10, -120)

​

    fill(255, 255, 0)

    rect(0, -150, 15, 15)

​

    fill(255, 31, 94);

    ellipse(0, -170, 15, 15);

    ellipse(0, -190, 15, 15);

​

    //6

    rotate(30);

​

    fill(13, 211, 255)

    rect(0, -125, 15, 5, 2)

​

    fill(74, 240, 62)

    triangle(0, -155, -10, -140, 10, -140)

​

    fill(255, 255, 0)

    rect(0, -170, 15, 15)

​

    fill(255, 31, 94);

    ellipse(0, -190, 15, 15);

​

    //7

    rotate(30);

​

    fill(74, 240, 62)

    triangle(0, -55, -10, -40, 10, -40)

    triangle(0, -35, -10, -20, 10, -20)

​

    fill(255, 255, 0)

    rect(0, -90, 15, 15)

    rect(0, -70, 15, 15)

​

    fill(255, 31, 94);

    ellipse(0, -110, 15, 15);

    ellipse(0, -130, 15, 15);

    ellipse(0, -150, 15, 15);

    ellipse(0, -170, 15, 15);

    ellipse(0, -190, 15, 15);

​

    //8

    rotate(30);

​

    fill(13, 211, 255)

    rect(0, -65, 15, 5, 2)

    rect(0, -50, 15, 5, 2)

​

    fill(74, 240, 62)

    triangle(0, -115, -10, -100, 10, -100)

    triangle(0, -95, -10, -80, 10, -80)

​

    fill(255, 255, 0)

    rect(0, -130, 15, 15)

    rect(0, -150, 15, 15)

​

    fill(255, 31, 94);

    ellipse(0, -170, 15, 15);

    ellipse(0, -190, 15, 15);

​

    //9

    rotate(30);

​

    fill(255, 255, 0)

    rect(0, -130, 15, 15)

​

    fill(255, 31, 94);

    ellipse(0, -150, 15, 15);

    ellipse(0, -170, 15, 15);

    ellipse(0, -190, 15, 15);

​

    //10

    rotate(30);

​

    fill(255, 255, 0)

    rect(0, -170, 15, 15)

​

    fill(255, 31, 94);

    ellipse(0, -190, 15, 15);

​

    //11

    rotate(30);

​

    fill(13, 211, 255)

    rect(0, -110, 15, 5, 2)

​

    fill(255, 255, 0)

    rect(0, -130, 15, 15)

    rect(0, -150, 15, 15)

​

    fill(255, 31, 94);

    ellipse(0, -170, 15, 15);

    ellipse(0, -190, 15, 15);

  }

​

}

​

//Clock draws the lines for the clock

function clock() {

​

  rectMode(CENTER);

  noStroke();

​

  translate(width / 2, height / 2);

  angleMode(DEGREES)

​

  fill(clockColor);

  rect(0, -100, 2, 200, 10);

​

  rect(0, 100, 2, 200, 10);

​

  rect(100, 0, 200, 2, 10);

​

  rect(-100, 0, 200, 2, 10);

​

  rotate(30);

  rect(-100, 0, 200, 2, 10);

​

  rotate(30);

  rect(-100, 0, 200, 2, 10);

​

  rotate(60);

  rect(-100, 0, 200, 2, 10);

​

  rotate(30);

  rect(-100, 0, 200, 2, 10);

​

  rotate(60);

  rect(-100, 0, 200, 2, 10);

​

  rotate(30);

  rect(-100, 0, 200, 2, 10);

​

  rotate(60);

  rect(-100, 0, 200, 2, 10);

​

  rotate(30);

  rect(-100, 0, 200, 2, 10);

}