Draw tinted image only once when it is changed with CreateFileInput

p5.js Coding Questions
1

Hi!

I’m quite new to programming and I’m trying to make a poster generator, therefore I want people to be able to upload an image which needs to have a tint. On top of that image there are elements like circles and text which can be changed using sliders (so my sketch needs to run in an constant loop). I use three createGraphics buffers for this. 1 for the tinted image, 1 for the elements and 1 to combine them together. I found out that using tint just on the image didn’t work, so now I tint the complete image buffer.

Using tint over and over makes my sketch quite slow, so I prefer to do it only once when the image is changed. But when I tried to do this, the image disappears. However other elements on that same buffer do not disappear. I don’t understand why this is happening and I hope you can help me with this.

The code below is an example of my problem.

Thank you!

let inputimage;
let img;
let frame, frame2, ren;

function setup() {
  createCanvas(windowWidth, windowHeight);
  frame = createGraphics(400,400);
  frame2 = createGraphics(400,400);
  ren = createGraphics(800,400);
  inputimage = createFileInput(handleFile);
  inputimage.position(10,220);
}

function draw() {
  background(220);

  drawFrame2();
  drawRen();

  image(frame2,400,0);
  image(ren,0,0);
    
}

function drawFrame(){
  frame.clear();
  frame.ellipse(mouseX,40,40,70); //the ellipse stays visible
   

  frame.image(img, 0, 0, 200, 200); //the image disappears
  print('image');
  
  frame.push();
  frame.tint(255, 0, 0,); 
  frame.image(frame,0,0);
  frame.pop();
}

function drawFrame2(){
  if (img) { 
    frame2.image(img, 0, 0, img.width, img.height);
  }
}

function drawRen(){
  ren.clear();
  ren.image(frame,0,0);
  ren.image(frame2,400,0); 
}

function handleFile(file) {
  print(file);
  if (file.type === 'image') { 
    img = createImg(file.data, '');
    img.hide();
    drawFrame();
    print('handlefile');
  } else {
    img = null;
  }
}
2

When you use image() it puts the buffer on top of everything and with default blend mode covers everything. So with current code you would need to change blend mode. Other option is to simplify things.

I think you can manage with just one createGraphics buffer.
In setup() use createGraphics for the image buffer and apply tint to it.
In draw() use image to apply image buffer (instead of background()) to the canvas and then draw the circles and the text straight to the canvas.

3

The problem is that I can’t apply tint to the image buffer in set up, as the tint has to be able to change when the code is running. I found out that it did work with preloaded images, which were created with createImage, but it didn’t work with the createFileInput images, which were created with createImg. (unless I keep drawing them over and over, which make the sketch very slow). Right now I chose to leave the option to upload your own image out, and instead make them choose between 8 preloaded pictures.