Little demo slight out of suject

Post by **cicciocb** » Tue Jan 16, 2024 1:12 pm

Not really related to Annex but, following an advice given by Electroguard, I'm putting here the link and the source code of a little program I did in basic for the esp32-S3 VGA and the same done using javascript running inside the web browser.

This is the code for Annex with VGA output

Code: [Local Link Removed for Guests]

vga.pinout 4,5,6, 7,15,16, 17, 18, 8,3
vga.delete
vga.init 2, 2

vga.fill 0
RX=640:RY=480:CX=RX\2:CY=RY\2
r=(2*Pi)/25:x=0:v=0:t=0:SC=RY\4

Dim CV(15)
For i=0 To 15
 Read CV(i)
Next i
Data &H0000, &H001F, &H0200, &H03E0
Data &H0400, &H07E0, &H07E0, &H7FFF
Data &HF800, &HFF1F, &HFC00, &HFF9F
Data &HFE00, &HFFDF, &HFFC0, &HFFFF

b = 0
Do 
 vga.writepage b
 vga.fill 0 
 c=1
 For i=50 To 80 Step 2
   For j=50 To 100 Step 1
     u=Sin(i+v)+Sin(r*i+x)
     v=Cos(i+v)+Cos(r*i+x)
     x=u+t
     vga.Pixel CX+u*SC,CY+v*SC,CV(c)
   Next j
   Incr c: If c>15 Then c=1
 Next i
  Incr t,0.0025
  vga.showpage b
  b = 1-b
Loop

And this is the javascript version available here : [Local Link Removed for Guests]

Code: [Local Link Removed for Guests]


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bubble Universe Javascript</title>
</head>
<body>

<canvas id="myCanvas" width="512" height="512"></canvas>

<script>

const TAU = 6.283185307179586;
const n = 200;
const r = TAU / 235;
let dt = 0.001;

let x = 0;
let y = 0;
let v = 0;
let t = 0;

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

var xmax;
var ymax;
var hw;
var hh;

function draw() {

    ctx.fillStyle = "rgb(0, 0, 0)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    for (let i = 0; i <= n; i++) {
        for (let j = 0; j <= n; j++) {
            const u = Math.sin(i + v) + Math.sin(r * i + x);
            v = Math.cos(i + v) + Math.cos(r * i + x);
            x = u + t;

            ctx.fillStyle = `rgb(${i},${j},99)`;
            ctx.fillRect(hw + u * hw * 0.4, hh + v * hh * 0.4, 1, 1);
        }
    }
}

function animate() {
    draw();
	t += dt;
    //setTimeout(animate, 0.1);
	requestAnimationFrame(animate);
}

resizeCanvas();
animate();

window.addEventListener("resize", resizeCanvas);

function resizeCanvas() {
	canvas.width = Math.min(window.innerWidth, window.innerHeight) - 20;
	canvas.height = canvas.width;
    xmax = canvas.width;
    ymax = canvas.height;

    hw = xmax / 2; 
    hh = ymax / 2; 
}	
</script>

</body>
</html>