Magnifier please help : (

Processing Coding Questions
1

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 :worried:


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);
  
}
1 Like
2

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.

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);
}
3

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

4

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 :unamused:

You need to be clearer when you say

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

5

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

6

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

8

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 :sweat:
hopfully that makes sense

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);

}
9

You need to use arrays like this

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;
}
1 Like
10

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

11

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

12

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