Polygons/effect.js at main · NicholasCiuica/Polygons · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
class Effect {
  constructor(unitSize) {
      this.pointGrid = new PointGrid(unitSize);
      this.polygons = [];
      this.createPolygons();
  }

  createPolygons() {
      let g = this.pointGrid.points;
      for(let r = 0; r < this.pointGrid.numRows - 1; r++) {
          for(let c = 0; c < this.pointGrid.numCols - 1; c++) {
              let u, v;
              if((r + c) % 2 == 0) {
                  u = [{r: 0, c: 0}, {r: 1, c: 0}, {r: 0, c: 1}];
                  v = [{r: 1, c: 1}, {r: 1, c: 0}, {r: 0, c: 1}];
              } else {
                  u = [{r: 0, c: 1}, {r: 0, c: 0}, {r: 1, c: 1}];
                  v = [{r: 1, c: 0}, {r: 0, c: 0}, {r: 1, c: 1}];
              }
              let points = [];
              points.push(g[r + u[0].r][c + u[0].c]);
              points.push(g[r + u[1].r][c + u[1].c]);
              points.push(g[r + u[2].r][c + u[2].c]);
              this.polygons.push(new Polygon(points, "orange"));
              points = [];
              points.push(g[r + v[0].r][c + v[0].c]);
              points.push(g[r + v[1].r][c + v[1].c]);
              points.push(g[r + v[2].r][c + v[2].c]);
              this.polygons.push(new Polygon(points, "orange"));
          }
      }
  }

  update() {
      let radius = 200;
      for(let polygon of this.polygons) {
          const dotProduct = vectorDotProduct(polygon.forwardUnitNormal, polygon.unitVectorTo(pointLight));
          const reflectionMagnitude = Math.max(dotProduct, 0);
          const distanceMagnitude = Math.max(radius - polygon.distanceFrom(pointLight), 0) / radius;
          const hueMagnitude = 0.2 * reflectionMagnitude + 0.8 * distanceMagnitude;
          const lightnessMagnitude = 0.8 * reflectionMagnitude + 0.2 * distanceMagnitude;

          // base hue changes over time
          let baseHue = 280 + Date.now() / 1000;
          // add some variance using perlin noise
          baseHue += 60 * noise.perlin3(polygon.getCenter().x / 1000 * 2, polygon.getCenter().y / 1000 * 2, Date.now() / 1000 / 2);
          const hue = baseHue + hueMagnitude * 75;
          const lightness = 30 + lightnessMagnitude * 70;
          const color = `hsla(${hue}, 75%, ${lightness}%, 1)`;
          polygon.color = color;
          polygon.draw(ctx);
      }
  }
}