p5.js로 pixel 조작을 하면 어쩐지 결과가 작아진다

2954 단어 processingp5.js
제목대로.

현상


loadPixels();
for (let y = 0; y < height; y++) {
  for (let x = 0; x < width; x++) {
    const idx = 4 * (y * height + x);
    pixels[idx] = 100; // r
    pixels[idx+1] = 100; // g
    pixels[idx+2] = 100; // b
    pixels[idx+3] = 100; // a
  }
}
updatePixels();

처럼 해도 캔버스 전체가 아니고 길쭉한 범위밖에 그려지지 않는다.
같은 현상.



원인



화면 해상도를 고려하지 않습니다.
해상도가 높은 디스플레이라면 픽셀 정보가 4 * width * height 의 수보다 많다.

해결 방법


pixelDensity(1) 로 한다.



혹은 해상도를 고려한 픽셀 조작을 하는가….
레이와 점의 최단 거리를 벡터 계산으로 구합니다.
p5.js가 재미있다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage