another fun project

I just saw this on LibertyBasic.
Decided to do it in RunBasic using JS <canvas>.
This lets the graphic run in the clients browser instead of running on your computer server.
It worked so well that I will convert as much of the graphics on LB to RB when I get time.

Would be easy to request the width and height in RB and generate the JS with the requested size.

Have fun...

html "

<canvas id='bubbles' width='600' height='600' style='border:1px solid black'></canvas>

<script>

const canvas = document.getElementById('bubbles');

const ctx = canvas.getContext('2d');

const pi = Math.PI;

const r = 2 * pi / 235;

const t = 4 * Math.random() * 0.666;

let frame = 0;



function drawFrame() {

ctx.fillStyle = 'black';

ctx.fillRect(0, 0, canvas.width, canvas.height);



let x = 0, u = 0, v = 0;



for (let i = 0; i < 250; i++) {

for (let j = 0; j < 250; j++) {

u = Math.sin(i + v + frame * 0.03) + Math.sin(r * i + x);

v = Math.cos(i + v + frame * 0.03) + Math.cos(r * i + x);

x = u + t;

let px = Math.floor(300 + 108 * u);

let py = Math.floor(300 + 108 * v);



if (px >= 0 && px < 600 && py >= 0 && py < 600) {

let red = (i * 3 + frame * 2) % 256;

let green = (j * 3 + frame * 2) % 256;

let blue = (255 - Math.floor((i + j) / 2)) % 256;

ctx.fillStyle = 'rgb(' + red + ',' + green + ',' + blue + ')';

ctx.fillRect(px, py, 1, 1);

}

}

}

frame++;

requestAnimationFrame(drawFrame);

}



drawFrame(); // start animation

</script>"