ICM Sands of Time

Code: https://editor.p5js.org/CastaZ/sketches/83eifzqa2

Idea:

Sands of Time was the midterm project I made for Time class. I made a clock out of colored sand. As the hands change, every second leaves traces and makes the color of the dial plate more chaotic. I want to show that entropy increases with time in this way. The arrow of time left traces by changing the color. I was intended to make a p5 version at that time, while failed. So I tried it again for the ICM final project.

Process:

I made a clock with different colors at the beginning. https://editor.p5js.org/CastaZ/sketches/aJ0JFbDy4 It’s all about drawing the arcs and map the second/minute/hour to rotating degrees.

The hardest part is about catching the pixels behind. My idea was to check which area the hand was in, then catch the pixels behind, and cover some pixels randomly to the next area. So that as time goes by, the dial becomes more and more chaotic.

To reach that, I need to 1. Track the position of the clock hand. 2. Calculate which area the clock hand is in. 3. Store the real-time pixel information in an array. 4. generate new pixel arrays and change some of the colors in them then cover the old ones.

Deconstruct algorithm

I firstly used forloop to get every points in the specific area, then compare the position of it to the hand position. If it is near the hand clock, then store it in the handPixels array.

  getUnderlyingPixels() {
    push();
    translate(this.translatedx, this.translatedy);

    this.handPixels = [];

    for (let i = 0; i < this.r; i++) {
      for (let j = 0; j < this.r; j++) {
        //if point is on segment
        let dist1 = dist(i, j, this.transCenterx, this.transCentery);
        let dist2 = dist(i, j, this.transTipx, this.transTipy);
        // console.log(dist1 + dist2);

        if ((dist1 + dist2) < this.r + this.thres) {
          //point is on segment when 1 is threshold
          let hPixel = {
            x: i,
            y: j,
            color: get(this.translatedx + i, this.translatedy + j)
          }
          this.handPixels.push(hPixel);
        }
      }
    }

    pop();
  }

There is 25% possibility to get the pixels beneathe. Set the new color information to the handpixels arrrays.

  setUnderlyingPixels() {
    push();
    translate(this.translatedx, this.translatedy);

    for (let i = 0; i < this.r; i++) {
      for (let j = 0; j < this.r; j++) {
        //if point is on segment
        let dist1 = dist(i, j, this.transCenterx, this.transCentery);
        let dist2 = dist(i, j, this.transTipx, this.transTipy);

        if ((dist1 + dist2) < this.r + this.thres) {
          //point is on segment when 1 is threshold
          if (random(1) < 0.25) {
            let minDist = this.r;
            let minP;
            this.handPixels.forEach((hp) => {
              let tempDist = dist(i, j, hp.x, hp.y);
              if (tempDist < minDist) {
                minP = hp;
                minDist = tempDist;
              }
            })
            set(this.translatedx + i, this.translatedy + j, minP.color);
            // console.log(minP.color);
          }
        }
      }
    }
    pop();
    //updatePixels();
  }