JSFiddle - React, Tailwind, and code Playground

by mehmetatas

HTML

<script type="application/processing">
    PVector[] vertices = new PVector[3];

    void setup() {
        size(400, 400, P3D);
        rotation = 0;
        vertices[0] = new PVector(100, 100);
        vertices[1] = new PVector(100, 200);
        vertices[2] = new PVector(200, 100);
        stroke(255);
    }

    float rotation;

    void draw() {
        background(64);
        drawSquare();
        drawTriangle();
    }

    void drawSquare() {
        fill(0, 128, 255);
        rotation = (frameCount % 360) * (PI / 180);

        pushMatrix();
        translate(150, 150);
        rotateZ(rotation);
        translate(-150, -150);
        rect(100, 100, 100, 100);
        popMatrix();
    }

    void drawTriangle() {
        fill(128);
    
        beginShape();
        for (int i = 0; i < vertices.length; i++)
            vertex(vertices[i].x, vertices[i].y);    
        endShape(CLOSE);
    }
</script>
<canvas width="200px" height="200px"></canvas>

JavaScript

var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
    if (scripts[i].type == "application/processing") {
        var src = scripts[i].src,
            canvas = scripts[i].nextSibling;
        if (src && src.indexOf("#")) {
            canvas = document.getElementById(src.substr(src.indexOf("#") + 1));
        } else {
            while (canvas && canvas.nodeName.toUpperCase() != "CANVAS")
            canvas = canvas.nextSibling;
        }
        if (canvas) {
            new Processing(canvas, scripts[i].text);
        }
    }
}