processingjs와 블렌드 및 오버레이 구현

Question

저는 processinjs 라이브러리와 약간 혼동 스럽습니다. 필요한 것은 오버레이를 사용하여 두 개의 이미지를 처리하는 것입니다. 첫 번째 이미지를 배경으로 사용하고 두 번째 이미지를 오버레이 효과로 사용하면 마침내 멋진 결과를 얻을 수 있습니다. 기본적으로 내 코드에서 내가 무엇을 가지고있다 :

HTML

<img src="background.png" /> 
<img src="imageoverlay.png"/> 

JS

PImage img = loadImage("background.png"); 
PImage img2 = loadImage("imageoverlay.png"); 
img.blend(img2, 0, 0, 33, 100, 67, 0, 33, 100, OVERLAY); 
image(img, 0, 0); 
image(img2, 0, 0); 

사람이 작동이 코드를 얻기 위해 PImage을 INI하는 방법을 알고 있나요?

Answer 1

이미지를 실제로 사용할 수 있도록해야합니다. Processing.js의 loadImage는 requestImage의 래퍼 일 뿐이므로 /* @pjs preload="..." */ 구문을 사용해야합니다. http://processingjs.org/reference/preload/

을 참조하십시오.