3D Background – Animated Particles, Matrix Rain & Galaxy

79 0 Animations codex Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

3D Background – Animated Particles, Matrix Rain & Galaxy

// 3D animated background: particles network, matrix rain, 3D galaxy and 3D waves (pure canvas, no libraries)
var cv = document.getElementById('bg'), ctx = cv.getContext('2d'), W, H, mode = 'particles', t = 0, mouse = { x: -999, y: -999 };
function resize() { var d = Math.min(2, window.devicePixelRatio || 1); W = innerWidth; H = innerHeight; cv.width = W * d; cv.height = H * d; ctx.setTransform(d, 0, 0, d, 0, 0); setup(); }
addEventListener('mousemove', function (e) { mouse.x = e.clientX; mouse.y = e.clientY; });
addEventListener('touchmove', function (e) { mouse.x = e.touches[0].clientX; mouse.y = e.touches[0].clientY; });
var P = [], drops = [], stars = [];
function setup() {
  P = []; var n = Math.min(140, (W * H) / 9000);
  for (var i = 0; i < n; i++) P.push({ x: Math.random() * W, y: Math.random() * H, vx: (Math.random() - .5) * .7, vy: (Math.random() - .5) * .7 });
  drops = []; for (var j = 0; j < W / 16; j++) drops.push(Math.random() * -H / 16);
  stars = []; for (var k = 0; k < 2500; k++) { var arm = k % 3, r = Math.pow(Math.random(), .6) * 1, a = arm * 2.094 + r * 5 + (Math.random() - .5) * .5; stars.push({ x: Math.cos(a) * r, z: Math.sin(a) * r, y: (Math.random() - .5) * .08 * (1.2 - r), c: r }); }
}
function particles() {
  ctx.fillStyle = 'rgba(5,8,25,.35)'; ctx.fillRect(0, 0, W, H);
  P.forEach(function (p) {
    p.x += p.vx; p.y += p.vy; if (p.x < 0 || p.x > W) p.vx *= -1; if (p.y < 0 || p.y > H) p.vy *= -1;
    var dx = p.x - mouse.x, dy = p.y - mouse.y, d = Math.hypot(dx, dy);
    if (d < 120) { p.x += dx / d * 2; p.y += dy / d * 2; }
    ctx.fillStyle = '#7dd3fc'; ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, 7); ctx.fill();
  });
  for (var i = 0; i < P.length; i++) for (var j = i + 1; j < P.length; j++) {
    var a = P[i], b = P[j], d2 = Math.hypot(a.x - b.x, a.y - b.y);
    if (d2 < 130) { ctx.strokeStyle = 'rgba(125,211,252,' + (1 - d2 / 130) * .5 + ')'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke(); }
  }
}
var CH = 'アイウエオカキクケコサシスセソタチツテトナニヌネノ0123456789ABCDEF<>/{}';
function matrix() {
  ctx.fillStyle = 'rgba(0,0,0,.08)'; ctx.fillRect(0, 0, W, H);
  ctx.font = '16px monospace';
  drops.forEach(function (y, i) {
    var ch = CH[Math.random() * CH.length | 0], x = i * 16;
    ctx.fillStyle = '#d1ffd6'; ctx.fillText(ch, x, y * 16);
    ctx.fillStyle = '#00ff41'; ctx.fillText(CH[Math.random() * CH.length | 0], x, (y - 1) * 16);
    if (y * 16 > H && Math.random() > .975) drops[i] = 0; else drops[i] = y + (Math.abs(x - mouse.x) < 40 ? 1.6 : 1);
  });
}
function galaxy() {
  ctx.fillStyle = 'rgba(0,0,8,.5)'; ctx.fillRect(0, 0, W, H);
  var rot = t * .002 + (mouse.x / W - .5), tilt = .9 + (mouse.y > 0 ? (mouse.y / H - .5) * .8 : 0), S = Math.min(W, H) * .55;
  var cr = Math.cos(rot), sr = Math.sin(rot), ct = Math.cos(tilt), st = Math.sin(tilt);
  stars.forEach(function (s) {
    var x = s.x * cr - s.z * sr, z = s.x * sr + s.z * cr, y = s.y * ct - z * st; z = s.y * st + z * ct;
    var f = 2.5 / (2.5 + z), px = W / 2 + x * S * f, py = H / 2 + y * S * f;
    ctx.fillStyle = 'hsl(' + (200 + s.c * 120) + ',90%,' + (85 - s.c * 30) + '%)';
    ctx.fillRect(px, py, 1.6 * f, 1.6 * f);
  });
  var g = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, S * .25); g.addColorStop(0, 'rgba(255,220,180,.35)'); g.addColorStop(1, 'transparent');
  ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
}
function waves() {
  var g = ctx.createLinearGradient(0, 0, 0, H); g.addColorStop(0, '#0b0326'); g.addColorStop(1, '#3a0a5e'); ctx.fillStyle = g; ctx.fillRect(0, 0, W, H);
  var cols = 60, rows = 34, mx = mouse.x > 0 ? mouse.x / W : .5;
  for (var r = 0; r < rows; r++) {
    var z = rows - r, f = 300 / (z * 22 + 60);
    ctx.strokeStyle = 'hsla(' + (290 - r * 3) + ',100%,65%,' + (r / rows) + ')'; ctx.lineWidth = 1 + f;
    ctx.beginPath();
    for (var c = 0; c <= cols; c++) {
      var x = (c / cols - .5) * 3, h = Math.sin(x * 3 + t * .03 + z * .3) * .25 + Math.cos(x * 2 - t * .02 + z * .5) * .2 + Math.exp(-Math.pow((c / cols - mx) * 6, 2)) * .4;
      var px = W / 2 + x * W * .5 * f, py = H * .45 + (1.2 - h) * H * .3 * f - f * 40;
      c ? ctx.lineTo(px, py) : ctx.moveTo(px, py);
    }
    ctx.stroke();
  }
}
var MODES = { particles: particles, matrix: matrix, galaxy: galaxy, waves: waves };
document.getElementById('modes').onclick = function (e) {
  var b = e.target.closest('button'); if (!b) return; mode = b.dataset.m;
  this.querySelectorAll('button').forEach(function (x) { x.classList.toggle('on', x === b); });
  ctx.fillStyle = '#000'; ctx.fillRect(0, 0, W, H);
};
addEventListener('resize', resize); resize();
(function loop() { t++; MODES[mode](); requestAnimationFrame(loop); })();

Comments 0

…

3D Background – Animated Particles, Matrix Rain & Galaxy

Recommended

Comments 0