New intro animation on electromage.com

1

Anyone else notice it? VERY nice. How did you do it and how did you do the old one? You can’t just tease us like that… well technically you can and are :slight_smile: You know how we need to know how everything works :slight_smile:

2 Likes
2

Thanks! It’s the same fractal as the old one, just tweaked slightly. This version is much less CPU intensive (1/16th as many pixels, and 1/3rd frame rate), and I softened it up a bit in addition to upscaling fewer pixels.

It’s based on a neat fractal I had found on dwitter.net, but unfortunately I can’t find again easily. Here’s the code that draws into an html canvas. It has been slightly de-obfuscated, but its still a bit awkward due to its character limiting roots on dwitter.

//setup
let canvas; // find the canvas element, depends on framework
canvas.width = window.innerWidth/4;
canvas.height = window.innerHeight/4;
let ctx = canvas.getContext('2d');
ctx.transform(canvas.width/2,0,0,canvas.height/2,canvas.width/2,canvas.height/2)

//per frame:
const t = new Date().getTime()/3000;
const t2 = new Date().getTime()/7500;
//fade a bit toward black
ctx.fillStyle="rgba(0,0,0,.03)"
ctx.fillRect(-1,-1,2,2)

//draw to itself slightly zoomed. Causes outward blur/trails
let dp = -1.005;
let dw = -dp*2
ctx.drawImage(canvas,dp,dp,dw,dw)

//fractal:
function v(a, b, g, r) {
  if (r > .01) {
    let hsl = "hsl(" + Math.round(g * 20 + r * 10) + ", 100%, 50%)";
    x.fillStyle = hsl;
    a += r * S(g)
    b -= r * C(g)
    x.fillRect(a, b, .002, .002)
    r *= .7
    v(a, b, g - 1 + Math.cos(t), r)
    v(a, b, g + .5 + Math.sin(t2), r)
  }
}

v(0, .5, 0, .3)
4 Likes