레슨 4 / 8·20분
이미지와 픽셀 조작
이미지 로딩과 표시
p5.js에서는 loadImage()로 이미지를 로드하고 image()로 캔버스에 표시할 수 있습니다. 또한 pixels 배열에 직접 접근하여 픽셀 단위로 이미지를 조작할 수 있습니다. 이를 통해 필터 효과, 색상 변환, 이미지 분석 등 다양한 처리가 가능합니다.
javascript
let img;
// preload()에서 이미지 미리 로딩
function preload() {
img = loadImage('photo.jpg');
}
function setup() {
createCanvas(800, 600);
}
function draw() {
background(0);
// 이미지 표시
image(img, 0, 0); // 원본 크기
image(img, 400, 0, 200, 150); // 크기 지정
// 이미지 일부 자르기 (sx, sy, sw, sh, dx, dy, dw, dh)
image(img, 0, 300, 200, 150, 100, 50, 300, 200);
// 틴트(색조) 적용
tint(255, 100, 100); // 빨간 틴트
image(img, 400, 300, 200, 150);
noTint(); // 틴트 초기화
}픽셀 조작
javascript
let img;
function preload() {
img = loadImage('photo.jpg');
}
function setup() {
createCanvas(800, 400);
img.resize(400, 400);
noLoop(); // draw()를 한 번만 실행
}
function draw() {
// 원본 표시
image(img, 0, 0);
// 픽셀 데이터 접근
img.loadPixels(); // 픽셀 배열 로드 (필수)
// 그레이스케일 변환
for (let i = 0; i < img.pixels.length; i += 4) {
let r = img.pixels[i]; // Red
let g = img.pixels[i + 1]; // Green
let b = img.pixels[i + 2]; // Blue
// Alpha는 img.pixels[i + 3]
let gray = (r + g + b) / 3;
img.pixels[i] = gray;
img.pixels[i + 1] = gray;
img.pixels[i + 2] = gray;
}
img.updatePixels(); // 변경사항 적용 (필수)
image(img, 400, 0); // 변환된 이미지 표시
}javascript
// 모자이크 효과
function setup() {
createCanvas(800, 600);
noStroke();
}
function draw() {
background(0);
img.loadPixels();
let blockSize = 10; // 모자이크 블록 크기
for (let x = 0; x < img.width; x += blockSize) {
for (let y = 0; y < img.height; y += blockSize) {
// 블록의 중앙 픽셀 색상 가져오기
let idx = ((y * img.width) + x) * 4;
let r = img.pixels[idx];
let g = img.pixels[idx + 1];
let b = img.pixels[idx + 2];
fill(r, g, b);
rect(x, y, blockSize, blockSize);
}
}
}- •preload() — setup() 전에 실행, 이미지/폰트 등 에셋 로딩
- •loadImage(url) — 이미지 파일을 p5.Image 객체로 로드
- •loadPixels() — 픽셀 배열에 접근하기 전에 반드시 호출
- •pixels[] — RGBA 순서로 4개씩 묶인 1차원 배열
- •updatePixels() — 픽셀 수정 후 반드시 호출하여 반영
💡
픽셀 인덱스 계산: index = (y * width + x) * 4로 특정 좌표의 픽셀에 접근합니다. 4를 곱하는 이유는 각 픽셀이 R, G, B, A 4개의 값을 가지기 때문입니다.