# Change in color scheme

**URL:** <https://discourse.processing.org/t/change-in-color-scheme/11895>\
**Category:** Coding Questions\
**Created:** [June 7, 2019, 11:53am UTC](https://discourse.processing.org/t/change-in-color-scheme/11895 "2019-06-07T11:53:34Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![beatrizt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/beatrizt/32/5473_2.png) [@beatrizt](https://discourse.processing.org/u/beatrizt)\
**Post date:** [June 7, 2019, 11:53am UTC](https://discourse.processing.org/t/change-in-color-scheme/11895/1 "2019-06-07T11:53:34Z")

</div>

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…

```auto
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!

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [June 7, 2019, 12:02pm UTC](https://discourse.processing.org/t/change-in-color-scheme/11895/2 "2019-06-07T12:02:15Z")

</div>

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 !

---

<div class="post-metadata">

**Author:** ![beatrizt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/beatrizt/32/5473_2.png) [@beatrizt](https://discourse.processing.org/u/beatrizt)\
**Post date:** [June 7, 2019, 12:16pm UTC](https://discourse.processing.org/t/change-in-color-scheme/11895/3 "2019-06-07T12:16:43Z")

</div>

Thank you so much!!  
Here’s what the program looks like if it is any help:

 ![10](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f4cc49769528739f8694f209e0fbb4fc820d05f2.png)

---

<div class="post-metadata">

**Author:** ![beatrizt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/beatrizt/32/5473_2.png) [@beatrizt](https://discourse.processing.org/u/beatrizt)\
**Post date:** [June 7, 2019, 12:17pm UTC](https://discourse.processing.org/t/change-in-color-scheme/11895/4 "2019-06-07T12:17:27Z")

</div>

![04](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3c63b6e812712f894c123e464e500bbf5cb1a55c.png)

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [June 7, 2019, 12:17pm UTC](https://discourse.processing.org/t/change-in-color-scheme/11895/5 "2019-06-07T12:17:35Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![beatrizt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/beatrizt/32/5473_2.png) [@beatrizt](https://discourse.processing.org/u/beatrizt)\
**Post date:** [June 7, 2019, 12:36pm UTC](https://discourse.processing.org/t/change-in-color-scheme/11895/6 "2019-06-07T12:36:08Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [June 7, 2019, 12:38pm UTC](https://discourse.processing.org/t/change-in-color-scheme/11895/7 "2019-06-07T12:38:08Z")

</div>

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 !

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![beatrizt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/beatrizt/32/5473_2.png) [@beatrizt](https://discourse.processing.org/u/beatrizt)\
**Post date:** [June 7, 2019, 12:59pm UTC](https://discourse.processing.org/t/change-in-color-scheme/11895/8 "2019-06-07T12:59:14Z")

</div>

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!

![29](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3c415bb057fb36152c80ea9a9823effc2d77e8e0.gif)

---

<div class="post-metadata">

**Author:** ![beatrizt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/beatrizt/32/5473_2.png) [@beatrizt](https://discourse.processing.org/u/beatrizt)\
**Post date:** [June 7, 2019, 1:00pm UTC](https://discourse.processing.org/t/change-in-color-scheme/11895/9 "2019-06-07T13:00:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [June 7, 2019, 1:05pm UTC](https://discourse.processing.org/t/change-in-color-scheme/11895/10 "2019-06-07T13:05:43Z")

</div>

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 !

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 7, 2019, 1:44pm UTC](https://discourse.processing.org/t/change-in-color-scheme/11895/11 "2019-06-07T13:44:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![beatrizt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/beatrizt/32/5473_2.png) [@beatrizt](https://discourse.processing.org/u/beatrizt)\
**Post date:** [June 7, 2019, 2:14pm UTC](https://discourse.processing.org/t/change-in-color-scheme/11895/12 "2019-06-07T14:14:02Z")

</div>

omg you’re so right!! that was the problem ahah so lame!  
Thank you so much 🙂