JIYOU Park

let maxCellSize = 1000;   // Initial cellSize value
let minCellSize = 4;      // Final cellSize value
let currentCellSize = 2;

function setup() {
  createCanvas(400, 400);
  let currentCellSize = 330;
  for (let x = 0; x < width; x += currentCellSize) {
    for (let y = 0; y < height; y += currentCellSize) {
      // Calculate remaining space (boundary handling)
      // 남은 공간 계산 (경계 처리)
      let remainingWidth = min(currentCellSize, width - x);
      let remainingHeight = min(currentCellSize, height - y);

      // Divide the area into squares
      // 영역을 정사각형으로 분할
      divideIntoSquares(x, y, remainingWidth, remainingHeight);
    }
  }
  noLoop();
}

function drawSquareCell(x, y, size) {
  rect(x, y, size, size);
}

function divideIntoSquares(x, y, width, height) {
  // Draw immediately if it's a square
  // 정사각형인 경우 바로 그리기
  if (width === height) {
    drawSquareCell(x, y, width);
    return;
  }

  // Draw square based on the smaller dimension
  // 더 작은 변을 기준으로 정사각형 그리기
  let squareSize = min(width, height);

  if (width > height) {
    // If the width is greater than the height
    // 가로가 더 긴 경우
    drawSquareCell(x, y, squareSize);
    // Recursively handle the remaining area
    // 남은 영역을 재귀적으로 처리
    if (width - squareSize > 0) {
      divideIntoSquares(x + squareSize, y, width - squareSize, height);
    }
  } else {
    // If the height is greater than the width
    // 세로가 더 긴 경우
    drawSquareCell(x, y, squareSize);
    // Recursively handle the remaining area
    // 남은 영역을 재귀적으로 처리
    if (height - squareSize > 0) {
      divideIntoSquares(x, y + squareSize, width, height - squareSize);
    }
  }
}

const colorEmojis = {
  black: ['⚫️', '⬛️', '🖤', '📱', '💻', '⌚️', '🎮', '🎥'],
  gray: ['🌫️', '🐁', '🐘', '🦏', '🪨', '🗿', '🌪️', '🦭'],
  white: ['⚪️', '⬜️', '🤍', '🕊️', '🥚', '🌥️', '🍚', '🏐'],

  // Red tones (Hue 341-20 degrees)
  // 빨강계열 (341-20도)
  red: ['❤️', '🍎', '🍓', '🌹', '🏮', '🔴', '🫕', '🦞'],

  // Orange tones (Hue 21-45 degrees)
  // 주황계열 (21-45도)
  orange: ['🧡', '🍊', '🥕', '🦊', '🎃', '🦁', '🥭', '🦒'],

  // Yellow tones (Hue 46-70 degrees)
  // 노랑계열 (46-70도)
  yellow: ['💛', '🌟', '⭐️', '🌻', '🍋', '🐥', '🌼', '🌞'],

  // Yellow-green tones (Hue 71-110 degrees)
  // 연두계열 (71-110도)
  yellowGreen: ['🥬', '🥝', '🌿', '🍐', '🪴', '🌱', '🥒', '🐸'],

  // Green tones (Hue 111-170 degrees)
  // 초록계열 (111-170도)
  green: ['💚', '🌲', '🌳', '🥑', '🍀', '🌵', '🐢', '🥦'],

  // Cyan tones (Hue 171-210 degrees)
  // 청록/하늘계열 (171-210도)
  cyan: ['💠', '💧', '❄️', '🧊', '🩵', '🔹', '🎽', '🥏'],

  // Blue tones (Hue 211-260 degrees)
  // 파랑계열 (211-260도)
  blue: ['💙', '🌌', '🔷', '🫐', '👖', '🌀', '🥶', '🔵'],

  // Purple tones (Hue 261-290 degrees)
  // 보라계열 (261-290도)
  purple: ['💜', '🍇', '🔮', '☂️', '🌂', '👾️', '🟣', '🍆'],

  // Pink tones (Hue 291-340 degrees)
  // 분홍계열 (291-340도)
  pink: ['🎀', '🌸', '🍑', '🦩', '🧠', '🐷', '🌺', '👛']
};

function updateAnimationValues() {
  // Update cell size
  // 셀 크기 업데이트
  if (currentCellSize <= minCellSize) {
    cellSizeChangeRate = 0;  // Stop changing size if minimum is reached
  } 
  currentCellSize -= cellSizeChangeRate;

  // Update color change
  // 색상 변화 업데이트
  if (currentHue > 210) {
    hueChangeSpeed = -5; // Reverse direction if hue exceeds 210
  }
  else if (currentHue < 0) {
    hueChangeSpeed = 5; // Adjust direction if hue goes out of range (0-350)
  }
  currentHue += hueChangeSpeed;
}

