Lens ellipse follow mouse

Processing Beginners
1

Hi, guys.
I found this code, and i am changing it for studing.
Is there how i make the lens ellipse follow the mouse?

/**
 * Lens Demo Effect
 * by luis2048.
 * 
 * A picture is shown and it looks like a magnifying glass 
 * is drawn over the picture. One of the most famous demos 
 * that has a lens effect is 2nd reality by future crew. 
 * The trick is to precalculate the entire effect. Just make 
 * an array that for each pixel in the destination picture 
 * tells which pixel to take from the source picture. This 
 * array is called the transformation array. The tricky part 
 * is to calculate the transformation array to make the 
 * destination look like a lens is beeing held over the source 
 * picture. Based on lens formula by on Abe Racadabra.
 */

int lensD = 556;  // Lens diameter
int[] lensArray = new int[lensD*lensD];  // Height and width of lens

PGraphics lensEffect;
PImage lensImage;
PImage lensImage2;

int xx = 0;
int yy = 0;
int dx = 1;
int dy = 1;

void setup() {
  size(640, 360, P2D);
  
  // Create buffered image for lens effect
  lensEffect = createGraphics(width, height, P2D);
  lensEffect
  // Load background image
  lensEffect.beginDraw();
  lensEffect.image(loadImage("eufrk.jpg"), 0, 0, lensEffect.width, lensEffect.height);
  lensEffect.endDraw();
  
  // Create buffered image for image to warp
  lensImage = createGraphics(lensD, lensD, P2D);
  lensImage2 = createGraphics(lensD, lensD, P2D);
  
  // Lens algorithm (transformation array)
  int magFactor = 25;  // Magnification factor
  int m, a, b;
  
  int r = lensD / 2;
  float s = sqrt(r * r - magFactor * magFactor);
  
  for (int y = -r; y < r; y ++) {
    for (int x = -r; x < r; x ++) {
      if(x * x + y * y >= s * s) {
        a = x;
        b = y;
      } else {
        float z = sqrt(r * r - x * x - y * y);
        a = int(x * magFactor / z + 0.5);
        b = int(y * magFactor / z + 0.5);
      }
      lensArray[(y + r) * lensD + (x + r)] = (b + r) * lensD + (a + r);
    }
  }
}

void draw() {
  // Bounce lens around the screen
  if((xx + dx + lensD > lensEffect.width) || (xx + dx < 0)) {
    dx = -dx;
  } 
  if((yy + dy + lensD > lensEffect.height) || (yy + dy < 0)) {
    dy = -dy;
  }
  xx += dx;
  yy += dy;
  
  // save the backgrounlensD of lensHeight*lensWilensDth pixels rectangle at the coorlensDinates 
  // where the lens effect will be applielensD.
  lensImage2.copy(lensEffect, xx, yy, lensD, lensD, 0, 0, lensD, lensD);
  
  // output into a bufferelensD image for reuse
  lensImage.loadPixels();
  lensImage2.loadPixels();
  
  // For each pixel in the destination rectangle, apply the color 
  // from the appropriate pixel in the saved background. The lensArray 
  // array tells the offset into the saved background.
  for (int i = 0; i < lensImage.pixels.length; i++) {
    lensImage.pixels[i] = lensImage2.pixels[lensArray[i]];
  } 
  lensImage.updatePixels();
  
  // Restore the original picture
  image(lensEffect, 0, 0, width, height); 
  
  // Overlay the lens square
  image(lensImage, xx, yy, lensD, lensD);
}
2

Yes!

Scrutinize the code and determine what is currently moving the lens.

Consider where to use mouseX and mouseY to move the lens.

References:

:)

1 Like
3

@glv …
I found it…
Its here…


  // Overlay the lens square
  image(lensImage,mouseX/2, mouseY/2, lensD,

Now, it has a square under de sphere. Lol
For real, i am doing it on APDE, for android…
My comp is heallyng… rsrs

I Luv the big “YES!”.
THANK YOU

4

Not really … So many lines it changes. But at least its following the mouse/touchscreen

5

Hello,

You changed xx and yy… where else can you make xx and yy equal to mouse location?

:)

1 Like
6

@glv hi Mr.
I found how to grab the ellipse.
I used pmouseX and pmouseY.
Now, i am changing a lot of things to find out how to grab the ellipse under it. On Y position. To locate it lower.
What is happening too is when i add a number, like /2, -2, to pmouseX/Y, or on mouseX/Y, a rect/square, appears under the ellipse.

Also, i found where the image wich appears into the ellipse is in the code. But here, the code is simple, i mean, just change to grab the ellipse.
One thing at a time… rsrsrs

