TrevorPage · June 6, 2025 09:58 · TrevorPage · Jun 6, 2025
diff --git a/bubble_universe_1.html b/bubble_universe_1.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Bubble Universe - Glow Upgrade</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: black;
    }
    canvas {
      display: block;
    }
  </style>
 </head>
 <body>
 <canvas id="bubbleUniverse"></canvas>

 <script>
 (function() {
  const canvas = document.getElementById('bubbleUniverse');
  const ctx = canvas.getContext('2d');

  let t = 0.0;
  const n = 255;
  let s = 1;
  let dimen = 1;
  let px_size = 2;  // increased for 'bigger' dots

  const PI = Math.PI;
  const dt = PI / 400;
  const r = PI * 2 / 235;

  let zoom = 1;
  let zoomDirection = 1;

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    dimen = Math.min(window.innerWidth, window.innerHeight);
    s = 2 * dimen / 9;
  }

  function draw() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';  // semi-transparent background for trails
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.save();
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.scale(zoom, zoom);

    ctx.globalCompositeOperation = 'lighter'; // additive blending for glow

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

        const hue = (i + j + t * 50) % 360; // shifting hue over time
        ctx.fillStyle = `hsla(${hue}, 100%, 50%, 0.5)`; // semi-transparent
        ctx.fillRect(s * u, s * v, px_size, px_size);
      }
    }

    ctx.restore();

    // Update zoom (oscillates between 0.9 and 1.1 scale)
    zoom += zoomDirection * 0.001;
    if (zoom > 1.1 || zoom < 0.9) zoomDirection *= -1;

    t += dt;
    requestAnimationFrame(draw);
  }

  window.addEventListener('resize', resizeCanvas);

  resizeCanvas();
  requestAnimationFrame(draw);
 })();
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Bubble Universe - Glow Upgrade</title>
	<style>
	body {
	margin: 0;
	overflow: hidden;
	background: black;
	}
	canvas {
	display: block;
	}
	</style>
	</head>
	<body>
	<canvas id="bubbleUniverse"></canvas>

	<script>
	(function() {
	const canvas = document.getElementById('bubbleUniverse');
	const ctx = canvas.getContext('2d');

	let t = 0.0;
	const n = 255;
	let s = 1;
	let dimen = 1;
	let px_size = 2; // increased for 'bigger' dots

	const PI = Math.PI;
	const dt = PI / 400;
	const r = PI * 2 / 235;

	let zoom = 1;
	let zoomDirection = 1;

	function resizeCanvas() {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	dimen = Math.min(window.innerWidth, window.innerHeight);
	s = 2 * dimen / 9;
	}

	function draw() {
	ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; // semi-transparent background for trails
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	ctx.save();
	ctx.translate(canvas.width / 2, canvas.height / 2);
	ctx.scale(zoom, zoom);

	ctx.globalCompositeOperation = 'lighter'; // additive blending for glow

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

	const hue = (i + j + t * 50) % 360; // shifting hue over time
	ctx.fillStyle = `hsla(${hue}, 100%, 50%, 0.5)`; // semi-transparent
	ctx.fillRect(s * u, s * v, px_size, px_size);
	}
	}

	ctx.restore();

	// Update zoom (oscillates between 0.9 and 1.1 scale)
	zoom += zoomDirection * 0.001;
	if (zoom > 1.1 \|\| zoom < 0.9) zoomDirection *= -1;

	t += dt;
	requestAnimationFrame(draw);
	}

	window.addEventListener('resize', resizeCanvas);

	resizeCanvas();
	requestAnimationFrame(draw);
	})();
	</script>
	</body>
	</html>