JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<script type="application/processing">
    
float speed = 60.0;
float hex = 60.0;
    
HexLine h1 = new HexLine(0.05); 

class HexLine { 
    float xoff, yoff, inc;
    int direction=0; 
    
    HexLine(float i) {  
        inc = i; 
        xoff = 0.0;
        yoff = 0.0;
    } 

    void update() { 
        float n = xoff*speed;          
        xoff += inc;
  
        switch(int(frameCount%frameRate)){
            case speed: direction = round(random(-1,1));
                        break;
            case speed/3: direction = round(random(-1,1));
                        break;
            case speed/3*2: direction = round(random(-1,1));
                        break;
        }
    
        if( frameCount%frameRate < speed/3 ){
            yoff += direction * hex/20;
        }
    
        if(n>width){
            xoff = 0.0;
            n = 0.0;
        }
  
        float m = height/2 + yoff;
        if(m>height){
            m = 1;
        }
        yoff += inc;

        fill(0,255,0,100);
        ellipse(n,m,8,8);
    } 
} 

void setup() {
    size(1024,1024);
    background(0);
    frameRate(speed);
    smooth();
    noStroke();
    //
}

void draw() {
    fill(0, 5);
    rect(0,0,width,height);
    
    h1.update();


    textSize(32);
    text( int(frameCount%frameRate), width-60, height-20); 

}
</script>
<canvas></canvas>

CSS

html,body{
    width:100%;
    height:100%;
    margin:0; padding:0;
}
canvas{
    width:100%;
    height:100%; 
}