Hello, can somebody please tell me what I am doing wrong??
Basically what I want is when the mouse is over the area of the square, I want the colors of both the squares and the ellipses to shift.
At first, the squares are being drawn in a scale of reds (random(255), 0, 0) and the ellipses in a scale of blues (0, 0, random(255)). When the mouse hovers the area where they’ll being drawn, I want the squares to change and start being drawn in a scale of blues and the ellipses to be drawn in a scale of reds…
int radius=0;
int length= 720;
float x;
float y;
float mouseX;
boolean rectIsShrinking = true;
boolean circleIsShrinking = false;
void setup() {
size(1080, 720);
background(0,0,0);
rectMode(CENTER);
}
void draw() {
noStroke();
if(mouseX > 180 && mouseX < 900) {
y = 255;
x = 0;
}
else {
y = 0;
x = 255;
}
fill(random(x), 0, random(y));
rect(width/2, height/2, length, length);
if (rectIsShrinking) length--;
else length++;
if (length == 0 || length == 720) rectIsShrinking = !rectIsShrinking;
fill(random(y), 0, random(x));
ellipse(width/2, height/2, radius, radius);
if (circleIsShrinking) radius--;
else radius++;
if (radius == 0 || radius == 720) circleIsShrinking = !circleIsShrinking;
}
Thank you so much in advance!
2 Likes
Hey There !
Please format your code in the forum with the format button or these
```
type or paste code here
```
Also your code doesn’t compile, a working version would be great but I think I know what you mean so I will cook up something for you in just a moment !
1 Like
Thank you so much!!
Here’s what the program looks like if it is any help:
1 Like
So then you want to be able to decrease the size of the circles and squares when hovered over them and change their color correct ?
I want the decreasing/increazing of the sizes of both the square and the circles to be constant, but when they’re hovered I want the colors they’re being drawn in to shift from blue to red (ellipse) and from red to blue (square)
1 Like
Here it is ! I believe this is what you were asking to be achieved.
But first of a few notices with the mistakes your code held.
You held background(0); within setup() as setup is only executed ones, this causes the background(0) to be only applied to the sketch window once this in turn will create that any change in pixels will not cause the previous ones to be updated therefore to have a smooth result one puts the background(0) function in draw()
Secondly, it is important to seperate pieces of code into seperate methods to not get the ‘Spaghetti code’ effect, leaves your code clutter free !
Study the code. See how it works and ask further questions !
Quick note !
The circle will be off center from where it’s collision is being checked maybe you can figure out how to fix that ?
Also you may want to build a class for this kind of setup as adding functionality to this current setup is very grueling and much of the code has to be rewritten to support more !
int colorSquare, colorCircle;
int squareShift, circleShift;
int size;
PVector squarePos;
PVector circlePos;
void setup() {
size(600, 600);
colorSquare = 255;
colorCircle = 255;
squareShift = 0;
circleShift = 0;
//
squarePos = new PVector(width/2, height/2);
circlePos = new PVector(width/2, 100 );
size = 100;
}
void draw() {
background(0);//This has to be in drawn to update the pixels 60 fps ( As that how much draw executes )
if ( mouseOver( squarePos, size ) || mouseOver(circlePos, size ) ){
if (colorSquare != 0 && colorCircle !=0) {
colorSquare-=10;
colorCircle-=10;
}
if (squareShift != 255 && circleShift != 255) {
squareShift+=10;
circleShift+=10;
}
} else {
if (colorSquare !=255 && colorCircle !=255) {
colorSquare+=10;
colorCircle+=10;
}
if (squareShift != 0 && circleShift != 0) {
squareShift-=10;
circleShift-=10;
}
}
fill( colorSquare, 0, squareShift );
rect(squarePos.x, squarePos.y, size, size);
fill( circleShift, 0, colorCircle );
ellipse(circlePos.x, circlePos.y, size, size);
}
boolean mouseOver(PVector pos, int size) {
if (mouseX > pos.x && mouseX < pos.x + size && mouseY > pos.y && mouseY < pos.y + size) return true;
return false;
}
1 Like
it’s close but it’s not exactly this! but you managed to get the shifting part right so maybe I’ll try to apply what you did to my code!
Thank you!
1 Like
there are multiple squares being drawn in a loop, I want them all to shift color, that’s why I called it a “colorscheme” bc they are in a scale of reds/blues
1 Like
All right I hope my template helps you ! Definitely building a class for this will help you out a lot ! Best of luck and if any further questions let us know !
1 Like
Please don’t make a variable mouseX because this is already an internal variable holding the x position of the mouse…
Your variable mouseX is overshadowing the internal variable with the same name. But your new variable is always 0. So nothing happens
5 Likes
omg you’re so right!! that was the problem ahah so lame!
Thank you so much 
2 Likes
