이미지

이미지 기본 함수 살펴보기

• 이미지 함수들

• 기본 예제들

• https://p5js.org/ko/examples/image-load-and-display-image.html

• https://p5js.org/ko/examples/image-background-image.html

• https://p5js.org/ko/examples/image-pointillism.html

• https://p5js.org/ko/examples/image-create-image.html

• https://p5js.org/ko/examples/image-edge-detection.html

• https://p5js.org/ko/examples/image-edge-detection.html

• https://p5js.org/ko/examples/image-brightness.html

• https://p5js.org/ko/examples/image-copy-method.html

이미지 기본 세팅

• 이미지 파일 업로드 (파일 이름은 간결한 영어 추천)

• 이미지 데이터를 담을 글로벌 변수 img 생성.

• 이미지 사이즈를 조정. 이미지 픽셀 로드. image()함수로 캔버스에 직접 그려서 보여주기.

let img;
function preload() {
    img = loadImage('dog1.jpeg');  // 내가 업로드한 이미지.
}
function setup() {
    createCanvas(600, 800);
    img.resize(width, height);        // 이미지를 캔버스 너비, 높이 사이즈로 재조정.
    image(img, 0, 0, width, height);  // 이미지를 캔버스에 그리기.
    img.loadPixels();                 // 이미지 픽셀들 로드하기.

    rectMode(CENTER);
    angleMode(DEGREES);
}

이미지의 픽셀 원리

예제: https://openprocessing.org/sketch/1868620

이미지의 픽셀을 다른 도형으로 바꾸기

• 이미지 픽셀을 반복문으로 훑는다.

• 각 픽셀의 색깔 정보를 확인한다.

• 색깔/밝기 정보를 기준으로 조건을 나눈다.

• 각 조건에 따라 그리고 싶은 도형 코드를 작성한다.

function draw() {
  for (let y = 0; y < img.height; y = y + 10) {
    for (let x = 0; x < img.width; x = x + 10) {
      let pixel_index = (y * img.width + x) * 4;
      let darkness = (255 - img.pixels[pixel_index]) / 255;
    
      if(darkness > 0.5) {
        ellipse(0, 0, 10, 10);
      }
      if(darkness <= 0.5) { 
        line(0, 0, 10, 10);
      }
    }
  }
}

---

이미지 픽셀의 밝기 데이터

픽셀 인덱스, darkness 변수 계산 과정

let pixel_index = (y * img.width + x) * 4;
let darkness = (255 - img.pixels[pixel_index]) / 255;

• y * width => 이미지의 너비 px * 1행은 1번째 행에 담긴 첫번째 픽셀의 순서(인덱스)이다.

• y가 10이면, 10번째 행의 가장 첫번째(좌측) 픽셀의 순서(인덱스)이다.

• x만큼 더하면, 좌측에서 우측으로 픽셀 순서가 이동한다.

---

픽셀 인덱스, darkness 변수 계산 과정

let pixel_index = (y * img.width + x) * 4;
let darkness = (255 - img.pixels[pixel_index]) / 255;

• 4를 곱하는 이유는 한 픽셀마다 4가지의 색깔 정보 R, G, B, Alpha 값을 가지고 있고, 우리는 4번째 Alpha 값만 가져와서 밝은지 어두운지만 확인한다.

• 픽셀 순서를 구했으니 그 픽셀의 색깔/밝기를 알아내야 한다.

• img.pixels[] 리스트에는 이미지의 모든 픽셀들이 담겨져 있다.

• 그 리스트에서 원하는 순서 인덱스를 주어, 각 픽셀 정보의 Alpha 값에 접근한다.

---

픽셀 인덱스, darkness 변수 계산 과정

let pixel_index = (y * img.width + x) * 4;
let darkness = (255 - img.pixels[pixel_index]) / 255;

• Alpha 값의 최소는 0 (어둡고), 최대는 255(밝음)이다. darkness = 255 - 0 / 255 = 1; darkness = 255 - 255 / 255 = 0;

• darkness 변수의 값은 항상 0 ~ 1 사이일 것이다.

---