cinematic intro made of particles
my name made of particles, connected by lines. with cinematic 3d effects
by Sub Lines
HTML
<canvas id="intro"></canvas>
CSS
html {min-width: 100%; min-height: 100%;}
body {min-width: 100%; min-height: 100%; margin:0;background:black;}
#canvas {width: 99%; height: 99%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0 auto;}
JavaScript
<!-- original work and all credit for this intro goes to ara cdpn.io/ara_node/ -->
<!-- ara did the thinking, i only changed his code to fit my needs -->
var init = {
canvas: {},
ctx: {},
size: {},
nodeStrokeFlag: !1,
canvasSetup: function() {
init.canvas = document.getElementById("intro"), init.size.x = window.innerWidth, init.size.y = window.innerWidth, init.canvas.width = init.size.x, init.canvas.height = init.size.y, init.ctx = init.canvas.getContext("2d")
}
}
init.canvasSetup()
var dtr = function(t) {
return t * Math.PI / 180
},
ceiling = function(t) {
return parseInt(1e4 * t) / 1e4
},
polarToRectangle = function(t, a, e) {
var o = Math.sinE0(dtr(t)) * Math.cosE0(dtr(a)) * e,
r = Math.sinE0(dtr(t)) * Math.sinE0(dtr(a)) * e,
l = Math.cosE0(dtr(t)) * e
return {
x: r,
y: l,
z: o
}
},
rectangleToPolar = function(t, a, e) {
if (0 == t) var o = .001
else var o = t
if (0 == a) var r = .001
else var r = a
if (0 == e) var l = .001
else var l = e
var n = Math.sqrt(o * o + r * r + l * l),
i = Math.atan(l / Math.sqrt(o * o + r * r)),
s = Math.atan(r / o)
return {
x: i * (180 / Math.PI),
y: s * (180 / Math.PI),
r: n
}
}
Math.sinE0 = function(t) {
return Math.sin(0 === t ? 1e-6 : t)
}, Math.cosE0 = function(t) {
return Math.cos(0 === t ? 1e-6 : t)
}, Math.getVector = function(t, a) {
return {
x: a.affineOut.x - t.affineOut.x,
y: a.affineOut.y - t.affineOut.y,
z: a.affineOut.z - t.affineOut.z
}
}, Math.getCross = function(t, a) {
return {
x: t.y * a.z - t.z * a.y,
y: t.z * a.x - t.x * a.z,
z: t.x * a.y - t.y * a.x
}
}, Math.getNormal = function(t) {
var a = Math.sqrt(t.x * t.x + t.y * t.y + t.z * t.z)
return...