Need help changing background with mouse!

Processing Coding Questions
1

i understand coding it is as simple as background(mouseX) or anything in those variations. My concern is getting the top left corner in a 250x250 window to be background(255) and the bottom right corner to be background(0). i got:

void draw()
{
  background((mouseX + mouseY) / 2);
}

But this way is opposite of what i need and the bottom right corner only ends up at 250 not 255

1 Like
2

http://Studio.ProcessingTogether.com/sp/pad/export/ro.9PDcp7xMBknWz

3

That’s not really it. I just need to use greyscale from white(255) at 0,0 and black (0) at 250,250 with the mouse movement

4

Use fill() + rect() to have sections of the canvas w/ diff. colors. :neutral_face:

5

background( 250 - ((mouseX + mouseY) / 2));

6

That’s close but point 0,0 needs to be exactly at white(255). That leaves it at (250) doesn’t it?

7

How about using the norm() or map() function?

float x;
void draw(){
    x = norm(250 - ((mouseX + mouseY) / 2),0,250)*255;
    println(x);
    background(x);
}

This is normalising your mouse position value, returning a value between 0 and 1, which is then multiplied by 255 to get your colour value.

Or…

float x;
void draw(){
    x = map(250 - ((mouseX + mouseY) / 2), 0, 250, 0, 255);
    println(x);
    background(x);
}

This is “mapping” your mouse position value from the range it currently occupies (0-250) to a value in the range of numbers you require (0-255).

These both will get you closer, but not entirely there. The lowest value will be 1.02, but you could always throw in an if clause to minus one on values below an arbitrary threshold, then you would have a slight “jump” at that chosen point though.

float x;
void draw(){
    x = map(250 - ((mouseX + mouseY) / 2), 0, 250, 0, 255);
    if(x < 122.5){
        x -= 1;
    }
    println(x);
    background(x);
}

There is probably a better way to achieve a minimum value of 0 but I am only new to Processing (only my second day here) so I would be keen to find out.

*edited to give brief explanations on functions.

1 Like
8

today is my second day on this site. i started using this about a week ago so im still extremely new myself. Unfortunately it’s for a project and the professor said it needs to be exact which is why this is driving me up the walls.

9

Hi QuazArxx,

You should have a look at the map() function, which converts any input number from one range to another.

https://processing.org/reference/map_.html

1 Like