Silverback9

네….어제 많이 기다리셨죠…..미안해요….

네…밤에 공부를 못하고 잠들어 버렸어요….음….

신선한 바람은 참 중요한 것 같아요. 활기차고 집중된 생활을 위해서요.

오늘은 시원한 에어컨 바람이 감도는 곳에 있어요. 그래서, pixel에 관련된 내용을 공부하고 정리할 수 있었어요~~^^*.

pixel에 관한 레퍼런스 페이지예요.

https://p5js.org/reference/p5.Image/pixels/

이미지의 픽셀 위치에 대한 이차원 배열과, 각 위치의 픽셀의 칼라정보를 담은 일차원 배열 관계를 노트에 정리해 보았어요~~^^*

각 픽셀은 빨강, 초록, 파랑, 투명도 이 4가지 종류의 정보가 필요해요.

컴퓨터의 업무 효츌을 위해서, 4가지 정보를 지닌 픽셀의 이미지 데이터를 한 열로 나란히 펼쳐서 1차원 배열을 만드는 것이죠.

수평으로 얼마나(i) * 수직으로 얼마나(j) 가 픽셀 총 갯수가 되고요~

수평으로 얼마나 (i) * 수직으로 얼마나(j) * (세 가지 색상정보 + 불투명도 정보) 가 픽셀 이미지 데이터 배열의 길이가 되어요~^^*

그래서, 가로 3, 세로 3 크기의 이미지는 총 36개의 픽셀 이미지 데이터 요소를 가지게 되어요~^^*

(x,y) = (i, j) 의 픽셀 이미지 데이터는 픽셀 이미지 데이터 배열의 (i+j*width)*4번째부터 시작되어요.

그래서, width = 3, height = 3, 이미지의 (x,y) = (i , j) = (1,1) 픽셀의 이미지 데이터는 픽셀 이미지 데이터 배열의 (1+1*3)*4 = 16번째 요소부터 시작되어요~^^*

function setup() {
  createCanvas(512, 512);
  pixelDensity(1);
  background(0);
  loadPixels();
  const cx = width / 2;
  const cy = height / 2;
  const maxD = width / 2;
  for (let i = 0; i < width; i++) {
    for (let j = 0; j < height; j++) {
      const d = dist(cx, cy, i, j);
      //화면 중심과 (i, j) 픽셀까지의 거리입니다.

      const b = map(d, 0, maxD, 255, 0);
      //화면 중심과 (i, j) 픽셀까지의 거리가 0 이면 255, 
      //화면 너비의 1/2 이면 0 이 되도록 매핑합니다.     

      let index = (i + j * width) * 4;
        //(i,j)픽셀의 이미지 데이터 요소가 시작되는 지점입니다.

      pixels[index] = 255;
      pixels[index + 1] = 255;
      pixels[index + 2] = 255;
      //R,G, B 가 모두 255라서 흰색이 표현되겠습니다. 

      pixels[index + 3] = b;
      //불투명도는, 화면 중심에서 멀어질 수록 작아집니다. 
      //화면 중심은 짙은 흰색, 화면 가장자리는 투명한 흰색이 되겠습니다. 
      //
    }
  }
  updatePixels();
  save("texture.png");
}

오늘 픽셀 이미지 데이터를 담은 일차원 배열에 대해 함께 공부해 주시느라 수고 많으셨어요~^^* 감사의 선물이예요~~^^* 클릭하셔서, 삼각형 누르셔서, 선물을 다운받아 보셔요~^^* 우리 픽셀 이미지~~예쁘지요~~~^^*

부드럽고 은은한 동그라미를 우리 손으로 직접 프로그래밍을 해서 만들어 내다니….신기하고…앞으로의 코딩 공부가 더욱 설레고 기대가 되어요~~^^*

코딩으로 동그라미를 그리는 우리들의 실력도 점차 진화되겠지요~~^^*

손으로도 동그라미를 그릴 수 있지만, 코딩으로도 동그라미를 그릴 수 있다는 것을 체험해 본 멋진 날이예요~~^^*

내일은 이 동그라미를 가지고 멋진 화염을 만들어 볼까요~~^^*

네! 삶의 써클은 계속 되듯, 우리의 코딩 공부도 계속 됩니다~~^^*

네!! 꿈은 이루어 집니다!!!