Processing in JS panel

by Admiral Potato

HTML

<canvas width="500" height="500"></canvas>

CSS

</style> 
<script type="text/javascript">
    window.addEventListener('load',function() {
    var scripts = document.body.getElementsByTagName('script');
    var canvases = document.body.getElementsByTagName('canvas');
    new Processing(canvases[0],scripts[0].text);
}, false);
// Here prevent javascript in body from throwing error
</script>
<style>

JavaScript

// Global variables
float DEG = TAU / 360.0;
float radius = 100.0;
float time = 0;
float centerX, centerY;

//Reusable functions for getting X and Y on a circle
float getXByDeg(float degree){
    return cos(DEG * degree) * radius;
}
float getYByDeg(float degree){
    return sin(DEG * degree) * radius;
}

void drawTriangle(){
    triangle(
        getXByDeg(-90), getYByDeg(-90),
        getXByDeg(30), getYByDeg(30),
        getXByDeg(150), getYByDeg(150)
    );
}

// Setup the Processing Canvas
void setup(){
    size(500, 500, P3D);
    strokeWeight(5);
    frameRate(24);
    smooth(8);
    centerX = width / 2.0;
    centerY = width / 2.0;
    stroke(255); 
}

// Main draw loop
void draw(){
    int
        numCopies = 32,
        i;
    float
        fraction = PI / 16 / (float)numCopies;
    
    time = ((float)frameCount/(24.0 * 8.0) % 1.0);

    background(0);

    translate(centerX, centerY);
    rotateY(-time * TAU);
    rotateX(time * TAU);
    rotateZ(-time * TAU);

    fill( 0, 127, 255);

    for(i = 0; i < numCopies; i++){
        rotateY(fraction * (float)i * ((sin(time * TAU * 2) + 1.0) * 0.5));
        drawTriangle();
    }
    

}