캔버스 대신에 p5.Image로 그리기

Question

템플릿으로로드 된 PNG 이미지가 주어지면 사용자가 이미지의 요소를 추적 할 수있게하려고합니다. P5,이 쉽습니다 :

setup() { 
    // Load image 
    var img = loadImage('...'); 
    image(img, 0, 0); 
} 

draw() { 
    ellipse(mouseX, mouseY, 2, 2); 
} 

그러나, 나는 다음 (기본 이미지없이) 만 타원을 저장할 수 있어야합니다. 캔버스 바로 아래가 아니라 Image에 쓸 수있는 방법이 있나요? 원본 이미지를 찍지 않고도 추적 픽셀을 들어 올릴 수 있습니까?

나의 현재 계획 중 하나입니다 :

• 오버레이 두 번째 P5 인스턴스 및 이미지에 오버레이 투명한 캔버스에 그리는 ... 그러나 이것은 유지하기 힘들어 보인다, 그리고 DOM이되는 것을 저하 될 수 있습니다 완벽한 정렬에서 벗어남
• ellipse을 사용하는 대신 createImage- 생성 된 픽셀 배열에 쓰십시오 ... 그러나 이것은 느리고 불쾌한 것처럼 보입니다.

주의해야 할 점은 : 이미지가 너무 충분하지 않을 것입니다 <img> 위에 오버레이하는 p5.Image입니다.

Answer 1

createGraphics() 함수를 사용하여 p5.Renderer의 인스턴스를 만들 수 있습니다. 그런 다음 p5.Renderer으로 그 다음 이미지 위에 겹쳐서 표시 할 수 있습니다. 그런 다음 p5.Renderer의 픽셀 배열에 액세스하여 이미지가 아닌 오버레이 만 얻을 수 있습니다.

var img; 
 
    var pg; 
 
    
 
    function preload() { 
 
     img = loadImage("https://www.gravatar.com/avatar/06ce4c0f7ee07cf79c81ac6602f5d502?s=32&d=identicon&r=PG"); 
 
    } 
 
    
 
    function setup(){ 
 
     createCanvas(300, 600); 
 
     pg = createGraphics(300, 300); 
 
    } 
 
    
 
    function mousePressed(){ 
 
     pg.fill(255, 0, 0); 
 
     pg.ellipse(mouseX, mouseY, 20, 20); 
 
    } 
 
    
 
    function draw() { 
 
     image(img, 0, 0, 300, 300); 
 
     image(pg, 0, 0); 
 
     image(pg, 0, 300); 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script> 
 
Click in the image to draw to the buffer below it! (View as full page to see the buffer.)

상세 정보가 the reference에서 찾을 수있다 : 여기

는 일례이다.

그런데 p5.js 태그가 있습니다.