p5.js에서 node.js와 이미지 픽셀 데이터를 받아서 이미지를 화면에 뿌려줄때 주의할 점

요즘에 p5.js에서 node.js와 이미지 데이터 통신을 실험하고 있다.

먼저 p5.js 에서 post 통신으로 이미지 데이터를 주면 node.js에서 이미지데이터 필터링 작업을 한다음 다시 넘겨주는 식이다.

그리고 p5.js에선 받아온 데이터를 화면에 뿌려주게 된다.

위의 작업을 위해서 p5.js의 setup 함수 안에서 ajax를 함수를 써보았고 잘 동작하는 것을 보았다.

하지만 setup 함수 자체가 p5.js 만을 위해 만들어진 터라 데이터를 받은 후에 이전의 p5.js 함수와 제대로 연계가 안된다는 점을 발견하였다.

콕 찝어서 말하면 p5.js 안의 loadPixels, updatePixels 함수였는데,

먼저 loadPixels 함수를 써서 p5.js로 이미지 픽셀 데이터를 보내고, 통신 이후에 받아온 데이터를 image.pixels 데이터에 넣어서 업데이트 해주고, 다음에 updatePixels 함수를 쓴후 image 함수를 통해 화면에 뿌려주는 식이었는데, 결과가 제대로 나오지 않았다.

이러한 오류를 통해 알게된 사실은 loadPixels과 updatePixels 사이에 ajax 함수는 낄수없다는 것이다.

그래서 먼저 loadPixels 과 updatePixels을 사용하여 이미지 픽셀 데이터를 변수에 저장해 두고,

그 아래 해당 데이터를 통해 ajax 통신을 한다음 데이터를 받아온 함수에서 다시 loadPixels과 updatePixels을 써서 이미지 픽셀 데이터를 업데이트 해준다.

그리고 뿌려주었을때 결과가 제대로 반영되었다.

참고로 또하나 주의할 점은 ajax 통신을 통해 받아온 데이터를 그냥 바로 image.pixels 객체에 넣어주었더니 제대로 동작을 안 했다는 점이다.

하지만 for 루프를 써서 값을 하나하나 넣어줬을때는 동작하였다.

처음에 문제가 무었인지 살펴봤는데, 이미지의 픽셀의 배열 형식이 Uint8ClampedArray라는 것이었다.

고로 new Uint8ClampedArray 함수로 감싸줌으로 맞추어 주었는데, 그래도 제대로 동작하지 않았다.

결론적으로 제대로 이미지 픽셀 데이터를 넣어 업데이트 하려면, for 루프를 써서 각각의 픽셀값에 이미지 데이터를 넣어주는 방법 밖에는 없는거 같다.

여튼 작업을 하면서 이지가지 변수가 많아서 앞으로 계속 실험을 해봐야할거 같다.