레퍼런스 p5.Image

p5.Image

이미지를 표현하는 클래스(class)입니다. 이미지는 표시되거나 수정할 수 있는 픽셀 단위의 직사각형 격자(grid)입니다.

기존 이미지는 loadImage()를 호출하여 불러올 수 있습니다. 빈 이미지는 createImage()를 호출하여 생성할 수 있습니다.

p5.Image 객체에는 필터 적용이나 픽셀 값 수정과 같은 일반적인 작업을 수행하는 메서드가 있습니다.

예제

구문

p5.Image(width, height)

매개변수

width
Number:
height
Number:

메서드

pixelDensity

고밀도 디스플레이를 위한 픽셀 밀도를 가져오거나 설정합니다. 기본적으로 밀도는 1로 설정됩니다.

인수(argument) 없이 메서드를 호출하면 기본 밀도를 얻을 수 있으며, 숫자를 입력하여 밀도를 설정할 수 있습니다. 양수가 아닌 숫자가 입력되면 기본값은 1입니다.

loadPixels

p5.Image 객체에 있는 각 픽셀의 현재 값을 img.pixels 배열에 불러옵니다. 이 메서드는 픽셀 값을 가져오거나 수정하기 전에 호출해야 합니다.

updatePixels

img.pixels 배열의 RGBA 값을 사용하여 캔버스를 업데이트합니다.

img.updatePixels()img.pixels 배열의 값을 변경한 후에만 호출해야 합니다. 이러한 변경 사항은 img.loadPixels()를 호출한 직후에 바로 이루어지거나 img.set()를 호출하여 이루어질 수 있습니다.

선택적 매개변수(paremeter)인 x, y, width, height는 업데이트할 p5.Image 객체의 하위 섹션(subsection)을 정의합니다. 경우에 따라 이런 방식으로 성능을 향상시킬 수 있습니다.

p5.Image 객체를 GIF에서 불러온 경우, img.updatePixels()를 호출하면 현재 프레임의 픽셀이 업데이트됩니다.

get

p5.Image 객체에서 픽셀 또는 픽셀 영역을 가져옵니다.

img.get()은 사용하기 쉽지만 img.pixels보다 느립니다. 많은 픽셀 값을 읽을 때는 img.pixels를 사용하세요.

매개변수(parameter)가 없는 img.get()은 전체 이미지를 반환(return)합니다.

두 개의 매개변수가 있는 img.get()은 좌표로 해석합니다. 해당 지점의 픽셀의 [R, G, B, A] 값을 포함하는 배열을 반환합니다.

네 개의 매개변수가 있는 img.get()은 좌표와 면적으로 해석합니다. 이 때, 캔버스의 하위 섹션(subsection)을 p5.Image 객체로 반환합니다. 첫 번째 두 매개변수는 하위 섹션의 좌상단의 좌표입니다. 마지막 두 매개변수는 하위 섹션의 너비와 높이입니다.

img.get()을 사용하여 p5.Image 객체에 직접 작업할 수 있습니다.

set

p5.Image 객체 내에서 하나 또는 여러 개의 픽셀 색상을 설정합니다.

img.set()은 사용하기 쉽지만 img.pixels보다 느립니다. 많은 픽셀 값을 설정할 때는 img.pixels를 사용하세요.

img.set()은 첫 번째 두 매개변수를 x 및 y 좌표로 해석합니다. 마지막 매개변수는 그레이스케일 값, [R, G, B, A] 픽셀 배열, p5.Color 객체 또는 다른 p5.Image 객체로 해석합니다.

변경 사항이 표시되려면 img.set()을 사용한 후에 img.updatePixels()를 호출해야 합니다.

resize

p5.Image 객체의 크기를 주어진 widthheight로 조정합니다. 이미지의 원래 비율을 유지하려면 width 또는 height 중 하나에 0을 전달합니다. 예를 들어, 500 × 300 픽셀 크기의 이미지에 img.resize(50, 0)을 호출하면 이미지가 50 × 30 픽셀로 크기가 조정됩니다.

copy

소스 이미지에서 이 이미지로 픽셀을 복사합니다.

첫 번째 매개변수인 srcImage는 선택 사항이며, 복사할p5.Image 객체입니다. 소스 이미지가 전달되지 않으면 img.copy()를 사용하여 이 이미지의 한 영역을 다른 영역으로 복사할 수 있습니다.

다음 네 개의 매개변수 sx, sy, sw, sh는 소스 이미지에서 복사할 영역을 결정합니다. (sx, sy)는 영역의 좌상단입니다. swsh는 영역의 너비와 높이입니다.

다음 네 개의 매개변수 dx, dy, dw, dh는 복사할 이 이미지의 영역을 결정합니다. (dx, dy)는 영역의 좌상단입니다. dwdh는 영역의 너비와 높이입니다.

