Home/ Questions/Q 8509123
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T03:20:58+00:00

Does anybody know what’s wrong with this code? It shows nothing in the browser.

  • 0

Does anybody know what’s wrong with this code? It shows nothing in the browser.

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 variable 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.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="processing.js"></script>
<script type="text/processing" data-processing-target="mycanvas">


void setup(){
    size(400,400);
    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:)

Btw how to add color to the code on stackoverflow?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are a some problems with your script.

    Related with the html page:

    • You have to declare the encoding of the document in the header section: <meta charset="utf-8">
    • The canvas element should be included inside the html body.

    Related with the processing code:

    • The processing script needs at least one setup() function and one draw() function. You defined a draw() method in your Face class, but not the main draw() function (by the way, you missed the brackets in your draw() method).
    • The mousePressed functionality should be included inside the main draw() method.
    • You need at least to declare one instance of your Face class (inside the setup() function). For example: Face myFace = new Face(10, 10);.
    • And probably more syntax errors inside your draw() method…

    My recommendations:

    • Start with something simpler: The more lines you write from scratch, the harder to debug. Try to draw first just an ellipse and incrementally add more things to your code.
    • Keep your processing script in a separate file. It’s cleaner and you can debug it using the processing editor or the processing online sketch:
        <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Testing testing</title>
            <script type="text/javascript" src="processing.js"></script>
        </head>

        <body>
            <canvas id="my-sketch" data-processing-sources="my-sketch.pde"></canvas>
        </body>
    </html>
    • Check this tutorial to get some ideas about objects and classes in processing.
    • The syntax in processing is very similar to java, and there’re a lot more resources for understanding the basics of OOP for that language. Just google for it.

    For syntax highlightning, look here.

    • 0