Cosmos

       
(CSS)

#stage{
  background-color:#000;
}

(JAVA)

window.onclick = init;
var c = document.getElementById("stage");
var ctx = c.getContext("2d");

var centerX = c.width / 2;
var centerY = c.height / 2;
var radius = 5;
init();

// shim layer with setTimeout fallback
window.requestAnimFrame = function () {
  return window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  function (callback) {
    window.setTimeout(callback, 1000 / 30);
  };
}();

function init() {
  //ctx.restore();

  ctx.clearRect(0, 0, c.width, c.height);
  particles = [];
  numParticles = 128;
  for (var i = 0; i < numParticles; i++) {
    particle();
  }
}
function particle() {

  var angle = Math.random() * Math.PI * 2;
  particles.push({
    position: { "x": 0,
      "y": 0,
      "z": 0 },
    velocity: { "x": Math.cos(angle) * 16 * Math.random(),
      "y": Math.sin(angle) * 16 * Math.random(),
      "z": Math.sin(Math.random() * Math.PI * 2) * 16 * Math.random() },
    tail: [],
    radius: 4,
    alpha: 1.0 });
}

function draw() {
  if (ctx !== undefined) {
    ctx.save();
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.translate(c.width / 2, c.height / 2);
    for (var i = 0; i < numParticles; i++) {
      ctx.beginPath();

      if (particles[i].radius > 0.1) {
        ctx.arc(particles[i].position.x, particles[i].position.y, particles[i].radius, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'rgba(255,255,255,' + particles[i].alpha + ')';
        ctx.fill();
      }

      ctx.beginPath();
      // ctx.moveTo(0,0);

      ctx.moveTo(particles[i].position.x, particles[i].position.y);
      //ctx.lineTo(0,0);
      // console.log(particles[i].position);
      for (var j = 0; j < particles[i].tail.length; j++) {
        //ctx.arc(particles[i].tail[j].x,particles[i].tail[j].y, 
        // 3, 0, 2 * Math.PI, false);
        // ctx.fillStyle = 'rgba(255,255,255,'+particles[i].alpha+')';
        // ctx.fill();
        ctx.lineTo(particles[i].position.x + particles[i].tail[j].x, particles[i].tail[j].y + particles[i].position.y);
      }
      ctx.lineWidth = 2;
      ctx.strokeStyle = 'rgba(255,255,255,0.1)';
      ctx.stroke();
    }
    ctx.restore();
  }
}

function update() {
  rotateY(Math.PI / 180);

  for (var i = 0; i < numParticles; i++) {
    if (particles[i].tail.length < 128) {
      particles[i].tail.push({
        x: -particles[i].position.x,
        y: -particles[i].position.y });

      //  console.log(particles[i].position)
    }
    particles[i].velocity.y -= particles[i].position.y / 1000;
    particles[i].velocity.x -= particles[i].position.x / 400;
  }

  for (var j = 0; j < numParticles; j++) {
    particles[j].velocity.x *= 0.99;
    particles[j].velocity.y *= 0.99;
    particles[j].velocity.z *= 0.99;
    particles[j].position.x += particles[j].velocity.x;
    particles[j].position.y += particles[j].velocity.y;
    particles[j].position.z += particles[j].velocity.z;
    particles[j].radius = (particles[j].position.z + 500) / 512 + 1;
    particles[j].alpha = (particles[j].position.z + 512) / 256 + 0.3;
  }
}
(function animloop() {
  requestAnimFrame(animloop);
  render();
})();

function render() {
  update();
  draw();
}
function rotateY(angle) {
  for (var i = 0; i < numParticles; i++) {
    var tempX = particles[i].position.x;
    var tempZ = particles[i].position.z;
    particles[i].position.x = Math.cos(angle) * tempX - Math.sin(angle) * tempZ;
    particles[i].position.z = Math.sin(angle) * tempX + Math.cos(angle) * tempZ;
  }
}