EffectHub.com: your best source for gaming

Recommendation

More Effects...

function Particle (x, y, radius) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.speed = .6;
  this.vx = 0;
  this.vy = 0;
  this.opacity = 1;
  this.color ='rgba(' + Math.round(Math.random () * 255) + ', ' + Math.round(Math.random () * 255) + ',' + Math.round(Math.random () * 255) + ', 1)';
  this.angle = Math.random() * 360;
}

Particle.prototype.draw = function(ctx) {
  ctx.save();
  ctx.globalAlpha = this.opacity;
  ctx.translate(this.x, this.y);
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(0, 0, this.radius, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}

var scene = new THREE.Scene(),
    W = window.innerWidth,
    H = window.innerHeight,
    camera = new THREE.PerspectiveCamera(45, W / H, 0.01, 30),
    renderer = new THREE.WebGLRenderer(),
    torusGeometry, torusMaterial, torus,
    particlesCanvas = document.createElement('canvas'),
    ctx = particlesCanvas.getContext('2d'),
    particles = [],
    rotationSpeed = 0.005,
    particle = new Particle(W / 2 - 190, H / 2 + 50, 5),
    dx, dy,
    targetX = W / 2 - 170, targetY = H / 2 + 60;

particlesCanvas.width = W;
particlesCanvas.height = H;

particle.speed = .008;
particle.vx = 3;
particle.vy = 3;

renderer.setClearColor(0x17293a);
renderer.setSize(W, H);

torusGeometry = new THREE.TorusGeometry(20, 3, 16, 100);
torusMaterial = new THREE.MeshBasicMaterial({wireframeLinewidth: 3, color: 0xCCCCCC, wireframe: true, transparent: true, opacity: .2});
torus = new THREE.Mesh(torusGeometry, torusMaterial);

torusGeometry2 = new THREE.TorusGeometry(20, 3, 16, 100);
torusMaterial2 = new THREE.MeshBasicMaterial({color: 0x17293a});
torus2 = new THREE.Mesh(torusGeometry2, torusMaterial2);
torus2.material.side = THREE.BackSide;

torus.rotation.x = torus2.rotation.x = -0.5 * Math.PI;
torus.position.set(0, 0, 0);
torus.material.side = THREE.BackSide;

scene.add(torus);
scene.add(torus2);

camera.rotation.y = -0.5 * Math.PI;
camera.position.set(0, .3, 20.5);

particlesCanvas.style.position = 'absolute';
particlesCanvas.style.top = '0px';
particlesCanvas.style.left = '0px';
document.body.appendChild(particlesCanvas);
document.body.appendChild(renderer.domElement);

(function drawFrame(t){
  requestAnimationFrame(drawFrame, particlesCanvas);
  torus.rotation.z -= rotationSpeed;
  torus2.rotation.z -= rotationSpeed;
  ctx.globalCompositeOperation = "lighter";
  ctx.clearRect(0, 0, W, H);
  renderer.render(scene, camera);
  dx = targetX - particle.x;
  dy = targetY - particle.y;
  particle.vx += dx * particle.speed;
  particle.vy += dy * particle.speed;
  particle.x += particle.vx;
  particle.y += particle.vy;
  animateParticles();
  particles.push(new Particle(particle.x, particle.y, 3 + Math.random() * 3));
}());

CSS

HTML

Recommendation

Join Effecthub.com