get Color and use it many times - Processing Forum

Loading...

Processing Forum

Programming Questions

sheva29

get Color and use it many times

in Programming Questions • 1 year ago

Hello,

I am trying to make a drawing tool for pixel images, so I want to have a color palette(Image) so that when you hover on it in a certain position and press the 'c" key it takes the color from that pixel and puts in in a color variable, and then draw a square with the color acquired from that pixel, but have the chance of doing it many times. I haven't gotten it to work totally, at least it runs the application but doesn't pick a color specifically. Any help will be much appreciate it.

Here is the code:

int xPos;

int yPos;

int wRect;

int hRect;

PFont myFontPixelizer;

int fontPosX = 30;

int fontPosY = 30;

color pixelColor;

//color = pixelColor;

PImage myImage;

void setup() {

size(600, 600);

myImage = loadImage("starck-squeezer.jpeg");

//background(240);

frame.setTitle("|| Pixelizer v1.0 ||");

frame.setLocationRelativeTo(null);

smooth();

pixelColor= myImage.get(mouseX, mouseY);

}

void draw() {

//Title---------------------------------->

image(myImage, 30, 70);

myFontPixelizer= loadFont("Atari-Font-Full-Version-48.vlw");

textFont(myFontPixelizer);

text("Pixelizer", 30, 70);

fill(18);

//Define my variables and functions

mousePixel();

//Grid------------------------------------>

line(150, 150, 150, 570);

for ( int i = 150 ; i < 580; i = i+20) {

line(xPos+i, 150, xPos+i, 570);

line(xPos+150, yPos+i, 570, yPos+i);

// pixelColor++;

}

//Get color------------------------------->

if (key == 'c') {

myImage.get(mouseX, mouseY);

}

}

void mousePixel() {

if ( mousePressed) {

fill(pixelColor);

rectMode(CENTER);

rect(mouseX, mouseY, 20, 20);

}

}

1

Replies(15)

PhiLho

PhiLho

Re: get Color and use it many times

1 year ago

General (unrelated) remark: avoid to do loadFont() in draw(), that would load the .vlw file 60 times per second. Beside, since you use only one font, you can do that in setup().

And if (key == 'c'), you get the color value but it is dropped immediately, as you don't assign it to pixelColor like you do in setup...

sheva29

Re: get Color and use it many times

1 year ago

Hey Phil,

Thanks for your reply. I tried to assigned the color to my variable but it isn't working. It just draws in black. I'm not doing it right probably, here it is that part:

if (key == 'c') {

// myImage.get(mouseX, mouseY);

pixelColor= myImage.get(mouseX, mouseY);

}

Thanks

benja

benja

Re: get Color and use it many times

1 year ago

Hey,

the problem here is the way you check which key is pressed. When you hit "c", then "key" will remain "c" until you press another key.

move the code into a function called "keyPressed"

void keyPressed(){
if (key == 'c') {
pixelColor = myImage.get(mouseX, mouseY);
}
}

And if you want to pick the color at your mouse-position, then you might want to use

pixelColor = get(mouseX, mouseY);

PhiLho

PhiLho

Re: get Color and use it many times

1 year ago

Good catch on the key test!
But the get() on the image is a good idea, since the sketch area has secondary drawings that maybe sheva29 doesn't want to pick.
Now, I see the image is drawn with an offset, so the coordinates in get() must be offset by the same amount.

sheva29

Re: get Color and use it many times

1 year ago

Hello Ben,

Thanks for your reply. This is what I want to do in pseudo code:

1.Press Key 'c' and get the pixel color from the image and put it in a color variable

2. When clicked, draw a square with the color information you got from the variable( use the variable in a fill)

So the idea is that everytime you go to the image, and press c get a different color stored in the variable. And then draw squares with different colors.

PhiLho

PhiLho

Re: get Color and use it many times

1 year ago

Do what benja wrote:

void keyPressed(){
if (key == 'c') {
pixelColor = myImage.get(mouseX - 30, mouseY - 70);
}
}

I added the offsets I wrote about.

sheva29

Re: get Color and use it many times

1 year ago

@Phil,

I was told about the offset but I still don't understand it. if I am using --myImage.get(mouseX, mouseY)-- which to my understanding is saying get the color in the mouse position x and the mouse position y, from the image. Why do I need the offset, I'm asking just to have a better understanding:). By the way it still does not work. I can not manage to store the color in the variable and keep it.

Thanks.

sheva29

Re: get Color and use it many times

1 year ago

So I did what you suggested and for some reason it only draws black squares. So weird.

PhiLho

PhiLho

Re: get Color and use it many times

1 year ago

Don't call keyPressed(), that's the kind of functions automatically called by Processing when the user presses a key.
The offset is because you display the image at some distance of the top-left corner: the mouseX and mouseY are relative to this top-left coordinate, so subtracting the offset allows to get the position in the image itself. Supposing you only press c when the mouse cursor is over the image, of course.

sheva29

Re: get Color and use it many times

1 year ago

That makes more sense now. I changed to keyPressed(){. but it does not do anything. it just draws black squares.

PhiLho

PhiLho

Re: get Color and use it many times

1 year ago

Why did you rename the function from keyPressed to keyPushed?

I didn't wrote "don't call it keyPressed", I wrote "don't call keyPressed()", ie. don't call it in draw()!

sheva29

Re: get Color and use it many times

1 year ago

Because keyPressed is a property built-in Processing so to make a void keyPressed might not be very appropriate. Sorry if I am not follwing your and benja's instructions very well. this is my third week using processing.

sheva29

Re: get Color and use it many times

1 year ago

Ha ha ha ha. I think I got it. it works!!!! Thank you so much Phil and Benja! I could not figure it out with my processing instructors. One question is, in terms of syntax why do I need the void keyPressed, what is it doing exactly? I just want to have a better scope of the functionality of processing!

this is the final code:

calsign

calsign

Re: get Color and use it many times

1 year ago

keyPressed() is an event-handling function that is called by Processing whenever a key is pressed. Processing makes it relatively easy to handle these events. It is another function, just like setup() or draw(), that is built-in to the language.

PhiLho

PhiLho

Re: get Color and use it many times

1 year ago

To quote myself from above... " that's the kind of functions automatically called by Processing when the user presses a key."
Have you seen the Reference page? That's the page to visit when you are unsure about a function. There, you can find keyPressed and its related functions.

Top Reply