# Magnifier please help : (

**URL:** <https://discourse.processing.org/t/magnifier-please-help/30602>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [June 9, 2021, 1:30pm UTC](https://discourse.processing.org/t/magnifier-please-help/30602 "2021-06-09T13:30:29Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Goku557](https://avatars.discourse-cdn.com/v4/letter/g/e68b1a/32.png) [@Goku557](https://discourse.processing.org/u/Goku557)\
**Post date:** [June 9, 2021, 1:30pm UTC](https://discourse.processing.org/t/magnifier-please-help/30602/1 "2021-06-09T13:30:29Z")

</div>

Hey so i am trying to magnify a 5x5 area around the mouse cursour and then draw that area in a rect.  
Basicaly i want to get the surround pixels at mouse x and mouse Y .  
put those pixels into an array?  
use that array to draw a rect i think  
what i am struggling with the most is putting this in code, it does’nt seem to click for me.  
i’ve stopped and started so many times. so my code is not alot. ive tried to breck it down by understanding i can get one pixel using get()  
Please please any help or advice would be amzing its due tomorrow or just a different approch you recommend would be amazing 😟

```auto

void setup(){
size(640 , 360);
 Picture=loadImage("London.jpg");
}

void draw(){
  image(Picture,0,0);

//for(int y = 0; y < height; y++){ // coloum
// for(int x = 0; x < width; x++){ // row
//}
//}

 
color a = Picture.get(mouseX,mouseY);
fill(a);

  rect(0, 0, 100, 100);
  
}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [June 9, 2021, 3:34pm UTC](https://discourse.processing.org/t/magnifier-please-help/30602/2 "2021-06-09T15:34:47Z")

</div>

The easiest way is to capture a rectangle of the screen as an image, resize the capture image and then display it somwhere like this.

```auto
PImage scene;
PImage part;
int partSize = 20;

void setup() {
  size(800, 360);
  scene=loadImage("london.jpg");
}

void draw() {
  background(255);
  image(scene, 0, 0);
  if (part != null) {
    image(part, 600, 0);
  }
}

void mouseMoved() {
  // Only need to capture the area if the mouse moves
  part = get(mouseX - partSize / 2, mouseY - partSize / 2, partSize, partSize);
  part.resize(100, 100);
}

```

---

<div class="post-metadata">

**Author:** ![Goku557](https://avatars.discourse-cdn.com/v4/letter/g/e68b1a/32.png) [@Goku557](https://discourse.processing.org/u/Goku557)\
**Post date:** [June 9, 2021, 3:53pm UTC](https://discourse.processing.org/t/magnifier-please-help/30602/3 "2021-06-09T15:53:49Z")

</div>

hey so for this task its not actually making an image bigger its more to do with getting the pixels at that point(the mouse cursor) storeing that data or the colours of those pixels and just drawing that in a different part of the sketch. Though that is a good soloution if that was my task : ) thanks for the reply

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [June 9, 2021, 3:58pm UTC](https://discourse.processing.org/t/magnifier-please-help/30602/4 "2021-06-09T15:58:56Z")

</div>

You said

> so i am trying to magnify a 5x5 area around the mouse cursour and then draw that area in a rect.

and that’s what I did 😒

You need to be clearer when you say

> [@Goku557](#):
>
> storeing that data or the colours of those pixels and just drawing that in a different part of the sketch.

what do you mean by ‘drawing that’ what is ‘that’?

---

<div class="post-metadata">

**Author:** ![Goku557](https://avatars.discourse-cdn.com/v4/letter/g/e68b1a/32.png) [@Goku557](https://discourse.processing.org/u/Goku557)\
**Post date:** [June 9, 2021, 4:10pm UTC](https://discourse.processing.org/t/magnifier-please-help/30602/5 "2021-06-09T16:10:00Z")

</div>

yh your right very sorry about that what i mean is putting those colours in a rect i guess

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [June 9, 2021, 4:13pm UTC](https://discourse.processing.org/t/magnifier-please-help/30602/6 "2021-06-09T16:13:47Z")

</div>

> [@Goku557](#):
>
> i mean is putting those colours in a rect i guess

That statement is meaningless - are you sure you know what you want LOL.

---

<div class="post-metadata">

**Author:** ![Goku557](https://avatars.discourse-cdn.com/v4/letter/g/e68b1a/32.png) [@Goku557](https://discourse.processing.org/u/Goku557)\
**Post date:** [June 9, 2021, 4:21pm UTC](https://discourse.processing.org/t/magnifier-please-help/30602/8 "2021-06-09T16:21:49Z")

</div>

this will help show what i mean  
if i was to continue doing it this way i would have to do it 25 times as i am trying the get the 5x5 area at the mouse Cursor hopefully that explains it better 😓  
hopfully that makes sense

```auto
PImage london;

void setup(){
  size(640,360);
  london = loadImage("London.jpg");

}

void draw(){
  image(london,0,0);
  // getting the pixels 
  color a = get(mouseX,mouseY);
  color b = get(mouseX+1,mouseY);
  color c = get(mouseX+2, mouseY);
  color d = get(mouseX-1, mouseY);

 
  
translate(40,40);
noStroke();

fill(a);
rect(0,0,30,30);
fill(b);
rect(30,0,30,30);
fill(c);
rect(60,0,30,30);
fill(d);
rect(-30,0,30,30);

}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [June 9, 2021, 4:35pm UTC](https://discourse.processing.org/t/magnifier-please-help/30602/9 "2021-06-09T16:35:02Z")

</div>

You need to use arrays like this

```auto
PImage scene;
int[] colours;

void setup() {
  size(800, 360);
  scene=loadImage("london.jpg");
}

void draw() {
  background(255);
  image(scene, 0, 0);
  if (colours != null) {
    noStroke();
    int px = 600, py = 20, pw = 30;
    for(int i = 0; i < colours.length; i++){
      fill(colours[i]);
      rect(px + (i % 5) * pw, py + (i / 5) * pw, pw, pw);
    }
  }
}

void mouseMoved() {
  // Only need to capture the area if the mouse moves
  PImage part = get(mouseX - 2, mouseY - 2, 5, 5);
  part.loadPixels();
  colours = part.pixels;
}

```

---

<div class="post-metadata">

**Author:** ![Goku557](https://avatars.discourse-cdn.com/v4/letter/g/e68b1a/32.png) [@Goku557](https://discourse.processing.org/u/Goku557)\
**Post date:** [June 9, 2021, 4:40pm UTC](https://discourse.processing.org/t/magnifier-please-help/30602/10 "2021-06-09T16:40:17Z")

</div>

THANK YOU !! this works  
i know this may seem like much but could you walk me through this  
such as what px , py and pw mean

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [June 9, 2021, 4:50pm UTC](https://discourse.processing.org/t/magnifier-please-help/30602/11 "2021-06-09T16:50:32Z")

</div>

[px, py] is the top left corner of the colour grid. This grid contains 25 squares each one being pw pixels in size. So px, py and pw controls where and how big the colour swatch area is. Try changing the values and you will see what I mean.

The statement  
`PImage part = get(mouseX - 2, mouseY - 2, 5, 5);`  
captures a 5x5 grid round the mouse position annd returns it as a PImage object.

The PImage object contains an array of integers (one per pixel) holding the pixel colour data. The next line loads this array so we can examine them. The final line  
`colours = part.pixels;`  
provides a handy identifier which we can use latter for using the colour data.

---

<div class="post-metadata">

**Author:** ![Goku557](https://avatars.discourse-cdn.com/v4/letter/g/e68b1a/32.png) [@Goku557](https://discourse.processing.org/u/Goku557)\
**Post date:** [June 9, 2021, 4:58pm UTC](https://discourse.processing.org/t/magnifier-please-help/30602/12 "2021-06-09T16:58:09Z")

</div>

ah okay that makes sense thank you very much for the help