Untitled

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>Smiley</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.js"></script>

    <script>
        var centerX, centerY;
        var scale;
        var angle; // don't worry about this

        function setup() {
            createCanvas(300, 400);
            centerX = 150; // this could have been any point, but we are
            centerY = 200; // deciding to use the middle of the yellow ellipse
            scale = 1;
            angle = 0;
        }

        function draw() {
            background(255);

            // head
            fill(255, 255, 0);
            ellipse(150, 200, 200, 200);

            // eyes
            fill(0);
            ellipse(115,165,30,30); // left
            ellipse(185,165,30,30); // right

            // mouth
            fill(255);
            rectMode(CENTER);
            rect(150,240,100,30);
            line(100,240,200,240);

            // ONCE YOU HAVE FINISHED PROPERLY USING centerX, centerY, and scale,
            // UN-COMMENT THE TWO LINES BELOW TO SEE YOUR SMILEY BOUNCE IN AND OUT
            // scale = abs(cos(angle));
            // angle += PI/100;
        }
    </script>
</head>

<body>

</body>

</html>