Also, i am trying to add some noise while move the ellipse.
I am searching how to do it on APDE, android.
I am sure that i have to add some libraries, iam stiil learning. And searching were to find and download libraries to this app.

Here is the new code.


int lensD = 500;  // Lens diameter
int[] lensArray = new int[lensD*lensD];  // Height and width of lens

PGraphics lensEffect;
PImage lensImage;
PImage lensImage2;

int xx = 0;
int yy = 0;
int dx = 1;
int dy = 1;

void setup() {
  size(640, 360, P2D);
  

  
  
  // Create buffered image for lens effect
  lensEffect = createGraphics(width, height, P2D);
  
  // Load background image
  lensEffect.beginDraw();
  lensEffect.image(loadImage("Eu3.jpg"), 0, 0, lensEffect.width, lensEffect.height);
  
  lensEffect.endDraw();
  
  
  
  // Create buffered image for image to warp
  lensImage = createGraphics(lensD, lensD, P2D);
  lensImage2 = createGraphics(lensD, lensD, P2D);
 
  
  // Lens algorithm (transformation array)
  int magFactor = 60;  // Magnification factor
  int m, a, b;
  
  int r = lensD / 2;
  float s = sqrt(r * r - magFactor * magFactor);
  
  for (int y = -r; y < r; y ++) {
    for (int x = -r; x < r; x ++) {
      if(x * x + y * y >= s * s) {
        a = x;
        b = y;
      } else {
        float z = sqrt(r * r - x * x - y * y);
        a = int(x * magFactor / z + 0.9);
        b = int(y * magFactor / z + 0.9);
      }
      lensArray[(y + r) * lensD + (x + r)] = (b + r) * lensD + (a + r);
    }
  }
}

void draw() {
  // Bounce lens around the screen
  if((xx - dx + lensD  > lensEffect.width) || (xx + dx < 1)) {
    dx = -dx;
  } 
  if((yy+ dy + lensD > lensEffect.height-30) || (yy + dy < 1)) {
    dy = -dy;
  }
  xx += dx;
  yy+= dy;
  
  // save the backgrounlensD of lensHeight*lensWilensDth pixels rectangle at the coorlensDinates 
  // where the lens effect will be applielensD. 
// here a add pmouse
  lensImage2.copy(lensEffect, pmouseX, pmouseY, lensD, lensD, 0, 0, lensD, lensD);
  
  // output into a bufferelensD image for reuse
  lensImage.loadPixels();
  lensImage2.loadPixels();
  
  // For each pixel in the destination rectangle, apply the color 
  // from the appropriate pixel in the saved background. The lensArray 
  // array tells the offset into the saved background.
  for (int i = 0; i < lensImage.pixels.length; i++) {
    lensImage.pixels[i] = lensImage2.pixels[lensArray[i]];
  } 
  lensImage.updatePixels();
  
  // Restore the original picture
  image(lensEffect, 0, 0, width, height); 
  
  // Overlay the lens square
// here mouseX ,Y
  image(lensImage, mouseX, mouseY, lensD, lensD);
}

With those lots of changes, i got interesting results. They are saved. And some screen records

7

Hello @vrtx,

Try the original code with this:

xx = width/2 - lensD/2;
yy = height/2 - lensD/2;

Add this to end of draw():

fill(255, 0, 0);
circle(width/2, height/2, 10);

Now think about what that is doing and how you can use the mouseX and mouseY location to move things around.

:)

1 Like
8

@glv .
Hi there.
I am trying to do what you said. Its getting a few erros, and i did try to add your code in many dofferents places.

Here is the last i did. This is the original, Only added your code.

/**
 * Lens Demo Effect
 * by luis2048.
 * 
 * A picture is shown and it looks like a magnifying glass 
 * is drawn over the picture. One of the most famous demos 
 * that has a lens effect is 2nd reality by future crew. 
 * The trick is to precalculate the entire effect. Just make 
 * an array that for each pixel in the destination picture 
 * tells which pixel to take from the source picture. This 
 * array is called the transformation array. The tricky part 
 * is to calculate the transformation array to make the 
 * destination look like a lens is beeing held over the source 
 * picture. Based on lens formula by on Abe Racadabra.
 */

int lensD = 256;  // Lens diameter
int[] lensArray = new int[lensD*lensD];  // Height and width of lens

PGraphics lensEffect;
PImage lensImage;
PImage lensImage2;




PGraphics circle;
int xx = width/2 - lensD/2;
int yy = height/2 - lensD/2;

//int xx = 0;
//int yy = 0;
int dx = 1;
int dy = 1;

