时间可视化

1.读后感 向帆 词意辨析：可视化、视觉化、Visualization及信息图形[J]装饰

作者在探讨“可视化”、“视觉化”等的概念辨析时，更多的聚焦于近现代至今为数据影响较深的新兴领域的变化，通过对不可视概念，或者难以直观体会的成果进行转化，以达到人类视觉可以识别并且理解背后深意的结果。但是细细想来，不只是数据时代、计算力发达的如今，再往前追溯，人们也在一直做着类似目的的行为，包括且不限于绘图，同样是将抽象具象化的方式。我们在追求某种概念的“可视化”、“视觉化”时，多种概念不对等的词语背后所附加的意义却并非含糊的，即“让双眼更直观的感受并理解”，我们追寻的方式或艺术或科学，都是在致力于较为直观的视觉感受改善，要是没有视觉（眼睛+大脑），“可听化”、“触觉化”或许也是主流发展的方向呢。

2.课后计时器练习

创作草图

作品完成过程图截选

作品完成图截选

阐释：

它们是一个个呼吸、运动的星球，它们彼此围绕、记录时间。

时针、分针、秒针分别对应着不同大小的星球，他们环绕的中心从固定与统一变为各自的上级星球，在自己的运动轨道上记录时间。

具体代码如下：

void setup() {

  size(600, 600);

}



void draw() {

  background(255);

  noStroke();

  float i = frameCount / 60.0f;

  float suffix = 20*sin(i);

  float parallexX = (mouseX / float(width) - 0.5)*15;

  float parallexY = (mouseY / float(height) - 0.5)*15;



  int D1 = 400;

  color a = color(#d3d09d);

  color b = color(#f9dd9e);

  color c = lerpColor(a, b, map(mouseX, 0, width, 0, 1));

  fill(c);

  ellipse(width/2, height/2, D1 + suffix, D1 + suffix);



  //Hour

  int D2 = 350;

  float angleh = 270 + hour()*30 + minute()*0.5 + second()*0.0083;

  float r = (D1 - D2)/2;

  float x = width/2 + r*cos(radians(angleh + 180));

  float y = height/2 + r*sin(radians(angleh + 180));

  color a1 = color(#e3a898);

  color a11 = color(#ed6c8a);

  color a12 = color(#e4018c);

  color b1 = color(#f5b494);

  color b11 = color(#90529b);

  color b12 = color(#233b9d);

  color c1 = lerpColor(a1, b1, map(mouseX, 0, width, 0, 1));

  color c11 = lerpColor(a11, b11, map(mouseX, 0, width, 0, 1));

  color c12 = lerpColor(a12, b12, map(mouseX, 0, width, 0, 1));

  fill(c1);

  ellipse(x, y, D2 + suffix, D2 + suffix);

  fill(c11);

  ellipse(x-parallexX*2, y-parallexY*2, D2*5/6 + suffix, D2*5/6 + suffix);

  fill(c12);

  ellipse(x-parallexX*0.5, y-parallexY*0.5, D2*2/3, D2*2/3);



  int D3 = (D1 - D2)*2;

  float rh = (D1 - D3)/2;

  float xh = width/2 + rh*cos(radians(angleh));

  float yh = height/2 + rh*sin(radians(angleh));

  color a2 = color(#78b8e0);

  color a21 = color(#9ba5a4);

  color a22 = color(#5b7352);

  color b2 = color(#edbacd);

  color b21 = color(#b3add9);

  color b22 = color(#63afe3);

  color c2 = lerpColor(a2, b2, map(mouseX, 0, width, 0, 1));

  color c21 = lerpColor(a21, b21, map(mouseX, 0, width, 0, 1));

  color c22 = lerpColor(a22, b22, map(mouseX, 0, width, 0, 1));

  fill(c2);

  ellipse(xh, yh, D3 + suffix, D3 + suffix);

  fill(c21);

  ellipse(xh+parallexX, yh+parallexY, D3*3/4 + suffix, D3*3/4 + suffix);

  fill(c22);

  ellipse(xh+parallexX*0.5, yh+parallexY*0.5, D3*1/2, D3*1/2);



  int D4 = D1*7/12;

  float r2 = (D1 - D4)/2;

  float x2 = width/2 + r2*cos(radians(angleh));

  float y2 = height/2 + r2*sin(radians(angleh));

  fill(c21, 128);

  ellipse(x2, y2, D4 + suffix, D4 + suffix);



  //Minute

  int D5 = 40;

  float rm = (D4 - D5)/2;

  float anglem = 270 + minute()*6 + second()*0.1;

  float xm = x2 + rm*cos(radians(anglem));

  float ym = y2 + rm*sin(radians(anglem));

  noStroke();

  color a3 = color(223, 218, 198);

  color b3 = color(#f297ae);

  color b31 = color(#fbcd5d);

  color c3 = lerpColor(a3, b3, map(mouseX, 0, width, 0, 1));

  color c31 = lerpColor(a3, b31, map(mouseX, 0, width, 0, 1));

  fill(c3, 128);

  ellipse(xm, ym, D5 + suffix, D5 + suffix);

  ellipse(xm-parallexX*0.2, ym-parallexY*0.2, D5*5/6 + suffix, D5*5/6 + suffix);

  ellipse(xm-parallexX*0.5, ym-parallexY*0.5, D5*2/3, D5*2/3);





  int D6 = D4*7/12;

  float r3 = (D4 - D6)/2;

  float x3 = x2 + r3*cos(radians(anglem));

  float y3 = y2 + r3*sin(radians(anglem));

  fill(c31, 64);

  ellipse(x3, y3, D6 + suffix, D6 + suffix);



  //Second

  int D7 = 10;

  float rs = (D6 - D7)/2;

  float angles = 270 + second()*6;

  float xs = x3 + rs*cos(radians(angles));

  float ys = y3 + rs*sin(radians(angles));

  noStroke();

  color a4 = color(224, 190, 24);

  color b4 = color(#eb6130);

  color c4 = lerpColor(a4, b4, map(mouseX, 0, width, 0, 1));

  fill(c4);

  ellipse(xs, ys, D7 + suffix, D7 + suffix);



  //timeText

  textSize(60);

  fill(c1);

  text(hour(), width/2-105, height/2-225);

  text(":", width/2-40, height/2-230);

  text(minute(), width/2-21, height/2-225);

  text(":", width/2+40, height/2-230);

  text(second(), width/2+55, height/2-225);

}