processing skulls

HTML

<title>Basic Processing</title>
<script id="processingcode" type="application/processing">
    
void setup() {
  size(600, 600);
}
    
int xPos = mouseX;
boolean animate = true;
    
void draw() {
    if (animate) {
        xPos = mouseX;
        background(255, 255, 255);
    }
    else {
        background(0, 0, 0);
    }
    fill(255, 0, 0);
    font = loadFont("FFScala.ttf"); 
    textFont(font); 
    translate(width / 2, height /2 );
    for(int j = 1; j < 10; j++) {
        scale(1.3);
        for(int i = 1; i < 32; i++) {
                int x = i + (xPos - width / 2);
                int y = 0;
                rotate(1);
                text('\u2620', x, y);
        }
    }
}

void mousePressed() {
    animate = ! animate; // animate/freeze
}
</script>

<canvas id="canvas1"> </canvas>

JavaScript

new Processing(document.getElementById("canvas1"),
               document.getElementById("processingcode").text);