Рисунок для 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 -генерированную матрицу пикселей ... Но это кажется медленным и неприятным.

Оговорка: Изображение представляет собой p5.Image, так накладывая поверх <img> не будет достаточно.

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.