//Professor XinXin;

//Class Code 1. FA

​

// This digital self-portration is a visulization of the result of my typing practice. The list below are all in the unit WPM (words per minute). Practicing typing has already become one of my daily habit. During the recent two weeks, I together made up 5 groups of typing tests for myself(two day per test).For each group, I need to complete 10 runs. The results are below.

​

// I use this as a data source for my project. I see myself as a growing flower. For each time I break my typing record, the flower grows up a little bit. 

​

// This is also a interactive piece, which you can slide the cursor horizontally alone the x-axis. The bottom part of the screen has already been evenly divided into 5 slots.Each slot represet a single group of test. Inside the slots, the short-red-lines are the "checking" point. They will show up if the x position of the mouse is greater than their x position. The perpendicular intersection between the indicator and the horizontal data lines are the precise WPM result.

​

// The score appears to be the lowest(35WPM) at the top of the screen and the highest(60WPM) at the bottom of the screen.

​

​

​

let Typing1 = [47, 43, 49, 46, 45, 47, 51, 44, 46, 45];

let Typing2 = [52, 44, 55, 42, 39, 49, 46, 45, 42, 55];

let Typing3 = [46, 41, 44, 47, 48, 40, 47, 52, 40, 39];

let Typing4 = [48, 54, 58, 46, 51, 49, 55, 45, 46, 45];

let Typing5 = [35, 52, 53, 54, 55, 59, 51, 51, 51, 52];

​

let number;

​

​

​

function setup() {

  createCanvas(400, 400);

​

}

​

function draw() {

  background(0);

​

  text(mouseX, 200, 200)

  print(mouseX, mouseY);

​

  for (let a = 0; a < width; a += 80) {

    stroke(255);

    line(a, 380, a, 400);

    noStroke();

​

    for (let a = 55; a <= width; a += 80) {

      stroke(255, 200, 200);

      line(a, 390, a, 400);

      noStroke();

    }

​

    if (mouseX >= 0 && mouseX <= 55)

​

    {

      First(0.5 + mouseX / 5.5, mouseX / 10, mouseX * 18, 40, 40, 4 * mouseX, 5 + mouseX / 10);

​

    } else if (mouseX >= 55 && mouseX <= 80) {

      First(0.5 + mouseX / 5.5, 5.5, mouseX * 18, 40, 40, 660 - mouseX * 8, 21.5 - mouseX / 5);

      indicator();

      socre();

​

    }

​

​

    if (mouseX >= 80 && mouseX <= 135)

​

    {

      Second(0.5 + (mouseX - 80) / 5.5, (mouseX - 80) / 10, (mouseX - 80) * 17, 40, 40, 4 * (mouseX - 80), 5 + (mouseX - 80) / 10);

​

    } else if (mouseX >= 135 && mouseX <= 160) {

      Second(0.5 + (mouseX - 80) / 5.5, 5.5, (mouseX - 80) * 17, 40, 40, 660 - (mouseX - 80) * 8, 21.5 - (mouseX - 80) / 5);

      indicator();

      socre();

​

​

    }

​

    if (mouseX > 160 && mouseX <= 215)

​

    {

      Third(0.5 + (mouseX - 160) / 5.5, (mouseX - 160) / 10, (mouseX - 160) * 17, 40, 40, 4 * (mouseX - 160), 5 + (mouseX - 160) / 10);

​

    } else if (mouseX >= 215 && mouseX <= 240) {

      Third(0.5 + (mouseX - 160) / 5.5, 5.5, (mouseX - 160) * 17, 40, 40, 660 - (mouseX - 160) * 8, 21.5 - (mouseX - 160) / 5);

      indicator();

      socre();

​

    }

​

​

    if (mouseX > 240 && mouseX <= 295)

​

    {

      Forth(0.5 + (mouseX - 240) / 5.5, (mouseX - 240) / 10, (mouseX - 240) * 17, 40, 40, 4 * (mouseX - 240), 5 + (mouseX - 240) / 10);

​

    } else if (mouseX >= 295 && mouseX <= 320) {

      Forth(0.5 + (mouseX - 240) / 5.5, 5.5, (mouseX - 240) * 17, 40, 40, 660 - (mouseX - 240) * 8, 21.5 - (mouseX - 240) / 5);

      indicator();

      socre();

​

    }

​

​

    if (mouseX > 320 && mouseX <= 375)

​

    {

      Fifth(0.5 + (mouseX - 320) / 5.5, (mouseX - 320) / 10, (mouseX - 320) * 17, 40, 40, 4 * (mouseX - 320), 5 + (mouseX - 320) / 10);

​

    } else if (mouseX >= 375 && mouseX <= 400) {

      Fifth(0.5 + (mouseX - 320) / 5.5, 5.5, (mouseX - 320) * 17, 40, 40, 660 - (mouseX - 320) * 8, 21.5 - (mouseX - 320) / 5);

      indicator();

      socre();

​

    }

​

​

  }

​

  function socre()

​

  {

    number = int(mouseY / 16 + 35);

    fill(255);

    textSize(24);

    text(number, mouseX, mouseY);

    noFill();

  }

​

  function indicator() {

    for (let a = 55; a <= width; a += 80) {

      stroke(255, 200, 200, 50);

      line(a, 0, a, 400);

      noStroke();

    }

  }

​

​

}

