# Rollover with animation

**URL:** <https://discourse.processing.org/t/rollover-with-animation/11890>\
**Category:** Coding Questions\
**Created:** [June 7, 2019, 5:21am UTC](https://discourse.processing.org/t/rollover-with-animation/11890 "2019-06-07T05:21:05Z")\
**Posts on this page:** 8\
**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, 5:21am UTC](https://discourse.processing.org/t/rollover-with-animation/11890/1 "2019-06-07T05:21:05Z")

</div>

Hey, can someone please tell me what I am doing wrong here:

int radius=0;  
int length= 720;

float colorscheme1;  
float colorscheme2;

float mouseX;  
float mouseY;

boolean rectIsShrinking = true;  
boolean circleIsShrinking = false;

void setup() {  
size(1080, 720);  
background(0,0,0);  
rectMode(CENTER);

}

void draw() {  
noStroke();

fill(red, green, blue);  
rect(width/2, height/2, length, length);  
if (rectIsShrinking) length–;  
else length++;  
if (length == 0 || length == 720) rectIsShrinking = !rectIsShrinking;

fill(red, green, blue);  
ellipse(width/2, height/2, radius, radius);  
if (circleIsShrinking) radius–;  
else radius++;  
if (radius == 0 || radius == 720) circleIsShrinking = !circleIsShrinking;  
}

**if(mouseX \> 0 && mouseX \< 1080 && mouseY \> 0 && mouseY \< 720) {**  
\*\* colorscheme1 = (random(0), random(0), random(255)) &&\*\*  
\*\* colorscheme2 = (random(255), random(0), random(0));\*\*  
\*\* }\*\*  
\*\* else{\*\*  
\*\* colorscheme1 = (random(255), random(0), random(0)) &&\*\*  
\*\* colorscheme2 = (random(0), random(0), random(255));\*\*

}  
}

–  
basically processing can’t read this last part  
the message on the console reads: expecting EOF, found ‘if’

thanks in advance!

---

<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, 6:20am UTC](https://discourse.processing.org/t/rollover-with-animation/11890/2 "2019-06-07T06:20:00Z")

</div>

Replace “`&&`” by “`;`” please

Chrisir

---

<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, 6:21am UTC](https://discourse.processing.org/t/rollover-with-animation/11890/3 "2019-06-07T06:21:21Z")

</div>

> [@beatrizt](#):
>
> colorscheme1 = (random(0), random(0), random(255))

also use `color`:

colorscheme1 = **color** (random (…

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [June 7, 2019, 6:21am UTC](https://discourse.processing.org/t/rollover-with-animation/11890/4 "2019-06-07T06:21:22Z")

</div>

```auto
int radius=0;
int length= 720;

float colorscheme1;
float colorscheme2;

float mouseX;
float mouseY;

boolean rectIsShrinking = true;
boolean circleIsShrinking = false;

void setup() {
  size(1080, 720);
  background(0, 0, 0);
  rectMode(CENTER);
}

void draw() {
  noStroke();

  fill(red, green, blue);
  rect(width/2, height/2, length, length);
  if (rectIsShrinking) length–;
  else length++;
  if (length == 0 || length == 720) rectIsShrinking = !rectIsShrinking;

  fill(red, green, blue);
  ellipse(width/2, height/2, radius, radius);
  if (circleIsShrinking) radius–;
  else radius++;
  if (radius == 0 || radius == 720) circleIsShrinking = !circleIsShrinking;
} // <-- This is the end of draw()

// VVV What function is this code in? VVV

if (mouseX > 0 && mouseX < 1080 && mouseY > 0 && mouseY < 720) {
  colorscheme1 = (random(0), random(0), random(255)); // This is a single statement! && -> ;
  colorscheme2 = (random(255), random(0), random(0));
} else {
  colorscheme1 = (random(255), random(0), random(0)); // This is a single statement! && -> ;
  colorscheme2 = (random(0), random(0), random(255));
}
}

```

When you format this code properly, you easily see that your draw() function is being ended early by a stray closing bracket, which puts some of your code not in a function.

You probably want to remove this stray closing bracket.

Your lost code also has &&'s where it should have ;'s, and it’s assigning four strange things to some float numbers…

---

<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:51am UTC](https://discourse.processing.org/t/rollover-with-animation/11890/5 "2019-06-07T11:51:04Z")

</div>

Thanks!  
I’ve corrected those mistakes but it still doesn’t work the way I want it too.

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

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…

---

<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:51am UTC](https://discourse.processing.org/t/rollover-with-animation/11890/6 "2019-06-07T11:51:40Z")

</div>

Thank you!  
I’ve now corrected those errors but it still doesn’t work the way I want it too.

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

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…

---

<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, 2:02pm UTC](https://discourse.processing.org/t/rollover-with-animation/11890/7 "2019-06-07T14:02:47Z")

</div>

> [@beatrizt](#):
>
> float mouseX;

This was one problem as I said in your other thread

```auto

int radius=0;
int length= 720;

float x;
float y;

boolean rectIsShrinking = true;
boolean circleIsShrinking = false;

boolean overRect=false; 

void setup() {
  size(1080, 720);
  background(0, 0, 0);
  rectMode(CENTER);
}

void draw() {
  noStroke();

  if (mouseX > 180 && 
    mouseX < 900) {
    overRect=true;
  } else {
    overRect=false;
  }

  if (overRect)
    fill(0, 0, random(255));   
  else
    fill (random(255), 0, 0); 
  // 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;

  if (overRect)
    fill (random(255), 0, 0);
  else
    fill(0, 0, random(255)); 
  //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;
}

```

---

<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, 2:04pm UTC](https://discourse.processing.org/t/rollover-with-animation/11890/8 "2019-06-07T14:04:31Z")

</div>

continued in your other thread

Chrisir