img.copy()를 호출하면 소스 영역이 대상 영역과 크기가 다른 경우에 크기를 조정합니다.

mask

다른 이미지를 로드하고 불러온 이미지의 알파 채널을 이 이미지의 알파 채널로 사용하여 이미지의 일부를 표시하지 않도록 가리는 것입니다. 마스크는 누적되며, 이미지 객체에 적용된 후에는 제거할 수 없습니다.

filter

이미지에 이미지 필터를 적용합니다.

미리 정의된 옵션은 다음과 같습니다:

INVERT 이미지의 색상을 반전시킵니다. 매개변수를 사용하지 않습니다.

GRAY 이미지를 그레이스케일로 변환합니다. 매개변수를 사용하지 않습니다.

THRESHOLD 이미지를 흑백으로 변환합니다. 임계값을 초과하는 그레이스케일 값의 픽셀은 흰색이 됩니다. 나머지는 검정색으로 변환됩니다. 임계값은 0.0(검은색)과 1.0(흰색) 사이여야 합니다. 값이 지정되지 않은 경우, 0.5가 사용됩니다.

OPAQUE 알파 채널을 완전히 불투명하게 설정합니다. 매개변수를 사용하지 않습니다.

POSTERIZE 이미지의 색상 수를 제한합니다. 각 색상 채널은 지정된 색상 수로 제한됩니다. 2에서 255 사이의 값이 가능하지만, 결과는 낮은 값에서 가장 뚜렷하게 나타납니다. 기본값은 4입니다.

BLUR 이미지를 흐리게 만듭니다. 흐림 반경으로 흐림의 정도를 지정합니다. 값이 클수록 흐림이 증가합니다. 기본값은 4입니다. P2D 모드에서는 가우시안 블러를 사용합니다. WEBGL 모드에서는 박스 블러를 사용합니다.

ERODE 밝은 영역을 줄입니다. 매개변수를 사용하지 않습니다.

DILATE 밝은 영역을 늘립니다. 매개변수를 사용하지 않습니다.

blend

다른 이미지의 픽셀 영역을 이 이미지로 복사합니다.

첫 번째 매개변수인 srcImage는 혼합할 p5.Image 객체입니다.

다음 네 개의 매개변수 sx, sy, sw, sh는 소스 이미지에서 혼합할 영역을 결정합니다. (sx, sy)는 영역의 좌상단입니다. swsh는 영역의 너비와 높이입니다.

다음 네 개의 매개변수 dx, dy, dw, dh는 캔버스에서 혼합할 영역을 결정합니다. (dx, dy)는 영역의 좌상단입니다. dwdh는 영역의 너비와 높이입니다.

열 번째 매개변수인 blendMode는 이미지 색상을 혼합하는 데 사용되는 효과를 설정합니다. 옵션은 BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD, NORMAL입니다.

save

이미지를 파일로 저장합니다.

기본적으로 img.save()는 이미지를 untitled.png라는 PNG 이미지로 저장합니다.

첫 번째 매개변수인 filename은 선택 사항입니다. 파일 이름을 설정하는 문자열입니다. 파일 확장자가 포함되어 있으면, 예를 들어 img.save('drawing.png')과 같이 지정된다면 해당 형식으로 이미지가 저장됩니다.

두 번째 매개변수인 extension도 선택 사항입니다. 파일의 형식을 설정합니다. 'png' 또는 'jpg'를 사용할 수 있습니다. 예를 들어, img.save('drawing', 'jpg')는 파일을 drawing.jpg로 저장합니다.

참고: 브라우저는 파일을 즉시 저장하거나 사용자에게 대화 상자를 표시합니다.

이미지가 GIF 파일에서 로드된 경우에만 움직이는 GIF로 다운로드됩니다. 새 GIF를 생성하려면 saveGif()를 참조하세요.

reset

움직이는 GIF을 첫 프레임부터 다시 시작합니다.

getCurrentFrame

움직이는 GIF의 현재 프레임 인덱스를 불러옵니다.

setFrame

움직이는 GIF의 현재 프레임을 설정합니다.

numFrames

움직이는 GIF의 프레임 개수를 반환합니다.

play

img.pause()로 일시정지한 움직이는 GIF를 재생합니다.

pause

움직이는 GIF를 일시 정지합니다.

img.play()를 호출하여 GIF를 다시 재생할 수 있습니다.

delay

움직이는 GIF의 프레임 간 지연을 변경합니다.

첫 번째 매개변수인 delay는 밀리초(milliseconds) 단위의 지연 길이입니다.

두 번째 매개변수인 index는 선택 사항입니다. 입력한 경우에 index에 있는 프레임의 지연만 변경됩니다. 다른 모든 프레임은 기본 지연을 유지합니다.

Notice any errors or typos? Please let us know. Please feel free to edit src/image/p5.Image.js and open a pull request!

관련 레퍼런스