​

function First(graphScale, graphRotation, graphY, xOff, yOff, Alpha, fillAlpha)

​

{

  push();

  translate(width / 2, height / 2 - graphY);

  rotate(graphRotation)

  scale(graphScale);

  beginShape();

  stroke(200, Alpha);

  strokeWeight(0.25)

  fill(75, 155, 130, fillAlpha);

  for (a = 0; a <= TWO_PI; a += PI / 6)

​

  {

    for (let r = 0; r <= Typing1.length; r++) {

      x = sin(a) * Typing1[r] * 2;

      y = cos(a) * Typing1[r] * 2;

      triangle(0, 0, x, y, x - xOff, y - yOff);

​

    }

​

  }

  endShape();

  noStroke();

​

  pop();

}

​

function Second(graphScale, graphRotation, graphY, xOff, yOff, Alpha, fillAlpha)

​

{

​

​

​

  push();

  translate(width / 2, height / 2 - graphY);

  rotate(graphRotation)

  scale(graphScale);

  beginShape();

  stroke(200, Alpha);

  strokeWeight(0.25)

  fill(140, 160, 100, fillAlpha);

  for (a = 0; a <= TWO_PI; a += PI / 6)

​

  {

    for (let r = 0; r <= Typing2.length; r++) {

      x = sin(a) * Typing2[r] * 2;

      y = cos(a) * Typing2[r] * 2;

      triangle(0, 0, x, y, x - xOff, y - yOff);

​

    }

​

  }

  noStroke();

​

  endShape();

  pop();

}

​

function Third(graphScale, graphRotation, graphY, xOff, yOff, Alpha, fillAlpha)

​

{

​

​

​

  push();

  translate(width / 2, height / 2 - graphY);

  rotate(graphRotation)

  scale(graphScale);

  beginShape();

  stroke(200, Alpha);

  strokeWeight(0.25)

  fill(170, 140, 180, fillAlpha);

  for (a = 0; a <= TWO_PI; a += PI / 6)

​

  {

    for (let r = 0; r <= Typing3.length; r++) {

      x = sin(a) * Typing3[r] * 2;

      y = cos(a) * Typing3[r] * 2;

      triangle(0, 0, x, y, x - xOff, y - yOff);

​

    }

​

  }

  noStroke();

​

  endShape();

  pop();

}

​

function Forth(graphScale, graphRotation, graphY, xOff, yOff, Alpha, fillAlpha)

​

{

​

​

​

  push();

  translate(width / 2, height / 2 - graphY);

  rotate(graphRotation)

  scale(graphScale);

  beginShape();

  stroke(200, Alpha);

  strokeWeight(0.25)

  fill(180, 190, 255, fillAlpha);

  for (a = 0; a <= TWO_PI; a += PI / 6)

​

  {

    for (let r = 0; r <= Typing4.length; r++) {

      x = sin(a) * Typing4[r] * 2;

      y = cos(a) * Typing4[r] * 2;

      triangle(0, 0, x, y, x - xOff, y - yOff);

​

    }

​

  }

  noStroke();

​

  endShape();

  pop();

}

​

function Fifth(graphScale, graphRotation, graphY, xOff, yOff, Alpha, fillAlpha)

​

{

​

​

​

  push();

  translate(width / 2, height / 2 - graphY);

  rotate(graphRotation)

  scale(graphScale);

  beginShape();

  stroke(200, Alpha);

  strokeWeight(0.25)

  fill(200, 200, 100, fillAlpha);

  for (a = 0; a <= TWO_PI; a += PI / 6)

​

  {

    for (let r = 0; r <= Typing5.length; r++) {

      x = sin(a) * Typing5[r] * 2;

      y = cos(a) * Typing5[r] * 2;

      triangle(0, 0, x, y, x - xOff, y - yOff);

​

    }

​

  }

​

  endShape();

  pop();

}