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();
}
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 :
ellipseMode(RADIUS);
ellipseMode(CORNERS);
the ellipse mode will be CORNERS because you are overriding it just after (you should do it in the draw function thought if you want to draw ellipses differently)
-
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 :
so you need to put it inside the draw() loop to always erase the previous image
-
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!
Note that Processing styling system is like a state machine when you set your styling (fill, stroke, mode…) then you draw your shape, then set another fill/stroke color and draw another shape…
-
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 and height built-in variables to express that :
ellipse(width / 2, height / 2, 90, 90);
doesn’t it make the code more clear?
Also if you are drawing a circle (not an ellipse), you should use the circle() function :
circle(width / 2, height / 2, 90);
Finally for the eye effect, you should look at vectors and this tutorial on the Processing forum :
https://processing.org/tutorials/pvector/