1 files changed, 91 insertions, 0 deletions
diff --git a/static/my-icon.js b/static/my-icon.js
new file mode 100644
index 0000000..ec12d4d
--- /dev/null
+++ b/static/my-icon.js
@@ -0,0 +1,91 @@
+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蜜柑();
+  drawMosaic();
+  drawEyes();
+}
+
+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, -04, -45, 04, -45);
+    triangle(0, -20, -03, 0, 03, 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, 06, 25, 2);
+  rect(64, 35, 06, 25, 2);
+}