# Need help while creating new picture

**URL:** <https://discourse.processing.org/t/need-help-while-creating-new-picture/22741>\
**Category:** Coding Questions\
**Created:** [July 20, 2020, 5:36am UTC](https://discourse.processing.org/t/need-help-while-creating-new-picture/22741 "2020-07-20T05:36:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [July 20, 2020, 5:36am UTC](https://discourse.processing.org/t/need-help-while-creating-new-picture/22741/1 "2020-07-20T05:36:32Z")

</div>

Hello I want to do thing like this [tap here to see](https://www.instagram.com/p/B9g_hLgHa2k/?utm_source=ig_web_copy_link).

But i can’t create an image which i am selecting… How to do this ? Can anyone help ?

```auto
int x = 0;
int y = 0;
int x2 = 1;
int y2 = 1;
int q, w, e, r;
boolean basyldymy;
boolean rectangleicindemi;
PImage img, img2;
PFont font;

void setup() {
  size(800, 800, P2D);
  img = loadImage("belli.png");
  img.resize(800, 800);
  textSize(50);
  img2 = null;
}

void draw() {
  background(img);
  loadPixels();
  //img2.pixels = pixels;
  if (basyldymy == true) {
    noFill();
    stroke(255, 0, 0);
    rect(x, y, x2, y2);
  } else {
    fill(255, 0, 0);
    //image(img2, x+q, y+w);
    rect(x+q, y+w, x2, y2);
    
    loadPixels();
    for (int i = 0; i < 800; i++)
    {
      for (int j = 0; j < 800; j++) {
        img.set(i, j, pixels[j*width+i]);
      }
    }
  }
}

void mousePressed() {
  basyldymy = !basyldymy;
  if (basyldymy == true) {//rectangle cyzmak ucin
    x2 = 0;
    y2 = 0;
    x = mouseX;
    y = mouseY;
  } else {//ractangle drag etmek ucin
    q = 0;
    w = 0;
    e = mouseX;
    r = mouseY;
  }
}

void mouseDragged() {
  if (basyldymy == true) {
    x2 = mouseX - x;
    y2 = mouseY - y;
  } else {
    q = mouseX - e;
    w = mouseY - r;
  }
}

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [July 20, 2020, 6:27am UTC](https://discourse.processing.org/t/need-help-while-creating-new-picture/22741/2 "2020-07-20T06:27:09Z")

</div>

You could try to use get(x, y, w, h) and image(img, a, b, c, d) instead.

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [July 20, 2020, 6:29am UTC](https://discourse.processing.org/t/need-help-while-creating-new-picture/22741/3 "2020-07-20T06:29:09Z")

</div>

how to do it ? Give me example on the code please. Thanks.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [July 20, 2020, 6:43am UTC](https://discourse.processing.org/t/need-help-while-creating-new-picture/22741/4 "2020-07-20T06:43:23Z")

</div>

Not what you want, but just to start with.

```auto
int x, y, h, w;

PImage img, img2;

void setup() {
  size(800, 800, P2D);
  img = loadImage("2.png");
  img.resize(800, 800);
  img2 = get(x, y, w, h);
}

void draw() {
  background(img);
  image(img2, mouseX, mouseY);
}

void mousePressed () {
  x = mouseX;
  y = mouseY;
}

void mouseReleased () {
  w = mouseX;
  h = mouseY;
  img2 = get(x, y, w, h);
}

```

---

<div class="post-metadata">

**Author:** ![yhlaskerimov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/yhlaskerimov/32/9725_2.png) [@yhlaskerimov](https://discourse.processing.org/u/yhlaskerimov)\
**Post date:** [July 20, 2020, 6:50am UTC](https://discourse.processing.org/t/need-help-while-creating-new-picture/22741/5 "2020-07-20T06:50:16Z")

</div>

Thank u Noel. it is solution. Thank u so much !

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 28, 2020, 5:51pm UTC](https://discourse.processing.org/t/need-help-while-creating-new-picture/22741/6 "2020-07-28T17:51:08Z")

</div>

This is a simplified form of @noel’s solution. It requires no external graphics, uses a single PImage as the drag buffer, and initializes the buffer to store a fixed selection size.

```auto
/**
 * Draggable Pixel Region
 * 2020-07 Processing 3.5.4
 * discourse.processing.org/t/need-help-while-creating-new-picture/22741
 */
PImage drag;
float tsize = 240;
void setup() {
  size(400, 400);
  // textFont(createFont("Futura-Bold", tsize));
  drag = createImage(100, 100, RGB);
}
void draw() {
  if(frameCount==1) {
    background(0);
    textSize(tsize);
    textAlign(CENTER,CENTER);
    text("F", width/2, height/2);
  }
}
void mousePressed () {
  drag = get(mouseX, mouseY, drag.width, drag.height);
}
void mouseDragged () {
  image(drag, mouseX, mouseY);
}

```

If you want to drag-select a selection size and display the selection then you need a simple state machine. with (for example) four states – pre-select, selecting, pre-drag, dragging. On each mousePressed or mouseReleased, change the state from 0 -\> 1 -\> 2 -\> 3 -\> 0, and display a red box, copy pixels to the PImage, or copy pixels from the PImage to the canvas accordingly.