Pattern Numbers

by Giorgio Malvone

HTML

<title>Basic Processing</title>
<script id="processingcode" type="application/processing">
    
void setup() {
    size(window.innerWidth, window.innerHeight);
}
int yPos = mouseY;
int xPos = mouseX;
boolean animate = true;
    
void draw() {
    if (animate) {
        xPos = mouseX;
        background(255, 170, 187);
    }
    else {
        background(55, 40, 7);
    }
        float a = a + 0.04;
        float s = cos(a)*2;
        fill(12, 100, 47);
        text(xPos, 10,10);
        textFont( loadFont("FFScala.ttf") ); 
        translate(width / 2, height /2 );
        for(int j = 1; j < 10; j++) {
    scale(1.2);
        
   
        
        for(int i = 1; i < 8; i++) {
                    int x = i + (xPos - width / 2);
                    int y = 0;                    

                fill(random(256) , random(256), random(256) );
                rotate( ( (xPos - yPos) /s));
                text(xPos, x, y);
        }
    }
    
}

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

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

CSS

body{
    overflow:hidden;
}

JavaScript

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