Halo

Halo.markdown

Halo

[ MouseMove / TouchSwipe ]
Scientists have recently discovered that the Milky Way Galaxy began with Globular Star Clusters and Dwarf Galaxies which formed a few hundred million years after the big bang, settling into what is now the galaxy's halo, merging over billions of years to form the structure of our Milky Way. Stars in the inner halo were born during the assembly process. Over time, the Milky Way gobbled up older dwarf galaxies that formed less than 2 billion years after the big bang, with their ancient stars settling into the outskirts of the halo, creating the outer halo.

A Pen by Tiffany Rayside on CodePen.

License.

index.html

<canvas id="canv" ></canvas>

<!--
[ MouseMove / TouchSwipe ] 
*orb-by-orb color change from center to outer every 15-20 or so seconds. 
______________________________
Scientists have recently discovered that the Milky Way Galaxy began with Globular Star Clusters and Dwarf Galaxies which formed a few hundred million years after the big bang, settling into what is now the galaxy's halo, merging over billions of years to form the structure of our Milky Way.   Stars in the inner halo were born during the assembly process. Over time, the Milky Way gobbled up older dwarf galaxies that formed less than 2 billion years after the big bang, with their ancient stars settling into the outskirts of the halo, creating the outer halo.
!-->

script.js

var c = document.getElementById('canv');
var $ = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var orbit;
var pov = 200;
var oy = -15;
var ox = 3.98;
var prevX = false;
var prevY = false;
var dx = 0;
var dy = 0;
var op = 0;
var ax = [];
var ay = [];
var az = [];
var as = [];
var ao = [];

set();
function set() {
  depth();
  $.translate(w / 2, h / 2);
  draw();
}

function draw() {
  $.clearRect(-w, -h, w * 2, h * 2);
  oy -= 0.03;
  if (ox > 1) ox = 1;
  else if (ox < 0.5) ox = 0.5;
  if (oy < -Math.PI * 2 * 2) {
    oy = 0;
    op += 3;
    if (op > 3)  op = 0;
  } else if (oy > 0) {
    oy = -Math.PI * 2 * 2;
    op -= 3;
    if (op < 0) op = 3;
  }
  var sz = 0; 
  var oz = 1; 
  var x, y, z, xy, xz, yx, yz, zx, zy, sc;
  var o;
  var i = orbit;
  var arr = [];
  while (i--) {
    x = ax[i];
    y = ay[i];
    z = az[i];
    yz = Math.cos(oy) * z - Math.sin(oy) * x;
    yx = Math.sin(oy) * z + Math.cos(oy) * x;
    xy = Math.cos(ox) * y - Math.sin(ox) * yz;
    xz = Math.sin(ox) * y + Math.cos(ox) * yz;
    zx = yx;
    zy = xy; 
    sc = pov / (pov + yz);
    x = zx * sc;
    y = zy * sc;
    z = yz;

    var zpos = Math.round(1500 * sc);
    if (!arr[zpos]) arr[zpos] = [];
    if (i < oy * -200) o = op + 3;
    else if (i < oy * -400)  o = op + 2;
    else o = op + 1;
    arr[zpos].push([x, y, sc * as[i], o]);
  }
  var j = 0;
  var o_;
  var o = arr.length;
  while (i < o) {
    if (arr[i]) {
      j = arr[i].length;
      while (j--) {
        o_ = arr[i][j];
        $.save();
        $.translate(o_[0], o_[1]);
        $.scale(o_[2], o_[2]);
        syst(o_[3]);
        $.restore();
      }
    }
    i++;
  }
  window.requestAnimationFrame(draw);
}

function syst(o) {
  var g = $.createRadialGradient(o, o, 1, o, o, 20);
  g.addColorStop(0,'hsla(62, 95%, 65%, 1)');
  g.addColorStop(0.5,'hsla(331, 95%, 55%, .8)');
  g.addColorStop(0.8,'hsla(288, 95%, 55%, .6)');
  g.addColorStop(1,'hsla(0, 0%,0%,0)');
  var g1 = $.createRadialGradient(o, o, 1, o, o, 25);
  g1.addColorStop(0,'hsla(288, 95%, 55%, 1)');
  g1.addColorStop(0.5,'hsla(331, 95%, 55%, .8)');
  g1.addColorStop(0.8,'hsla(62, 95%, 65%, 1)');
  g1.addColorStop(1,'hsla(0, 0%,0%,0)');
  var g2 = $.createRadialGradient(o, o, 1, o, o, 25);
  g2.addColorStop(0,'hsla(199, 95%, 45%, 1)');
  g2.addColorStop(0.5,'hsla(331, 95%, 55%, .8)');
  g2.addColorStop(0.8,'hsla(62, 95%, 65%, 1)');
  g1.addColorStop(1,'hsla(0, 0%,0%,0)');
  if (o == 2 || c == 3) {
    $.globalAlpha = 0.01;
    orb(15);
    orb(10);
    orb(5);
  } else {
    $.fillStyle = g;
    $.globalAlpha = 0.1;
    orb(10);
  }
  if (o == 2 || o == 3) $.fillStyle = g;
  else if (o == 1 || o == 4) $.fillStyle = g2;
  else if (o == 0 || o == 5) $.fillStyle = g1;
  $.globalAlpha = 0.8;
  orb(4);
}
function orb(r) {
  $.beginPath();
  $.arc(0, 0, r, 0, Math.PI * 2);
  $.fill();
}

function depth() {
  var x, y, z, s;
  var i = 350;
  var o = 0;
  while (i--) {
    ax.push(19500 * Math.cos(i * 0.8) / (i + 100) - 5 + Math.random() * 10);
    ay.push(-175 + -20 + Math.round(Math.random() * 20 * 2));
    az.push(19500 * Math.sin(i * 0.8) / (i + 100) - 5 + Math.random() * 10);
    as.push(0.85 + Math.random() * 0.3);
    ao.push(1)
  }
  orbit = ax.length;
}
function mv(x, y) {
  dx = (prevX - x);
  dy = (prevY - y);
  dx *= 0.5;
  dy *= 0.5;
  ox -= dy / 50;
  oy += dx / 50;
  prevX = x;
  prevY = y;
}

window.addEventListener('mousemove', function(e) {
  e.preventDefault();
  mv(e.pageX, e.pageY)
}, false);

window.addEventListener('touchmove', function(e) {
  e.preventDefault();
  mv(e.touches[0].pageX, e.touches[0].pageY);
}, false);

window.addEventListener('resize',function(){
  c.width = w = window.innerWidth;
  c.height = h = window.innerHeight;
  $.translate(w / 2, h / 2);
}, false);

style.css

html {
  height:100%;
  overflow: hidden;
  background: hsla(330, 90%, 15%, 1);
  background-image: radial-gradient(top, circle cover, hsla(330, 90%, 15%, 1) 20%, hsla(0, 0%, 0%, 1) 80%);
cursor:move;
}
body{
  width: 100%;
  margin: 0;
}