void setup() {
  size(640, 360, P2D);
  
  // Create buffered image for lens effect
  lensEffect = createGraphics(width, height, P2D);
  
  // Load background image
  lensEffect.beginDraw();
  lensEffect.image(loadImage("red_smoke.jpg"), 0, 0, lensEffect.width, lensEffect.height);
  lensEffect.endDraw();
  
  // Create buffered image for image to warp
  lensImage = createGraphics(lensD, lensD, P2D);
  lensImage2 = createGraphics(lensD, lensD, P2D);
  
  // Lens algorithm (transformation array)
  int magFactor = 40;  // Magnification factor
  int m, a, b;
  
  int r = lensD / 2;
  float s = sqrt(r * r - magFactor * magFactor);
  
  for (int y = -r; y < r; y ++) {
    for (int x = -r; x < r; x ++) {
      if(x * x + y * y >= s * s) {
        a = x;
        b = y;
      } else {
        float z = sqrt(r * r - x * x - y * y);
        a = int(x * magFactor / z + 0.5);
        b = int(y * magFactor / z + 0.5);
      }
      lensArray[(y + r) * lensD + (x + r)] = (b + r) * lensD + (a + r);
    }
  }
}

void draw() {
  // Bounce lens around the screen
  if((xx + dx + lensD > lensEffect.width) || (xx + dx < 0)) {
    dx = -dx;
  } 
  if((yy + dy + lensD > lensEffect.height) || (yy + dy < 0)) {
    dy = -dy;
  }
  xx += dx;
  yy += dy;
  
  // save the backgrounlensD of lensHeight*lensWilensDth pixels rectangle at the coorlensDinates 
  // where the lens effect will be applielensD.
  lensImage2.copy(lensEffect, xx, yy, lensD, lensD, 0, 0, lensD, lensD);
  
  // output into a bufferelensD image for reuse
  lensImage.loadPixels();
  lensImage2.loadPixels();
  
  // For each pixel in the destination rectangle, apply the color 
  // from the appropriate pixel in the saved background. The lensArray 
  // array tells the offset into the saved background.
  for (int i = 0; i < lensImage.pixels.length; i++) {
    lensImage.pixels[i] = lensImage2.pixels[lensArray[i]];
  
          fill(255, 0, 0);
          circle(width/2, height/2, 10);
  } 
  

  
  lensImage.updatePixels();
  
  // Restore the original picture
  image(lensEffect, 0, 0, width, height); 
  
  // Overlay the lens square
  image(lensImage, xx, yy, lensD, lensD);
 
  fill(255, 0, 0);
  circle(width/2, height/2, 10);
}

And here is the erros:

"Initializing build sequence…
Deleted old build folder
Injected log broadcaster
Detected architecture arm64-v8a

Packaging resources with AAPT…
Compiling with ECJ…

  1. WARNING in /data/user/0/com.calsignlabs.apde/app_build/src/processing/test/lens/Lens.java (at line 71)
    int m, a, b;
    ^
    The local variable m is never read
  1. ERROR in /data/user/0/com.calsignlabs.apde/app_build/src/processing/test/lens/Lens.java (at line 117)
    circle(width/2, height/2, 10);
    ^^^^^^
    The method circle(int, int, int) is undefined for the type Lens
  1. ERROR in /data/user/0/com.calsignlabs.apde/app_build/src/processing/test/lens/Lens.java (at line 131)
    circle(width/2, height/2, 10);
    ^^^^^^
    The method circle(int, int, int) is undefined for the type Lens

3 problems (2 errors, 1 warning)
Compiling with ECJ failed
"

9

Hello @vrtx.

Try to understand this code and then modify to move the rectangle with the mouse centered to the rectangle:

int lensD = 100;  // Lens diameter

int xx = 0;
int yy = 0;
int dx = 1;
int dy = 1;

void setup() 
  {
  size(500, 500, P2D);
  }

void draw() 
  {
  // Bounce lens around the screen
  xx += dx;
  yy += dy;
  
  // Overlay the lens square
  //image(lensImage, xx, yy, lensD, lensD);
  
  rect(xx, yy, lensD, lensD);
  }

Reference:
mouseY / Reference / Processing.org

:)

1 Like
10

Hi

11

@glv Thank you Mr.
I did tryed many things, and this is the best i got… For wile…

int lensD = 100;  // Lens diameter

int xx = 0;
int yy = 0;
int dx = 1;
int dy = 1;

void setup() 
  {
  size(500, 500, P2D);
  }

void draw() 
  {
  // Bounce lens around the screen
  xx += dx;
  yy += dy;
  
  // Overlay the lens square
  //image(lensImage, xx, yy, lensD, lensD);
  
  rect(mouseX-50, mouseY-50, lensD, lensD);
  }