JSFiddle - React, Tailwind, and code Playground

HTML

<script type="application/processing">
    PFont font;
    PVector gravity = new PVector(0.0, 0.001);
    
    float radius = 50.0;
    float fps = 60.0;
    float deltaT = 1000.0 / fps;

    Ball ball;

    void setup() {
        try {
            size(300, 600);
            stroke(255);

            font = createFont("Arial", 14);
            textFont(font);
            frameRate(fps);

            ball = new Ball(150, 2 * radius, radius);
            ball.a = gravity;
        } catch (Exception e) {
            println("setup: " + e.message);
        }
    }

    void draw() {
        try {    
            background(0, 128, 255);

            ball.move();
            ball.draw();

            fill(255);
            text(deltaT, width - 50, 20);
        } catch (Exception e) {
            println("draw: " + e.message);
        }
    }

    class Ball {
        PVector p;
        PVector v;
        PVector a;
        float r;

        Ball(float x, float y, float r) {
            p = new PVector(x, y);
            v = new PVector();
            a = new PVector();
            this.r = r;
        }

        void move() {
            PVector v0 = v;
            PVector dv = PVector.mult(a, deltaT);
            v.add(dv);

            // dv = a * dt;
            // v1 = v0 + dv;
            // dx = v0 * dt + dv * dt / 2
            PVector d = PVector.add(
            PVector.mult(v0, deltaT),
            PVector.mult(dv, deltaT * 0.5));

            move(d.x, d.y);
        }

        void move(float dx, float dy) {
            p.x += dx;
            p.y += dy;

            if (p.x > width - r) {
                p.x = width - r;
                v.x = -v.x;
            }
            if (p.x < r) {
                p.x = r;
                v.x = -v.x;
            }
            if (p.y > height - r) {
                p.y = height - r;
                v.y = -v.y;
            }
            if (p.y < r) {
                p.y = r;
                v.y = -v.y;
            }
...

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);
            }
        }
    }