processing code shows nothing on the browser. don't know why

Question

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?

score 3 · Accepted Answer · edited May 23 '17 at 10:24

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.

processing code shows nothing on the browser. don't know why

1 Answers1