Geometric Transformation

I have some global variables, for the arc circle I’m going to draw each time I pressed the button.

In the setup I’m loading the image, giving a size and draw the image to the canvas. In draw function, I’ve a if function and in that if function, I’m using a mouseButton which I need to define whether if its, right left or center. So, If you press left , I’m calling the arc Circle function where the mouse is and incrementally increasing the diameter as you hold the mouse down. If you press right, it clears the canvas.

I’ve two features in key pressed function, which w’ll allow you to save the image when you pressed ’s’ key. Or if you press ‘r’ it draws random circles number of 5-15 on to the sketch. Sizewise, minium width divided by 5 to half of the width. 

Arc Circle function

This is the function that’s being called each time we hold down the mouse. Each time this is called, diamRadius is increasing by speed grow.  This is what makes the circle start off small but grow larger. This is the function responsible of creating one size circle at a time. 

Draw function

arcCircle((int)mouseX, (int)mouseY, diam+=speedGrow, arcStep);

And than, we are doing this while loop. This while loop goes through the whole range of angles, from 0-360. This allows us to create full circle.  The x and y values corresponds to some point along the outline of the circle. 

This condition is pretty much asking if we are trying to draw a circle on a new point. OR first circle we draw at a point. Find the color in the image that corresponds to that point

color clr = img.get(x, y);

Set that color from the arcClr list, based off of the angle that corresponds to that point

arcClr[angle] = clr;

This runs in the condition where x and y (the edge of the circle) are NOT outside of the image itself.

fill to the color from the arc Color array

fill(arcClr[angle]);

We are determining the arc, that we are working with, which is given by our current angle and the arc step

This creates a filled arc that is the fill color, and goes according to the angle where this arc starts and ends.

We increase the angle by the speed interval. This will let the while loop work from the next angle when it runs again.

DEMO

Made by Processing3

Data: Pablo Picasso, 1921, Three Musicians, oil on canvas, 200.7 × 222.9 cm, Museum of Modern Art, New York. Acquired through the Lillie P. Bliss Bequest

---

CODE

// Controls:
// leftClick   - draw arcCircle
// rightClick  - clear
// centerClick - set start diameter for arcCircle
// 
// keys:
// s - save image
// r - add random 5-15 arcCircles

int startDiam = 3;
int diam = startDiam;
int arcStep = 1;
int speedGrow = 5;
int maxAngle = 360;
int cx;
int cy;
color [] arcClr = new color[maxAngle]; 
PImage img;

void setup() {
  img = loadImage("three-musicians.jpg");
//  size(img.width, img.height);
  size(845, 827);
  image(img, 0, 0);
  //frameRate(300);
}


void draw() {
  if (mousePressed && mouseButton == LEFT) {
     //print("setting mouseX:"+(int)mouseX+"\n");
    arcCircle((int)mouseX, (int)mouseY, diam+=speedGrow, arcStep);
    cx = (int)mouseX;
    cy =(int)mouseY;
    //print("cx initially set to:"+cx+"\n");
  } else if (mousePressed && mouseButton == RIGHT ) {
    image(img, 0, 0);
  } else {
    diam = startDiam;
  }
}

void keyPressed() {
  if (key == 's') {
    saveFrame("img-###"+".jpg");
  } else if (key == 'r') {
    for (int i = (int)random(5, 15); i >= 0; --i) {        
      int x = (int)random(0, img.width);
      int y = (int)random(0, img.height-1);
      int size = (int)random(img.width/5, img.width/2);

      for (int j = 0; j < 1; j++) {
        arcCircle(x, y, size, 1);
      }
    }
  }
}


void arcCircle(int cirlX, int cirlY, int diamRaduis, int arcStep) {
  int angle = 0;
  int speed = arcStep;
  int arcRadius = diamRaduis/2;
  int x, y;

  noStroke();
  fill(255);

  while (angle< maxAngle) {
    
    x = int(cirlX + cos(radians(angle)) * arcRadius);
    y = int(cirlY + sin(radians(angle)) * arcRadius);
    
    if ( cx != cirlX || cy != cirlY) {
      x = min(max(x, 1), img.width-1);    
      y = min(max(y, 1), img.height-1);
    
      color clr = img.get(x, y);
  
      arcClr[angle] = clr;
    } 
 
    else if (!(   x < 1 || y < 1 || y < 1 || x < 1 
      || x > img.width-1  || x > img.width-1 
      || y > img.height-1 || y > img.height-1 ))
    {
      x = min(max(x, 1), img.width-1);    
      y = min(max(y, 1), img.height-1); 
      color clr = img.get(x, y);
      arcClr[angle] = clr;
    }
  
    fill(arcClr[angle]);

    float radSrt = radians(angle);
    float radEnd = radians(angle+arcStep);

    arc(cirlX, cirlY, diamRaduis, diamRaduis, radSrt, radEnd);
 
    angle += speed;
  }
}