CODEWITHSUNDEEP
processingp5.js
j6m8
j6m8

Reputation: 2399

Drawing to p5.Image instead of to canvas

Given a loaded png image as a template, I want to enable a user to trace elements of the image. In p5, this is easy:

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

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

However, I want to then be able to save only the ellipses (without the underlying image). Is there a way to write to an Image instead of directly down to the canvas, so that I can lift the pixels of the trace without taking the original image with it?

My current plans are one of:

Caveat: The image is a p5.Image, so overlaying on top of a <img> won't be enough.

Upvotes: 4

Views: 5270

Answers (1)

Kevin Workman
Kevin Workman

Reputation: 42176

You can use the createGraphics() function to create an instance of p5.Renderer. You can then draw to the p5.Renderer and then overlay it on top of the image. Then you can access the pixel array of the p5.Renderer to get just the overlay, not the image.

Here is an example:

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.)

drawing to image overlay

More info can be found in the reference.

By the way there is a tag.

Upvotes: 6

Related Questions