feat(content): apply mosaic effects to my icon in about page

2 files changed, 35 insertions, 5 deletions

diff --git a/public/about/index.html b/public/about/index.html
index 1cc98bd..212add1 100644
--- a/public/about/index.html
+++ b/public/about/index.html
@@ -39,7 +39,7 @@
           <div class="my-icon">
             <script src="/p5.min.js?h=51188c3517b547017eb034eab6141792">
             </script>
-            <script src="/my-icon.js?h=1c09b71d82ef061516003e01f937d2fe">
+            <script src="/my-icon.js?h=bfd5c06d2618e858be2e073b91adb8cc">
             </script>
             <div id="p5jsMyIcon">
             </div>
diff --git a/public/my-icon.js b/public/my-icon.js
index ec12d4d..5b52ca3 100644
--- a/public/my-icon.js
+++ b/public/my-icon.js
@@ -31,10 +31,40 @@ function draw() {
   clear();
 
   draw蜜柑();
+  applyMosaicEffect([10, 5, 2, 0][frameCount % 15]);
   drawMosaic();
   drawEyes();
 }
 
+function applyMosaicEffect(k) {
+  if (k === 0) {
+    return;
+  }
+
+  loadPixels();
+  noStroke();
+  const d = pixelDensity();
+  for (let y = 0; y < 100; y += k) {
+    for (let x = 50; x < 100; x += k) {
+      var r = 0, g = 0, b = 0;
+      for (let i = 0; i < k; i++) {
+        for (let j = 0; j < k; j++) {
+          const offset = 4 * d * ((y + i) * 100 * d + (x + j));
+          const r_ = pixels[offset];
+          const g_ = pixels[offset + 1];
+          const b_ = pixels[offset + 2];
+          const a_ = pixels[offset + 3];
+          r += a_ === 0 ? red(colorBackground) : r_;
+          g += a_ === 0 ? green(colorBackground) : g_;
+          b += a_ === 0 ? blue(colorBackground) : b_;
+        }
+      }
+      fill(r / k**2, g / k**2, b / k**2);
+      rect(x, y, k, k);
+    }
+  }
+}
+
 function draw蜜柑() {
   // 果実、外果皮
   fill(color蜜柑の果実);
@@ -55,8 +85,8 @@ function draw蜜柑() {
     translate(50, 50);
     rotate(t * PI / 5);
     line(0, -45, 0, 0);
-    triangle(0, -40, -04, -45, 04, -45);
-    triangle(0, -20, -03, 0, 03, 0);
+    triangle(0, -40, -4, -45, 4, -45);
+    triangle(0, -20, -3, 0, 3, 0);
     pop();
   }
 }
@@ -86,6 +116,6 @@ function drawMosaic() {
 function drawEyes() {
   noStroke();
   fill(colorEye);
-  rect(30, 35, 06, 25, 2);
-  rect(64, 35, 06, 25, 2);
+  rect(30, 35, 6, 25, 2);
+  rect(64, 35, 6, 25, 2);
 }