Instead of drawing I want to show an image

moo

HALP!

So I have two canvas's

function setup() {
    createCanvas(300, 300);
    graphics = createGraphics(300, 300);
}

the bottom one I have created an animation with p5.js, the top one I want to import an image..

I want to do a

if (mouseIsPressed) {
    graphics.fill(255);
    graphics.stroke(255);
    graphics.ellipse(mouseX, mouseY, 50, 50)
}

but instead of drawing I want to show the image..

One idea is to have the top image transparent and use the mouseIsPressed to turn that ellipse not transparent, I tried doing it in reverse and making the graphics.fill transparent but of course it draws transparent over top of an image..

I am stuck.. HALP

koogs

you may get more answers if you include runnable examples rather than snippets

moo

TBH I don't have much because I am not really sure how to wrap my head around doing it ..

function rotation(degrees) {
  rotate(radians(degrees))
}

function setup() {
    createCanvas(300, 300);
    graphics = createGraphics(300, 300);
  }


function draw() {
    background(255, 127, 255);
      noStroke();
      fill(50, 15, 91);
    push() // CENTRAL TURQUOIUSE HEXAGON
    translate(150, 150);
    fill(0, 144, 207);
    rotate(frameCount/60)
    for (var i = 0; i < 6; i++) {
      rotation(60)
        triangle(-52, 30, -35, 0, 0, 0)
    }
    pop()

    var alpha = 0

    graphics.background('rgba(0,0,0, alpha)')

    // image(graphics, 0, 0);
    if (mouseIsPressed) {
    graphics.fill(255);
    graphics.stroke(255);
    graphics.ellipse(mouseX, mouseY, 50, 50)
}


//   alpha = alpha - .1
//   console.log(alpha)
    // function mousePressed() {
    //   clear();
    // }

    // mousePressed(graphicsClear)

    // function graphicsClear() {

    // if(mouseIsPressed) {

    // in here I want to show only the ellipse value of the graphics layer... 

  //}


}

This is what I have, I am playing just with a simple shape at the moment to try and wrap my head around working with two canvas's

moo

oopphh also, if you would know how I should format this properly let me know! my three `'s didn't work...

kfrajer

To format your code, edit post, select code and press ctrl+o. Ensure there is an empty line before and one after your code.

Kf