# Eyeball moving effect

**URL:** <https://discourse.processing.org/t/eyeball-moving-effect/30261>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [May 24, 2021, 9:28pm UTC](https://discourse.processing.org/t/eyeball-moving-effect/30261 "2021-05-24T21:28:15Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![isaf12](https://avatars.discourse-cdn.com/v4/letter/i/7ba0ec/32.png) [@isaf12](https://discourse.processing.org/u/isaf12)\
**Post date:** [May 24, 2021, 9:28pm UTC](https://discourse.processing.org/t/eyeball-moving-effect/30261/1 "2021-05-24T21:28:15Z")

</div>

Hi, I’m new to this. I wanted to created one simple eyeball with two ellipses. One being bigger for the white part of the eye and the other ellipse a little smaller which is the iris, the black part of the eye. I can get the two ellipses but I can’t get the effect I want for the black part of the eye (black ellipse in the middle) to move with the direction of the mouse. Also without getting out of the white part of the eye, like with boundaries. How can I get this interaction?

void setup(){  
size(800,800);  
frameRate(60);  
background(0);  
ellipseMode(RADIUS);  
ellipseMode(CORNERS);  
}

void draw (){  
ellipseMode(RADIUS);  
fill(255);  
ellipse(400, 400, 90, 90);  
noStroke();

fill(mouseY, 78, mouseX);  
ellipseMode(CENTER);  
fill(0,0,0);  
ellipse(400, 400, 90, 90);  
noStroke();

}

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 24, 2021, 9:50pm UTC](https://discourse.processing.org/t/eyeball-moving-effect/30261/2 "2021-05-24T21:50:59Z")

</div>

Hi,

Please make sure to format your code by using the `</>` button in the message editor or use backticks around your code like : ```code``` → `code` 😉

Few things on your code first :

- Specifying `frameRate(60)` is not necessary unless you want to constrain it manually because by default, the Processing draw loop runs roughly at 60fps

- After those two lines :

- Here you don’t have an animation but if you only put the `background(0)` instruction in the `setup()` function (executed only once at beginning) then you only clear the background once and when your shapes are going to move they are going to be displayed on top of each other like this for example :

- You tried to vary the fill color with the mouse location `fill(mouseY, 78, mouseX);` but it doesn’t work (as mentioned above). Also because you overwrite the fill color to black just after! 😉

- You want to put your ellipse at the center of the window so you say : `ellipse(400, 400, 90, 90);` but most of the time we want to make our code react to the parameters of the sketch. What if you change the size of the window? You’ll need to change all the places where you put `400`. Instead use the [`width`](https://processing.org/reference/width.html) and [`height`](https://processing.org/reference/height.html) built-in variables to express that :

Finally for the eye effect, you should look at vectors and this tutorial on the Processing forum :

[https://processing.org/tutorials/pvector/](https://processing.org/tutorials/pvector/)