var W, H, R, W2, H2, ctx, n, s = 4; var dots, plane; function transposed(arr) { var res = []; for(var i = 0; i < arr[0].length; i++) res.push([]); for(var i = 0; i < arr.length; i++) for(var j = 0; j < arr[i].length; j++) res[j][i] = arr[i][j]; return res; } function Point(x, y, z, f) { this.x = x; this.y = y; this.z = z; this.f = f || function(x, y, z, t) { return {x:x, y:y, z:z}; } this.transform = function(time) { const dot = this.f(x, y, z, time); this.x = dot.x; this.y = dot.y; this.z = dot.z; this.computeProjection(); } this.computeProjection = function() { this.px = this.x; this.py = this.y/3 + this.z; } this.computeProjection(); } function Line(points) { this.points = points; this.draw = function() { const p = this.points, len = p.length; ctx.beginPath(); for(var i = 0; i < len; i++) ctx.lineTo(W2 + p[i].px, H2 - p[i].py); ctx.stroke(); } } function Plane(points2a) { const points2b = transposed(points2a); this.linesW = []; this.linesH = []; for(var i = 0; i < points2a.length; i++) { this.linesW.push(new Line(points2a[i])); this.linesH.push(new Line(points2b[i])); } this.draw = function() { for(var i = 0; i < this.linesW.length; i++) this.linesW[i].draw(); for(var i = 0; i < this.linesH.length; i++) this.linesH[i].draw(); } } function f(i, j, k, time) { const d = Math.sqrt(i*i + j*j + k*k); const t = time/5e3; const s = Math.sin(t), c = Math.cos(t); const x = i*c - j*s; const y = i*s + j*c; const z = 3000* x/d * y/d * k/d; const rx = x*c - y*s; const ry = x*s + y*c; const rz = z; return {x:rx, y:ry, z:rz}; } window.onload = function() { var canvas = document.querySelector('canvas'); W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgba(0,0,0,0.2)'; R = Math.min(W, H)/2; W2 = W/2; H2 = H/2; n = Math.floor(2*R/s); dots = []; for(var i = 0; i <= n; i++) { dots.push([]); for(var j = 0; j <= n; j++) dots[i].push(new Point((i-n/2)*s, (j-n/2)*s, 1, f)); } plane = new Plane(dots); animate(); } function animate() { window.requestAnimationFrame(animate); ctx.fillRect(0, 0, W, H); const now = Date.now(), sn = s*n, r = Math.floor(255*(Math.sin(now/4e3)/4+0.75)); g = Math.floor(255*(Math.cos(now/5e3)/4+0.75)); b = Math.floor(255*(Math.sin(now/6e3)/4+0.75)); ctx.strokeStyle = `rgba(${r},${g},${b},0.05)`; const time = Date.now(); for(var i = 0; i < dots.length; i++) for(var j = 0; j < dots[i].length; j++) dots[i][j].transform(time); plane.draw(); }

fountain