How do I allow cursor to grab data about image pixels?

General Discussion Other

michaelpr..

How do I allow cursor to grab data about image pixels?

in General Discussion • Other • 7 months ago

Hello,
I'm new to the Processing forum! I am making a program that loads up an image, then when you click on an area of the picture it will start drawing lines/points over specific colors or shades of pixels in the picture. Basically I'd like the variables in a "line()" command to be constantly changing, how would I be able to establish a connection between the shade/color of pixels that the cursor glides over to "line()"? I am new to processing, more familiar with max/msp, which has number boxes that let you view in real time data that you have connected to them. Is there something like this in processing? Thank you all for the help!

--Mike

Replies(3)

ramin

Re: How do I allow cursor to grab data about image pixels?

7 months ago

hey Mike,

you can get the color of a pixel in an image with the function get(int x,int y)

like with

PImage img;
void setup() {
size(600,600);
img = loadImage("http://24.media.tumblr.com/2a5aa169c0ee90f7c49fd071d6710133/tumblr_mikpnfm51T1s4hpx7o4_1280.png");
}
void draw() {
image(img,0,0);
color c= img.get(mouseX,mouseY);
println(red(c)+","+green(c)+","+blue(c));
}

the line function takes 4 parameters x1,y1,x2,y2, which draws a line from one point to another.

in the draw you can basicaly set those values to whatever you like. what kind of connection do you think about?

michaelpr..

Re: How do I allow cursor to grab data about image pixels?

7 months ago

Wow. That's great Ramin. I'm going to use those values you helped me see to draw structures over defined color of pixels. Like, when you click and drag it starts creating geometric shapes around those pixels. I just don't know how yet, ha, but you really got me thinking! Thanks.

--Mike

ramin

Re: How do I allow cursor to grab data about image pixels?

7 months ago

sounds nice.

You would need to implement some of the functions for mouseInput

mouseClicked()

mouseDragged() mouseMoved() mousePressed() mousePressed mouseReleased()

I wrote a little example, which includes writing an own class and an ArrayList (which is a List of Objects, you can add,remove objects... like an Array, but flexible in size)

void setup() {
size(500, 500);
ellipseMode(RADIUS);
}
void draw() {
background(0);
for (Ring r: rings)
r.draw();
}
PVector mouseStart;
ArrayList<Ring> rings = new ArrayList<Ring>();
void mousePressed () {
mouseStart = new PVector(mouseX, mouseY);
}
void mouseDragged() {
stroke(255);
line(mouseStart.x, mouseStart.y, mouseX, mouseY);
}
void mouseReleased() {
PVector center = new PVector((mouseStart.x+mouseX) / 2, (mouseStart.y+mouseY) / 2);
float radius = dist(center.x, center.y, mouseX, mouseY);
Ring ring = new Ring(center, radius);
rings.add(ring);
}
class Ring {
PVector center;
float radius;
Ring(PVector c, float r) {
center = c;
radius = r;
}
void draw() {
noFill();
stroke(255);
ellipse(center.x, center.y, radius, radius);
}
}

So here, when you click the mouse you store the mouse location. now when you drag it, you draw a line from the

stored position to the actual position. When the mouseButton is released a Circle (Ring class) is created using the start and endpoint( the positio where the mouse is released). Then I add the just created Ring to a ArrayList of Rings to draw them all the time

Top Reply