1 files changed, 121 insertions, 0 deletions
diff --git a/vhosts/blog/static/my-icon.js b/vhosts/blog/static/my-icon.js
new file mode 100644
index 00000000..5b52ca3d
--- /dev/null
+++ b/vhosts/blog/static/my-icon.js
@@ -0,0 +1,121 @@
+const colorBackground = 'white';
+const color蜜柑の果実 = [255, 165, 0];
+const color蜜柑の内果皮 = [255, 255, 255];
+const color蜜柑のじょうのう = [255, 255, 255];
+const colorMosaic = [
+  [255, 165, 0],
+  [255, 140, 0],
+  [255, 215, 0],
+  [255, 205, 114],
+  [255, 210, 127],
+  [255, 192, 76],
+  [255, 169, 12],
+  [255, 228, 178],
+];
+const colorEye = [0, 0, 0];
+
+function setup() {
+  const container = document.getElementById("p5jsMyIcon");
+  const canvas = createCanvas(100, 100);
+  canvas.parent(container);
+
+  background(colorBackground);
+  frameRate(15);
+}
+
+function draw() {
+  if (4 <= frameCount % 15) {
+    return;
+  }
+
+  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蜜柑の果実);
+  noStroke();
+  ellipse(50, 50, 100, 100);
+
+  // 内果皮
+  noFill();
+  stroke(color蜜柑の内果皮);
+  strokeWeight(4);
+  ellipse(50, 50, 90, 90);
+
+  // じょうのう
+  stroke(color蜜柑のじょうのう);
+  strokeWeight(2);
+  for (let t = 0; t < 10; t++) {
+    push();
+    translate(50, 50);
+    rotate(t * PI / 5);
+    line(0, -45, 0, 0);
+    triangle(0, -40, -4, -45, 4, -45);
+    triangle(0, -20, -3, 0, 3, 0);
+    pop();
+  }
+}
+
+function drawMosaic() {
+  for (let dy = 0; dy < 10; dy++) {
+    for (let dx = 0; dx < 10; dx++) {
+      const y = dy * 10;
+      const x = dx * 10;
+      if (x < 50) {
+        continue;
+      }
+      if ((x - 45)**2 + (y - 45)**2 > 55**2) {
+        continue;
+      }
+      if (random() < 0.5) {
+        continue;
+      }
+      const [r, g, b] = random(colorMosaic);
+      noStroke();
+      fill(r, g, b, 192);
+      rect(x, y, 10, 10);
+    }
+  }
+}
+
+function drawEyes() {
+  noStroke();
+  fill(colorEye);
+  rect(30, 35, 6, 25, 2);
+  rect(64, 35, 6, 25, 2);
+}