JSFiddle - React, Tailwind, and code Playground

by Animesh Shaw

HTML

<script type="text/processing" data-processing-target="processing-canvas">
    float centerX = 100;
    float centerY = 100;
    float ballR = 50;
    float speedX = 2;
    float speedY = -1;

    void setup() {
        size(450, 300);
        noStroke();
        fill(#F2EEB3);
    }

    void draw() {
        background(#260126);             
        ellipse(centerX, centerY, ballR, ballR);
        
        if (centerX + ballR / 2 > width || centerX - ballR / 2 < 0) {
            speedX = - speedX;
        }
        if (centerY + ballR / 2 > height || centerY - ballR / 2 < 0) {
            speedY = -speedY;
        }

        centerX += speedX;
        centerY += speedY;
    }
</script>
<canvas id="processing-canvas"></canvas>