//대상 이미지
PImage face;
//픽셀로 사용할 이미지 배열
PImage[] markup = new PImage[10];

void setup() {
  size(500, 640);
  background(255);
  //이미지 좌측 상단을 기준(0, 0)으로 함
  imageMode(CORNERS);
  //대상 이미지를 불러옴
  face = loadImage("song.jpg");
  for(int i=0; i<10; ++i){
    //p 이미지를 불러와서 markup 배열에 저장한다.
    //숫자가 증가할 수록 밝은 이미지이다.
    markup[i] = loadImage("p"+i+".png");
  }
  //draw() 함수를 한번만 실행함
  noLoop();
}

void draw() {
  int x;
  int y;
  color cc;
  int bright;
  int beforeY = 1;
  //p 이미지를 놓을 가로 단위
  int countX = 0;
  //p 이미지를 놓을 세로 단위
  int countY = 0;
  //대상이미지의 가로 검색 단위, 즉 대상 이미지를 acptW 픽셀 간격으로 밝기를 조사하겠단 말.
  int acptW = 2;
  //대상이미지의 세로 검색 단위
  int acptH = 2;
 
  //대상 이미지의 크기 만큼 검색
  for(y=0;y<face.height; y=y+acptW){
    for(x=0;x<face.width; x=x+acptH){
      //대상이미지의 x, y 픽셀의 컬러값을 cc 에 저장한다.
      cc = face.get(x, y);
      //컬러값 cc 를 25.5로 나누어 9 이하의 값을 얻는다.
      //brightness 의 값은 0~255의 정수형이기 때문에 bright 는 0~10까지의 수가 나온다.
      bright = min(int(brightness(cc) / 25.5), 9);
     
      //y값이 이전 값과 다르면 (= 검색순서상 세로값이 하나 증가하면)
      if(beforeY != y){
        beforeY = y;//y 값을 이전 값(beforeY)에 저장(beforeY 변경시킴)
        //countX 을 0으로 초기화 하여 p 이미지를 놓을 x 위치도 변경시켜준다.
        countX = 0;
        //countY 을 1 증가하여 p 이미지를 놓을 y 위치도 변경시켜준다.
        countY ++;
      }
     
      //p이미지(밝기에 따라 다름)를 p이미지의 크기*가로세로 단위 위치에 복사한다.
      image(markup[bright], countX * (markup[bright].width), countY * (markup[bright].height));
      //countX 을 1 증가하여 p 이미지를 놓을 x 위치도 변경시켜준다.
      countX ++;
    }
  } 
}