function draw() {
  background(255);

  updateAnimationValues();     // Update animation values
  // 애니메이션 값 업데이트

  sourceImage.loadPixels();    // Load image pixel data
  // 이미지 픽셀 데이터 로드

  // Loop through the image in cell units
  // 이미지를 셀 단위로 순회
  for (let x = 0; x < sourceImage.width; x += currentCellSize) {
    for (let y = 0; y < sourceImage.height; y += currentCellSize) {
      // Calculate remaining space (boundary handling)
      // 남은 공간 계산 (경계 처리)
      let remainingWidth = min(currentCellSize, sourceImage.width - x);
      let remainingHeight = min(currentCellSize, sourceImage.height - y);

      // Divide the area into squares
      // 영역을 정사각형으로 분할
      divideIntoSquares(x, y, remainingWidth, remainingHeight);
    }
  }
}

// Function to recursively divide rectangular areas into squares
// 직사각형 영역을 정사각형으로 재귀적으로 분할하는 함수
function divideIntoSquares(x, y, width, height) {
  // Draw immediately if it's a square
  // 정사각형인 경우 바로 그리기
  if (width === height) {
    drawSquareCell(x, y, width);
    return;
  }

  // Draw square based on the smaller dimension
  // 더 작은 변을 기준으로 정사각형 그리기
  let squareSize = min(width, height);

  if (width > height) {
    // If the width is greater than the height
    // 가로가 더 긴 경우
    drawSquareCell(x, y, squareSize);
    // Recursively handle the remaining area
    // 남은 영역을 재귀적으로 처리
    if (width - squareSize > 0) {
      divideIntoSquares(x + squareSize, y, width - squareSize, height);
    }
  } else {
    // If the height is greater than the width
    // 세로가 더 긴 경우
    drawSquareCell(x, y, squareSize);
    // Recursively handle the remaining area
    // 남은 영역을 재귀적으로 처리
    if (height - squareSize > 0) {
      divideIntoSquares(x, y + squareSize, width, height - squareSize);
    }
  }
}

// Function to draw a square cell
// 정사각형 셀을 그리는 함수
function drawSquareCell(x, y, size) {
  colorMode(RGB);
  // Variables for calculating average color values
  // 평균값 계산을 위한 변수들
  let sumR = 0, sumG = 0, sumB = 0;
  let count = 0;

  // Sum up all pixel color values within the area
  // 해당 영역 내의 모든 픽셀 색상값 합산
  for (let dx = 0; dx < size; dx++) {
    for (let dy = 0; dy < size; dy++) {
      let p = (y + dy) * sourceImage.width + (x + dx);
      let i = p * 4;

      sumR += sourceImage.pixels[i];
      sumG += sourceImage.pixels[i + 1];
      sumB += sourceImage.pixels[i + 2];
      count++;
    }
  }

  // Calculate averages
  // 평균 계산
  let avgR = sumR / count;
  let avgG = sumG / count;
  let avgB = sumB / count;

  let c = [avgR, avgG, avgB, 255];
  let h = hue(c);
  let s = saturation(c);
  let br = brightness(c);

  // Select background color and emoji
  // 배경색과 이모지 선택
  let emojiSet;
  colorMode(HSB, 360, 100, 100, 1);

  if (s < 20 && br < 30) {
    emojiSet = colorEmojis.black;
  } else if (s < 20 && br >= 30 && br <= 70) {
    emojiSet = colorEmojis.gray;
  } else if (s < 20 && br > 70) {
    emojiSet = colorEmojis.white;
  } else {
    if (h <= 20 || h >= 340) {
      emojiSet = colorEmojis.red;
    }
    else if (h <= 45) {
      emojiSet = colorEmojis.orange;
    }
    else if (h <= 90) {
      emojiSet = colorEmojis.yellow;
    }
    else if (h <= 110) {
      emojiSet = colorEmojis.yellowGreen;
    }
    else if (h <= 170) {
      emojiSet = colorEmojis.green;
    }
    else if (h <= 210) {
      emojiSet = colorEmojis.cyan;
    }
    else if (h <= 260) {
      emojiSet = colorEmojis.blue;
    }
    else if (h <= 290) {
      emojiSet = colorEmojis.purple;
    }
    else {
      emojiSet = colorEmojis.pink;
    }
  }

  // Select emoji within the color set based on brightness
  // 밝기에 따라 같은 색상 세트 내에서 이모지 선택
  let emojiIndex = floor(map(br, 0, 100, 0, emojiSet.length));
  emojiIndex = constrain(emojiIndex, 0, emojiSet.length - 1);


  // Drawing background cells 배경셀 그리기
  noStroke();
  fill(currentHue, 50, 70); // hsb mode
  square(x, y, size);


  // Set emoji size to fit the cell
  // 이모지 크기를 셀 크기에 맞게 설정
  textAlign(CENTER, CENTER);
  textSize(size);
  push();
  drawingContext.globalAlpha = 0.4; // Value between 0.0 and 1.0
  text(emojiSet[emojiIndex], x + size / 2, y + size / 2 + size * 0.15);
  pop();
}