I'm trying to repeat schultzschultzgrafik

Processing Project Guidance
1

Hello. I am new to coding.
I’m trying to repeat schultzschultzgrafik https://www.instagram.com/p/CD4h9QCirXH/

That’s what I did.

PImage img; 
float xStep, yStep;
int xCount = 100;
int yCount = 100;
int m = 10, s = 5, px, py; 
float startX, startY;
PImage selection;
int direction = 1;
float signal;



void setup() {
  size(800, 800); 
  img = loadImage("1.jpg");
  img.resize(800, 800);
 
  
  
}
void draw(){
  background(img);
  fill(#ffffff);
  noStroke();
  ellipse(mouseX, mouseY, 10, 10); 
  if(mousePressed) {
    noFill();
    strokeWeight(3);
    stroke(255, 100);
    rectMode(CORNER);
    rect(startX, startY, mouseX-startX, mouseY-startY); 
  }
  
}

void mousePressed() {
  startX=mouseX;
  startY=mouseY;
}

void mouseReleased() {
  if(mouseButton==RIGHT && selection!=null) {  
    set(mouseX, mouseY, selection); 
    img=get();
  }
  
  else selection=get((int)startX, (int)startY, (int)(abs(startX-mouseX)), (int)(abs(startY-mouseY))); 
   

if (signal > img.height/2 || signal < 0) { 
    direction = direction / -1;
  }
  if (mousePressed == true) {
    signal = abs(mouseY % img.height);
  } 
  else {
    signal += (0.3*direction);
  }

  if (keyPressed == true) {
  set(0, 0, img);

    
    // SOURCE   
      int sx = px; 
      int sy = py;
      int sw = int(startX*2);
      int sh = int(startY*2);


      // DESTINATION
      int dx = px;
      int dy = py;
      int dw = int(mouseX);
      int dh = int(mouseY);
      
      copy(img, sx, sy, sw, sh, dx, dy, dw, dh);
 }
 }

Tell me how to copy the selected area

1 Like
2

your wish is my command !
you will probably want to use a PGraphics, since “normal” copy copies into the display window.
then you can put the PGraphics to wherever you like (e.g. move it with the mouse.

PImage img;
PGraphics one;

void setup() {
  size(400,600);
  
  img = loadImage("woman.png");
  one  = createGraphics(width, height);
}

void draw() {
  one.beginDraw();
  one.copy(img,100,50,100,100,100,50,100,100);
  one.endDraw();  
  image(one,0,0);  
}
1 Like
3

See also past discussions of people inspired by this work:

https://discourse.processing.org/search?q=schultzschultzgrafik

4

And now almost six months have passed, but I still haven’t figured it out. Can you give me another one hint?

PImage img;
PGraphics one;
boolean sun = false;

int size = 50;

float startX, startY;
void setup() {
  size(700,700);
  
  img = loadImage("123.jpg");
  one  = createGraphics(width, height);
  
}

void draw() {
  //background(img);
  image(img,0,0);
  
  // SOURCE
  int sx = mouseX; //
  int sy = mouseY;
  int sw = mouseX - mouseX;
  int sh = mouseY - mouseY;

  // DESTINATION
  int dx = mouseX ;
  int dy = mouseY ;
  int dw = mouseX - mouseX;
  int dh = mouseY - mouseY;
      
  one.beginDraw();
  one.copy(img, sx, sy, sw, sh, dx, dy, dw, dh);
  one.endDraw();
  
 
  image(one,0,0); 
  one.beginDraw();
    if (mousePressed) {
  one.set(0, 0, img);
  one.noFill(); 
  one.stroke(#ff0000);
  one.strokeWeight(1);
  one.rect(startX,startY,mouseX - startX,mouseY -startY );
  one.endDraw();
   }
  
}

void mousePressed() {
  sun = true; 
  startX=mouseX;
  startY=mouseY;
  
}
5

I think you need to look at the video more carefully

See there is a red box when he is selecting an
area

So I suppose click mouse, hold mouse make red rectangle, release button to define source area

Click again, draw area

Reflect this in your code please

6

Hello,

Here is an example without the mouse to get you started:

PImage img1, img2;
PGraphics pg1;

//Runs once
void setup() 
  {
  size(640, 400);
  
  img1 = loadImage("https://github.com/processing/processing-docs/blob/master/content/examples/Basics/Image/Pointillism/data/moonwalk.jpg?raw=true");  
  img2 = createImage(0, 0, RGB);
  
  pg1  = createGraphics(width, height);
  
  pg1.beginDraw();
  pg1.image(img1, 0, 0);
  pg1.endDraw();
  }

// Loops at 60 fps (frames per second)
void draw() 
  {
  background(255, 0, 0);
  image(pg1,0,0);
      
  img2 = img1.get(200, 200, 40, 40);

  pg1.beginDraw();
  //img2 = img1.get(200, 200, 40, 40);
  pg1.image(img2, 400, 360);
  
  img2 = img1.get(300, 300, 40, 40);
  //img2 = img1.get(300, 300, 40, 40).copy();
  pg1.image(img2, 200, 360);
  
  pg1.endDraw();
  }

You can integrate the mouse control and rectangles in the sketch window to overlay on the PGraphic.
I removed the loop that drew the diagonal images.

image

All the related tutorials, references and examples are here:

I used PImage.get():

:)

2 Likes