# Lens ellipse follow mouse

**URL:** <https://discourse.processing.org/t/lens-ellipse-follow-mouse/40270>\
**Category:** Beginners\
**Tags:** homework\
**Created:** [December 23, 2022, 1:17am UTC](https://discourse.processing.org/t/lens-ellipse-follow-mouse/40270 "2022-12-23T01:17:12Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [December 23, 2022, 1:17am UTC](https://discourse.processing.org/t/lens-ellipse-follow-mouse/40270/1 "2022-12-23T01:17:12Z")

</div>

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

```auto
/**
 * 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);
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 23, 2022, 1:49am UTC](https://discourse.processing.org/t/lens-ellipse-follow-mouse/40270/2 "2022-12-23T01:49:45Z")

</div>

> [@vrtx](#):
>
> Is there how i make the lens ellipse follow the mouse?

Yes!

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

Consider where to use _mouseX_ and _mouseY_ to move the lens.

References:

- [mouseX / Reference / Processing.org](https://processing.org/reference/mouseX.html)
- [Interactivity / Processing.org](https://processing.org/tutorials/interactivity)

`:)`

---

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [December 23, 2022, 6:42am UTC](https://discourse.processing.org/t/lens-ellipse-follow-mouse/40270/3 "2022-12-23T06:42:30Z")

</div>

@glv …  
I found it…  
Its here…

```auto

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

---

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [December 23, 2022, 8:11am UTC](https://discourse.processing.org/t/lens-ellipse-follow-mouse/40270/4 "2022-12-23T08:11:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 23, 2022, 8:49am UTC](https://discourse.processing.org/t/lens-ellipse-follow-mouse/40270/5 "2022-12-23T08:49:40Z")

</div>

Hello,

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

`:)`

---

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [December 25, 2022, 2:51am UTC](https://discourse.processing.org/t/lens-ellipse-follow-mouse/40270/6 "2022-12-25T02:51:53Z")

</div>

@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.

```auto

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 26, 2022, 2:29pm UTC](https://discourse.processing.org/t/lens-ellipse-follow-mouse/40270/7 "2022-12-26T14:29:37Z")

</div>

Hello @vrtx,

Try the original code with this:

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

```

Add this to end of `draw()`:

```auto
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.

`:)`

---

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [December 28, 2022, 7:32pm UTC](https://discourse.processing.org/t/lens-ellipse-follow-mouse/40270/8 "2022-12-28T19:32:35Z")

</div>

@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.

```auto
/**
 * 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  
"

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 29, 2022, 8:15pm UTC](https://discourse.processing.org/t/lens-ellipse-follow-mouse/40270/9 "2022-12-29T20:15:23Z")

</div>

Hello @vrtx.

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

```auto
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](https://processing.org/reference/mouseY.html)_

`:)`

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [December 29, 2022, 9:26pm UTC](https://discourse.processing.org/t/lens-ellipse-follow-mouse/40270/10 "2022-12-29T21:26:41Z")

</div>

Hi

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/14788/fisheye-lens-shader.html)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

---

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [December 31, 2022, 8:08pm UTC](https://discourse.processing.org/t/lens-ellipse-follow-mouse/40270/11 "2022-12-31T20:08:40Z")

</div>

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

```auto
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);
  }

```