Slicing images

Hiram

Hello

Excuse my very poor English.

I am a very beginner.

I would like to be guided please.

My project :
1. I have a picture for example 1200/1200 pixels.
2. At any point in the picture, I click with the mouse to have a point "c".
3. This point "c" becomes the center of 5 concentric rings.
4. I would like to turn the rings a few degrees clockwise or counter-clockwise.

I have no idea that the pixels of the original photo become the pixels of my rings.

It would be nice of me to orient myself.

Thank you

What i want to do is this but in movement....

jeremydouglass

@Hiram -- I'd suggest starting with a sketch that creates a simple rotated circle at the mouseClicked location. Later you can call your function five times in a row to five-concentric-rings effect.

One approach that might work:

1. Load your working background into a PImage, for example: imgBg
   • https://processing.org/reference/PImage.html
2. Copy a rectangle of pixels around x,y into a PImage, for example: imgCircle
3. mask imgCircle with a circle. Here is a basic mask() example. You can use elliipse() instead of triangle() for the shape you want.
   • https://forum.processing.org/two/discussion/18819/how-to-copy-a-triangle-out-of-an-image
4. draw the rotated results on top of the old image, e.g. with blend()
   • https://processing.org/reference/PImage_blend_.html
5. ...repeat the above process several times with smaller circles to create a nested effect.

koogs

this says textures to me

but i'd start by just drawing the circles on the image.

Hiram

Dear Jeremy ... Thank you for your suggestions, it is 23:00 here in Belgium and I will try your solution tomorrow in when I would be awake and being "aware" as said JCVD .... It is difficult to find a point Of departure for an artist who is not programmer ... I was not very digital art then I discovered and loved Manfred Mohr and since I try to create ... Thank you for your kindness

Hiram

kfrajer

This code just provide an idea of using textures. You need to have the image file inside the data folder which is inside your sketch folder. The image can be any image you want. Just make sure you rename the file in the code. Source modified from: https://processing.org/reference/textureWrap_.html

Kf

PImage img;

void setup() {
  size(300, 300, P2D);
  img = loadImage("berlin-1.jpg");
  img.resize(width,height);
  textureMode(NORMAL);
}

void draw() {
  image(img,0,0);
  translate(width/2, height/2);
  rotate(map(mouseX, 0, width, -PI, PI));
  if (mousePressed) {
    textureWrap(REPEAT); 
  } else {
    textureWrap(CLAMP);
  }
  beginShape();
  texture(img);
  vertex(-100, -100, 0, 0);
  vertex(100, -100, 2, 0);
  vertex(100, 100, 2, 2);
  vertex(-100, 100, 0, 2);
  endShape();
}

jeremydouglass

@koogs and @kfrajer recommend checking out textures first -- interesting, I didn't realize that texture() could be used with ellipses, I thought it only worked with polygons. Looking forward to seeing solutions!

koogs

You can texture any shape using the x, y, u, v version of vertex, the x, y being the picture coords, the u, v being the (slightly rotated) texture coords.

koogs

// animated textured circle
PImage img;

void setup() {
  size(256, 256, P2D);
  img = loadImage("riley.jpg"); // 256x256
  textureMode(IMAGE);
  noStroke();
}

void draw() {
  background(img);
  circle(width / 2, height / 2, 100, frameCount);
}

static final int SEGMENTS = 24;
void circle(float x, float y, float r, float angleDelta) {
  beginShape();
  texture(img);
  for (int i = 0 ; i <= SEGMENTS ; i++) { // NB one more than usual
    float a = (360 * i) / SEGMENTS; // degrees
    float cx = x + r * cos(radians(a));
    float cy = y + r * sin(radians(a));
    float ta = a + angleDelta; // texture angle is different
    float tx = x + r * cos(radians(ta));
    float ty = y + r * sin(radians(ta));
    vertex(cx, cy, tx, ty);
  }
  endShape();
}

Hiram

Hello everyone ... A very big thank you ... Your answers exceed my expectations and I will be able to experiment and go further in my reflection ... These are for me open doors to beautiful experiences ... Thank you for your Helps ...

jeremydouglass

Very nice, @koogs. I didn't realize that texture() could do things like that -- and a 24-segment polygon gives great results (I've never used it with anything but quads, and assumed for some reason that there would be warping).

Here is a little change to the above sketch -- it replaces draw with a call to a new function, circleSet(), which overlays nested circles using an increasing rotation offset.

void draw() {
  background(img);
  circleSet(width / 2, height / 2, 100, 5, 4, 15);
}

void circleSet(float x, float y, float r, float angleDelta, int count, float roffset){
  for(int i=0; i<count; i++){
    circle(x, y, (r/count)*(count-i), angleDelta+(i*roffset));
  }
}

Good luck with your project, @Hiram.

jeremydouglass

kfrajer

This next post could be of interest to the OP or maybe not: https://forum.processing.org/two/discussion/comment/87551/#Comment_87551

I would like to take @jeremydouglass contribution one step further just bc I couldn't resist after seeing @koogs contribution. Replace draw and circleSet in his post with:

//img = loadImage("https://"+"processing.org/img/processing-handbook-second-edition-lg.jpg");
void draw() {
  background(img);
  circleSet(width / 2, height / 2, 100, frameCount, 4, 15);
}

void circleSet(float x, float y, float r, float angleDelta, int count, float roffset) {
  for (int i=0; i<count; i++) {
    circle(x, y, (r/count)*(count-i), 2*(0.5-i%2)*(angleDelta+(i*roffset)));
  }
}

Kf