My intention is to draw two eyes based on the mouse location.So i define an Eye class and then call its draw method with valiable mouseX and mouseY. However, it shows nothing on the browser.
Also, i wonder how to detect the size of the browser because screen.width and screen.height don't seem to work within a browser.
void setup(){
size(800,800);
smooth();
background(225);
}
if (mousePressed){
Face.draw(mouseX,mouseY);}
class Face{
float x,y,a;
Face(float ax,float ay){
x=ax;
y=ay;
a=random(1,5);}
void draw{
noFill();
stroke(0);
//eye1
ellipse(x+2.2*a,y-a,a/2,a/2);
//eyelashes1
arc(x+2.2*a，y-.5*a,1.2*a,1.2*a,PI,2*PI)；
//eyebrows1
arc(x+3*a,y-.3,2*a,2*a,5/4*PI,9/4*PI);
//eye2
ellipse(x-2.2*a,y-a,a/2,a/2);
//eyelashes2
arc(x-2.2*a，y-.5*a,1.2*a,1.2*a,PI,2*PI)；
//eyebrows2
arc(x-3*a,y-.3,2*a,2*a,5/4*PI,9/4*PI);}}
</script>
</head>
<body></body>
<canvas id="mycanvas"></canvas>
</html>
i'm a beginner, so i don't know if my problem is stupid or not.
But any hint is welcomed:)
Thank you.
creating art with processing
