# Set portion of an image as another image

**URL:** <https://discourse.processing.org/t/set-portion-of-an-image-as-another-image/33648>\
**Category:** Coding Questions\
**Created:** [November 21, 2021, 8:28am UTC](https://discourse.processing.org/t/set-portion-of-an-image-as-another-image/33648 "2021-11-21T08:28:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![dnclem106](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@dnclem106](https://discourse.processing.org/u/dnclem106)\
**Post date:** [November 21, 2021, 8:28am UTC](https://discourse.processing.org/t/set-portion-of-an-image-as-another-image/33648/1 "2021-11-21T08:28:21Z")

</div>

Hi,

I have a blank image (just white pixels) that is `x, y` pixels in width and height respectively. What I need to do is set another smaller image (dimensions `(x0, y)` where x0 \< x) as a portion of the blank image. In the pic below for example, the blank image is the black rectangle and the smaller image is the red rectangle whose upper-left corner is set at some arbitrary coordinate.

![processing](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/697f34e060f582f1a5adfc5246ed4f28121fdeb2.png)

I tried using the `set()` function, however, when I use it only the base image is shown. I am not sure what I have done wrong here, so any help would be appreciated.

```auto
        //load image that will be set as portion of base image
       img = loadImage(...);

        //create base image
        baseImg = createImage(x, y, RGB);
        baseImg.loadPixels();
        for (int i = 0; i < baseImg .pixels.length; i++) {
          baseImg.pixels[i] = color(255, 255, 255, 0);
        }

        // set image to arbitrary location of base image
        set(100, 0, img);
        
        baseImg.updatePixels();

        //show image
        image(baseImg, ...);

```

---

<div class="post-metadata">

**Author:** ![dnclem106](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@dnclem106](https://discourse.processing.org/u/dnclem106)\
**Post date:** [November 21, 2021, 8:49am UTC](https://discourse.processing.org/t/set-portion-of-an-image-as-another-image/33648/2 "2021-11-21T08:49:01Z")

</div>

I realized my mistake. I was supposed to call the set() function on the base image, not by itself.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [November 21, 2021, 8:50am UTC](https://discourse.processing.org/t/set-portion-of-an-image-as-another-image/33648/3 "2021-11-21T08:50:43Z")

</div>

This is probably the best way to do what you want.

```auto
//load image that will be set as portion of base image
img = loadImage(...);

//create composite image
PGraphics pg = createGraphics(x, y);
pg.beginDraw();
pg.background(255); // white background
pg.imageMode(CORNER);
pg.image(img, ix, iy); //ix, iy position of smaller image in lager image
pg.endDraw();

baseImg = pg.get(); // get as PImage - not needed can us PGraphics object pg instead

//show image
image(baseImg, ...);
// or this will do same
image(pg, ...);

```