Need help while creating new picture

Hello I want to do thing like this tap here to see.

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

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;
  }
}
1 Like

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

1 Like

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

Not what you want, but just to start with.

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);
}
2 Likes

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

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.

/**
 * 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.