# Combining the copy and blend functions into a 'brush'

**URL:** <https://discourse.processing.org/t/combining-the-copy-and-blend-functions-into-a-brush/37830>\
**Category:** Coding Questions\
**Created:** [July 4, 2022, 3:14pm UTC](https://discourse.processing.org/t/combining-the-copy-and-blend-functions-into-a-brush/37830 "2022-07-04T15:14:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![JonoCES](https://avatars.discourse-cdn.com/v4/letter/j/6de8d8/32.png) [@JonoCES](https://discourse.processing.org/u/JonoCES)\
**Post date:** [July 4, 2022, 3:14pm UTC](https://discourse.processing.org/t/combining-the-copy-and-blend-functions-into-a-brush/37830/1 "2022-07-04T15:14:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 4, 2022, 4:50pm UTC](https://discourse.processing.org/t/combining-the-copy-and-blend-functions-into-a-brush/37830/2 "2022-07-04T16:50:27Z")

</div>

Hello @JonoCES ,

Take a look here:

> **[Images and Pixels](https://processing.org/tutorials/pixels/)**
>
> How to load and display images as well as access their pixels.

`:)`

---

<div class="post-metadata">

**Author:** ![JonoCES](https://avatars.discourse-cdn.com/v4/letter/j/6de8d8/32.png) [@JonoCES](https://discourse.processing.org/u/JonoCES)\
**Post date:** [July 5, 2022, 8:32am UTC](https://discourse.processing.org/t/combining-the-copy-and-blend-functions-into-a-brush/37830/3 "2022-07-05T08:32:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JonoCES](https://avatars.discourse-cdn.com/v4/letter/j/6de8d8/32.png) [@JonoCES](https://discourse.processing.org/u/JonoCES)\
**Post date:** [July 5, 2022, 8:34am UTC](https://discourse.processing.org/t/combining-the-copy-and-blend-functions-into-a-brush/37830/4 "2022-07-05T08:34:09Z")

</div>

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 6, 2022, 12:27am UTC](https://discourse.processing.org/t/combining-the-copy-and-blend-functions-into-a-brush/37830/5 "2022-07-06T00:27:17Z")

</div>

Hello @JonoCES,

> [@JonoCES](#):
>
> 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

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

```auto
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](https://processing.org/reference/PImage.html)

Future consideration:  
[https://processing.org/reference/PGraphics.html](https://processing.org/reference/PGraphics.html)  
[https://processing.org/tutorials/rendering](https://processing.org/tutorials/rendering)

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

> **Examples \< Click here to view**
>
> ```auto
> 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);
> }
> 
> ```
> 
> ```auto
> 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/get_.html)  
[https://processing.org/reference/PImage\_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/](https://processing.org/)

`:)`

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [July 6, 2022, 12:33am UTC](https://discourse.processing.org/t/combining-the-copy-and-blend-functions-into-a-brush/37830/6 "2022-07-06T00:33:27Z")

</div>

Hi @JonoCES and welcome

Here you can find creative learning

[https://funprogramming.org/](https://funprogramming.org/)

---

<div class="post-metadata">

**Author:** ![JonoCES](https://avatars.discourse-cdn.com/v4/letter/j/6de8d8/32.png) [@JonoCES](https://discourse.processing.org/u/JonoCES)\
**Post date:** [July 6, 2022, 7:26am UTC](https://discourse.processing.org/t/combining-the-copy-and-blend-functions-into-a-brush/37830/7 "2022-07-06T07:26:08Z")

</div>

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