(function(){ window.onload = function(){ function Target(_rad) { this.x = 0; this.y = 0; this.rotate = 0; this.radius = _rad; this.rotate_speed = Math.random(1)*0.1 + 0.001; this.friction = Math.random(1)*0.8 + 0.1; this.speed = Math.random(1)*0.2 + 0.03; this.step = Math.random(1)*0.5 + 0.0001; this.freq = Math.random(1)*0.09 + 0.01; this.bold_rate = Math.random(1)*0.3 + 0.1; } function VPoint(x, y){ this.x = x; this.y = y; this.vx = 0; this.vy = 0; this.target = null; } var canvas = document.getElementById('cvs'); if ( ! canvas || ! canvas.getContext ) { //notsupport canvas return false; } var w = 100; var h = 100; var _targets; var _pts = []; var _pre_sec = 0; var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgba(255, 0, 0, 255)"; ctx.fillRect(0, 0, w, h); for ( var i=0; i<5333; i++ ) { var pt = new VPoint(0,0); _pts.push(pt); } resizeCanvas(); window.addEventListener('resize', resizeCanvas, false); setInterval(update, 15.6); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; w = canvas.width; h = canvas.height; refreshTarget(); } function refreshTarget(){ _targets = []; var sw = w; var sh = h; var num_w = parseInt(Math.random(1)*8 + 1); var size = sw / num_w; var num_h = parseInt( Math.max(1, sh / size) ); var i; var offset_x = (sw - size * (num_w - 1)) / 2; var offset_y = (sh - size * (num_h - 1)) / 2; for ( i = 0; i<num_w; i++ ) { for ( var j = 0; j<num_h; j++ ) { var t = new Target(size*0.4); t.x = (size * i) + offset_x; t.y = (size * j) + offset_y; _targets.push(t); } } var l = _pts.length; for ( i = 0; i<l; i++ ) { _pts[i].target = _targets[ i%_targets.length ]; } } function update(){ var now_sec = new Date().getTime() / 4000 >> 0; if ( now_sec - _pre_sec >= 1 ) { refreshTarget(); _pre_sec = now_sec; } var i = 0; var l = _targets.length; var t; var pt; for ( i = 0; i<l; i++ ) { t = _targets[i]; t.rotate += t.rotate_speed; } l = _pts.length; ctx.fillStyle = "rgba(55, 55, 55, 255)"; ctx.fillRect(0, 0, w, h); var sub = 255/h; for ( i = 0; i<l; i++ ) { pt = _pts[i]; t = pt.target; var t_radius = Math.cos(t.rotate*2.321 + t.freq*i) * t.radius * t.bold_rate + t.radius; var tx = t.x + Math.cos(t.rotate + t.step*i) * t_radius; var ty = t.y + Math.sin(t.rotate + t.step*i) * t_radius; pt.vx += ( tx - pt.x ) * t.speed; pt.vy += ( ty - pt.y ) * t.speed; pt.x += pt.vx; pt.y += pt.vy; pt.vx *= t.friction; pt.vy *= t.friction; if ( pt.x >= 0 && pt.x <= w && pt.y >= 0 && pt.y <= h ) { ctx.fillStyle = "rgb(200, 200, 200)"; ctx.fillRect(pt.x, pt.y, 1.5, 1.5); } } } }; })();