HW #11: Steps VS Work

    // KSENIA MARENNIKOVA

    // Creative Coding NYU Course

    // Week 11 Homework

    // Data visualization of my workload and physical activity during one week

​

​

    // SUGGESTION: Be sure the volume is on to get it more atmospheric!

​

​

    var imgClock;   // variable for a background image

​

    colors = ['#8833FF', '#00C9F9', '#5FE000', '#F5AB00', '#DE1B0B'];             // color palette

    days = ['SAT', 'SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI'];                     // days of the week

    dates = ['OCT 30', 'OCT 31', 'NOV 1', 'NOV 2', 'NOV 3', 'NOV 4', 'NOV 5'];    // exact date

    tasks = ['Steps', 'Mails sent by me', 'Normal mails received',                // categories

            'New contacts in LinkedIn', 'Promotions & Invitations'];

​

​

    function preload() {

          // To preload the data base and the background image  

      data = loadJSON("steps-vs-work-week.json");

      imgClock = loadImage('clock.jpg');

    }

​

​

    function setup() {

​

          // To play a background sound effect  

      audio = createAudio('heart-beat-with-clock-ticking.mp3');

      audio.autoplay(true);

      audio.loop();

          // To set the size of the canvas and the background image 

      createCanvas(900, 600);

      image(imgClock, 0, 0);

      textAlign(CENTER);

      noStroke();

​

          // To form the STEPS chart (left side of the graphics)

      push();

        translate(395, 115);

        fill(colors[0]);

        var spaceSteps = 10;

        for (var k = 0; k < data.Steps.length; k++) {

          rect(10, spaceSteps, data.Steps[k] / -50, 27);    // rectangular bars

          spaceSteps += 55;

          // To put numbers with a slight shadow (left side of the graphics)        

        push();

          drawingContext.shadowBlur = 20;

          drawingContext.shadowColor = '#000000';

          fill(255);

          textSize(17);

          textStyle(BOLD);

          textAlign(RIGHT);

          text(data.Steps[k], 0, spaceSteps - 35);          // numbers aligned with the bars

        pop();

        }

      pop();

          // To put a semi-transparent rectangular below the dates and days of the week 

      noStroke();

      fill(75, 99);

      rect(415, 111, 70, 378);

​

          // To put days of the week in one vertical line a bit below of the exact dates

      push();

        for (var n = 0; n < days.length; n++) {

          fill(255);

          textSize(24);

          textStyle(BOLDITALIC);

          text(days[n], 450, n * 55 + 152);

        }

      pop();

          // To put exact dates in one vertical line a bit above of the days of the week

      push();

        for (var l = 0; l < dates.length; l++) {

          fill(255);

          textSize(14);

          textStyle(BOLD);

          text(dates[l], 450, l * 55 + 130);

        }

      pop();

​

          // To put the graphics' legend

      push();

        for (var j = 0; j < 5; j++) {

          fill(75);

          textSize(15);

          textStyle(BOLD);

          textAlign(LEFT);

          text(tasks[j], 75, j * 35 + 420);   // vertical positioning of the explanations

          fill(colors[j % colors.length]);    // different colors of the representative squares

          rect(40, j * 35 + 403, 23, 23);     // vertical positioning of the representative squares

        }

      pop();

          // To put charts of the workload (right side of the graphics)

      push();

        translate(480, 100);

        workChart(data.OCT_30, 15, 20);

        workChart(data.OCT_31, 15, 75);

        workChart(data.NOV_1, 15, 130);

        workChart(data.NOV_2, 15, 185);

        workChart(data.NOV_3, 15, 240);

        workChart(data.NOV_4, 15, 295);

        workChart(data.NOV_5, 15, 350);

      pop();

          // To position graphics of the workload one above the other (right side of the graphics)

      function workChart(day, spaceX, spaceY) {

        for (var i = 0; i < day.length; i++) {

          fill(colors[i % colors.length + 1]);

          rect(spaceX, spaceY, day[i] * 45, 10);

          spaceY += 9;

          spaceY++;

        }

      }

​

          // To put a number 2, 4, 6, and 8 as the chart's references

      push();

      drawingContext.shadowBlur = 20;

      drawingContext.shadowColor = '#000000';

      fill(255);

      textSize(17);

      textStyle(BOLD);

      textAlign(RIGHT);

      text('2', 570, 365);

      text('4', 660, 365);

      text('6', 760, 365);

      text('8', 845, 365);

      pop();

          // To put the header of the graphics

      fill(75, 50);

      textSize(100);

      textStyle(BOLD);

      text("STEPS    WORK", 450, 90);

      fill(75);

      textSize(52);

      textStyle(BOLDITALIC);

      text("—VS—", 450, 65);

​

          // To put credentials of the materials used

      fill(75, 75);

      textSize(13);

      textStyle(BOLD);

      textAlign(LEFT);

      text('SOUND: Heart Beat With Clock Ticking | Envato Elements', 510, 545);

      text('PHOTO: Ocean Ng | Unsplash', 510, 570);

    }