/** * Stars * Inspired by Steve Courtney's poster art for Celsius GS's Drifter - http://celsiusgs.com/drifter/posters.php * by Cory Hughart - http://coryhughart.com */ // Settings var particleCount = 40, flareCount = 10, motion = 0.05, tilt = 0.05, color = "#FFEED4", particleSizeBase = 1, particleSizeMultiplier = 0.5, flareSizeBase = 100, flareSizeMultiplier = 100, lineWidth = 1, linkChance = 75, // chance per frame of link, higher = smaller chance linkLengthMin = 5, // min linked vertices linkLengthMax = 7, // max linked vertices linkOpacity = 0.25; // number between 0 & 1 (linkFade = 90), // link fade-out frames (linkSpeed = 1), // distance a link travels in 1 frame (glareAngle = -60), (glareOpacityMultiplier = 0.05), (renderParticles = true), (renderParticleGlare = true), (renderFlares = true), (renderLinks = true), (renderMesh = false), (flicker = true), (flickerSmoothing = 15), // higher = smoother flicker (blurSize = 0), (orbitTilt = true), (randomMotion = true), (noiseLength = 1000), (noiseStrength = 1); var canvas = document.getElementById("stars"), //orbits = document.getElementById('orbits'), context = canvas.getContext("2d"), mouse = { x: 0, y: 0 }, m = {}, r = 0, c = 1000, // multiplier for delaunay points, since floats too small can mess up the algorithm n = 0, nAngle = (Math.PI * 2) / noiseLength, nRad = 100, nScale = 0.5, nPos = { x: 0, y: 0 }, points = [], vertices = [], triangles = [], links = [], particles = [], flares = []; function init() { var i, j, k; // requestAnimFrame polyfill window.requestAnimFrame = (function () { return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); } ); })(); // Fade in background /* var background = document.getElementById('background'), bgImg = new Image(), bgURL = '/img/background.jpg'; bgImg.onload = function() { //console.log('background loaded'); background.style.backgroundImage = 'url("'+bgURL+'")'; background.className += ' loaded'; } bgImg.src = bgURL; */ // Size canvas resize(); mouse.x = canvas.clientWidth / 2; mouse.y = canvas.clientHeight / 2; // Create particle positions for (i = 0; i < particleCount; i++) { var p = new Particle(); particles.push(p); points.push([p.x * c, p.y * c]); } //console.log(JSON.stringify(points)); // Delaunay triangulation //var Delaunay = require('delaunay-fast'); vertices = Delaunay.triangulate(points); //console.log(JSON.stringify(vertices)); // Create an array of "triangles" (groups of 3 indices) var tri = []; for (i = 0; i < vertices.length; i++) { if (tri.length == 3) { triangles.push(tri); tri = []; } tri.push(vertices[i]); } //console.log(JSON.stringify(triangles)); // Tell all the particles who their neighbors are for (i = 0; i < particles.length; i++) { // Loop through all tirangles for (j = 0; j < triangles.length; j++) { // Check if this particle's index is in this triangle k = triangles[j].indexOf(i); // If it is, add its neighbors to the particles contacts list if (k !== -1) { triangles[j].forEach(function (value, index, array) { if ( value !== i && particles[i].neighbors.indexOf(value) == -1 ) { particles[i].neighbors.push(value); } }); } } } //console.log(JSON.stringify(particles)); if (renderFlares) { // Create flare positions for (i = 0; i < flareCount; i++) { flares.push(new Flare()); } } // Motion mode //if (Modernizr && Modernizr.deviceorientation) { if ( "ontouchstart" in document.documentElement && window.DeviceOrientationEvent ) { console.log("Using device orientation"); window.addEventListener( "deviceorientation", function (e) { mouse.x = canvas.clientWidth / 2 - (e.gamma / 90) * (canvas.clientWidth / 2) * 2; mouse.y = canvas.clientHeight / 2 - (e.beta / 90) * (canvas.clientHeight / 2) * 2; //console.log('Center: x:'+(canvas.clientWidth/2)+' y:'+(canvas.clientHeight/2)); //console.log('Orientation: x:'+mouse.x+' ('+e.gamma+') y:'+mouse.y+' ('+e.beta+')'); }, true ); } else { // Mouse move listener // console.log("Using mouse movement"); document.body.addEventListener("mousemove", function (e) { //console.log('moved'); mouse.x = e.clientX; mouse.y = e.clientY; }); } // Random motion if (randomMotion) { //var SimplexNoise = require('simplex-noise'); //var simplex = new SimplexNoise(); } // Animation loop (function animloop() { requestAnimFrame(animloop); resize(); render(); })(); } function render() { if (randomMotion) { n++; if (n >= noiseLength) { n = 0; } nPos = noisePoint(n); //console.log('NOISE x:'+nPos.x+' y:'+nPos.y); } // Clear context.clearRect(0, 0, canvas.width, canvas.height); if (blurSize > 0) { context.shadowBlur = blurSize; context.shadowColor = color; } if (renderParticles) { // Render particles for (var i = 0; i < particleCount; i++) { particles[i].render(); } } if (renderMesh) { // Render all lines context.beginPath(); for (var v