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);
}