function animate() updatePosition(); drawBall(); requestAnimationFrame(animate);
function drawBall() ctx.clearRect(0, 0, width, height); // Gradient ball const gradient = ctx.createRadialGradient(x - 10, y - 10, 5, x, y, radius); gradient.addColorStop(0, '#ff6b6b'); gradient.addColorStop(1, '#c0392b'); ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fillStyle = gradient; ctx.fill(); ctx.shadowBlur = 15; ctx.shadowColor = "white";
function draw() background(0); translate(width/2, height/2); screensaver examples
window.addEventListener('resize', resizeCanvas); resizeCanvas(); animate(); </script> </body> </html> Description: A 3D starfield where stars move outward from the center, creating a "warp speed" effect.
ellipse(sx, sy, r, r);
let sx = map(star.x / star.z, 0, 1, 0, width); let sy = map(star.y / star.z, 0, 1, 0, height); let r = map(star.z, 0, width, 4, 0);
let stars = []; function setup() createCanvas(windowWidth, windowHeight); for (let i = 0; i < 800; i++) stars.push( x: random(-width, width), y: random(-height, height), z: random(width) ); function animate() updatePosition()
Here are a few classic , ranging from simple code to conceptual descriptions. I've included a working HTML/JavaScript example you can run immediately. 1. Simple Bouncing Ball (JavaScript/HTML Canvas) This is a modern, lightweight screensaver you can embed in a browser.