Combining the copy and blend functions into a 'brush'

Processing Coding Questions
1

Hi,

Processing beginner here! Go easy on me. I’m interested in making images with Processing and have an idea I’d like to try out, but I’m stuggling to find existing examples where it’s been done before. Here’s what I’m trying to acheive:

I’d like to have a source image and a target image, side-by-side, and a brush/cursor that copies pixels in the defined brush/cursor area of the source image to the target image when the mouse is clicked, but with a blend mode so that the target pixels that are being ‘brushed’ over with new pixels are still visible.

I’ve been looking at the copy() function and the blend() function as well and I get how both of them work, I’m just not sure how they could be combined with a brush style function as well.

Apologies if I’m using the wrong terminology here or if any of the above doesn’t make sense. But if it does, and it’s been covered before somewhere I would love to see how it’s done so I can plug the gaps in my knowledge.

2

Hello @JonoCES ,

Take a look here:

:)

3

Thanks @glv that was a useful article to read and helpful.

I’ve got things part-way there, I have created a cursor that when clicked, displays some of the background image in a pre-defined region. The next step that I can’t wrap my head around yet is how to actually copy, if that’s the right word, the image data when clicked so it stays there. At the moment it’s just displaying when the mouse is clicked. Again, sorry if this doesn’t make sense. Here’s my code below

4 
int sx,sy,sw,sh,dx,dy,dw,dh;

float cutoutW = 50;

void setup(){
  size(1500,1016);
}

void draw(){
  
     sx = mouseX;
     sy = mouseY;
     sw = int(cutoutW); 
     sh = int(cutoutW); 
    
     dx = mouseX;
     dy = mouseY;
     dw = int(cutoutW); 
     dh = int(cutoutW);
  
  PImage mining = loadImage("mining.jpg");
  PImage dandelions = loadImage("dandelions.jpg"); 
  
  if (mousePressed){
  mining.blend(dandelions, sx, sy, sw, sh, dx, dy, dw, dh, ADD);
  }
  
  image(mining, 0, 0);
}
1 Like
5

Hello @JonoCES,

Load the images once in setup() and then you are painting over them on the canvas:

PImage mining;
PImage dandelions, brush; 

void setup(){
  size(800, 600);
  mining = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Strokkur.jpeg/640px-Strokkur.jpeg");
  println(mining.width, mining.height);
  dandelions = loadImage("tiles.jpg"); 
}

References:
https://processing.org/reference/PImage.html

Future consideration:
https://processing.org/reference/PGraphics.html
https://processing.org/tutorials/rendering

Some examples using get() and PImage.get():

Examples < Click here to view 
PImage geyser, brush;

void setup()
  {
  size(1280, 427);
  brush = createImage(50, 50, RGB);
  
  geyser = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Strokkur.jpeg/640px-Strokkur.jpeg");
  println(geyser.width, geyser.height);
  }

void draw()
  {
  image(geyser, 0, 0);  
  brush = get(mouseX, mouseY, 50, 50); // "get" it from canvas
  image(brush, mouseX+width/2, mouseY);
  }

  PImage geyser, brush;
  
  void setup()
    {
    size(640, 427);
    brush = createImage(50, 50, RGB);
    
    geyser = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Strokkur.jpeg/640px-Strokkur.jpeg");
    println(geyser.width, geyser.height);
    }
  
  void draw()
    {
    brush = geyser.get(mouseX, mouseY, 50, 50); // "get" it from PImage geyser
    image(brush, mouseX, mouseY);
    }

References:
https://processing.org/reference/get_.html
https://processing.org/reference/PImage_get_.html

Examples are simple enough to understand if you look up the references here:
https://processing.org/

:)

6

Hi @JonoCES and welcome

Here you can find creative learning

https://funprogramming.org/

7

Thank you so much for your assistance with this guys, I’ve got it working. You’re the best!

1 Like