Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
(function() { 'use strict'; Math.DEG = 180 / Math.PI; Math.RAD = Math.PI / 180; Math.RND = (function(x) { return function() { x ^= x << 13; x ^= x >>> 17; x ^= x << 5; return 1 - (x >>> 0) / 0xffffffff; }; })(Date.now()); this.addEventListener('load', function() { var canvas, context, grid, i, j, k, l, m, o, p, points, q, ref, ref1, ref2, ref3, render, simplex, x, y, z; simplex = new SimplexNoise(Math.RND); canvas = document.createElement('canvas'); context = canvas.getContext('2d'); document.body.appendChild(canvas); points = []; grid = 31; for (i = l = 0; l < 3; i = ++l) { j = (i + 1) % 3; k = (i + 2) % 3; for (z = m = -1; m <= 1; z = m += 2) { for (x = o = ref = -grid, ref1 = grid; o <= ref1; x = o += 1) { for (y = q = ref2 = -grid, ref3 = grid; q <= ref3; y = q += 1) { p = vec4.create(); p[i] = x / grid; p[j] = y / grid; p[k] = z; p[3] = 1; p.n = vec3.create(); p.n[k] = z; p.r = Math.RND(); points.push(p); } } } } return (render = function() { var H, W, _, camera, len, light, model, n, pr, r, sn, time, v, viewProj, w; requestAnimationFrame(render); W = canvas.clientWidth; H = canvas.clientHeight; if (canvas.width !== W) { canvas.width = W; } if (canvas.height !== H) { canvas.height = H; } time = 1e-3 * Date.now(); camera = vec3.fromValues(0, 0, 5); light = vec3.clone(camera); vec3.normalize(light, light); model = [mat4.rotateX(mat4.create(), mat4.create(), time / 5), mat4.rotateY(mat4.create(), mat4.create(), time / 6), mat4.rotateZ(mat4.create(), mat4.create(), time / 7)].reduce(function(a, b) { return mat4.mul(a, b, a); }); viewProj = [mat4.lookAt(mat4.create(), camera, [0, 0, 0], [0, 1, 0]), mat4.perspective(mat4.create(), Math.RAD * 45, W / H, 1e-3, 1e3)].reduce(function(a, b) { return mat4.mul(a, b, a); }); v = vec4.create(); n = vec4.create(); _ = vec4.create(); for (r = 0, len = points.length; r < len; r++) { p = points[r]; vec4.transformMat4(v, p, model); vec3.transformMat4(n, p.n, model); x = v[0], y = v[1], z = v[2]; if (0 > vec3.dot(n, vec3.sub(_, v, camera))) { sn = simplex.noise4D(x * 0.75, y * 0.75, z * 0.75, time / 10); pr = 0.5 + 0.5 * Math.sin(Math.PI * (2 * p.r + time)); vec3.normalize(_, v); vec3.scaleAndAdd(v, v, _, 0.2 * sn + 0.1 * sn * pr); vec4.transformMat4(v, v, viewProj); vec3.scale(v, v, 1 / v[3]); x = v[0], y = v[1], z = v[2], w = v[3]; if ((-1 <= z && z <= 1) && (-1 <= y && y <= 1) && (-1 <= x && x <= 1)) { x = (x + 1) * 0.5 * W; y = (1 - y) * 0.5 * H; w = H / w * 0.02 * (0.25 + 0.75 * sn) * (0.25 + 0.75 * pr) * (vec3.dot(n, light)); if (w > 0.1) { context.rect(x - w, y - w, 2 * w, 2 * w); } } } } context.clearRect(0, 0, W, H); context.fillStyle = '#FFF'; context.fill(); return context.beginPath(); })(); }); }).call(this);
CSS
html { background: #000; } canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email