User:Crbyers52/common.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var u = innerWidth/100;
var w = innerWidth;
var h = innerHeight;
var prism = {
  refraction: 1.333,
  position: {x: w/2, y: h/2},
  points: [{x:0,y:-15*u},{x:13*u,y:7*u},{x:-13*u,y:7*u}],
  draw: function () {
    ctx.beginPath();
    ctx.moveTo(prism.p1.x,prism.p1.y);
    ctx.lineTo(prism.p2.x,prism.p2.y);
    ctx.lineTo(prism.p3.x,prism.p3.y);
    ctx.closePath();
    ctx.fillStyle = "rgba(255,255,255,0.1)";
    ctx.fill();
    ctx.lineWidth = 1;
    ctx.strokeStyle = "white";
    ctx.stroke();
  }
};
prism.p1 = {
  x: prism.position.x+prism.points[0].x,
  y: prism.position.y+prism.points[0].y
};
prism.p2 = {
  x: prism.position.x+prism.points[1].x,
  y: prism.position.y+prism.points[1].y
};
prism.p3 = {
  x: prism.position.x+prism.points[2].x,
  y: prism.position.y+prism.points[2].y
};

var particles = [];

var red =   '255,0,0';
var green = '0,255,0';
var blue =  '0,0,255';

var light = {
  initialRadius: 4,
  source: {x:0.1*w,y:h/2,r:6,color:'white'},
  target: {x:w/2,y:(h/2)-30},
  draw: function () {
    circle(light.source);
    if (!particles.hit) {
      particles.push({
        color: red,
        x: light.source.x, 
        y: light.source.y, 
        vx: v.x, 
        vy: v.y,
        r: light.initialRadius
      });
      particles.push({
        color: green,
        x: light.source.x, 
        y: light.source.y, 
        vx: v.x, 
        vy: v.y,
        r: light.initialRadius
      });
      particles.push({
        color: blue,
        x: light.source.x, 
        y: light.source.y, 
        vx: v.x, 
        vy: v.y,
        r: light.initialRadius
      });
    }
    ctx.globalCompositeOperation = 'lighter';
    particles.forEach(function (p) {
      var y = (intersection1.y-light.source.y)/100;
      p.x += p.vx;
      p.y += p.vy;
      if (p.x > intersection1.x && p.x < intersection2.x) {
         p.r += 0.05;
         if (p.color == red) p.vy = y-0.1;
         if (p.color == green) p.vy = y+0.1;
         if (p.color == blue) p.vy = y+0.3;
      }
      if (p.x > intersection2.x) {
        p.r += 0.3;
        if (p.color == red) p.vy = y+0.4;
        if (p.color == green) p.vy = y+0.6;
        if (p.color == blue) p.vy = y+0.8;
      }
      circleGrad(p)
      limit(p);
    });
  }
};

var lineIntersect = function (a,b) {
  a.m = (a[0].y-a[1].y)/(a[0].x-a[1].x);  // slope of line 1
  b.m = (b[1].y-b[0].y)/(b[1].x-b[0].x);  // slope of line 2
  return (Math.abs(a.m - b.m) < Number.EPSILON) ? undefined : { 
    x: (a.m * a[0].x - b.m * b[0].x + b[0].y - a[0].y) / (a.m - b.m),
    y: (a.m*b.m*(b[0].x-a[0].x) + b.m*a[0].y - a.m*b[0].y) / (b.m - a.m)
  };
};
var intersection1 = lineIntersect(
  [light.source,light.target],
  [prism.p1, prism.p3]
);
var intersection2 = lineIntersect(
  [light.source,light.target],
  [prism.p1, prism.p2]
);

var v = {
  x: 2*(intersection1.x-light.source.x)/100,
  y: 2*(intersection1.y-light.source.y)/100
};

var circle = function (c) {
  ctx.beginPath();
  ctx.arc(c.x,c.y,c.r,Math.PI*2,0);
  ctx.fillStyle = 'rgba('+c.color+',1)';
  ctx.fill()
};
var gradient = function (c) {
  var grad = ctx.createRadialGradient(c.x,c.y,0,
                                      c.x,c.y,c.r);
  grad.addColorStop(0,'rgba('+c.color+',0.3)');
  grad.addColorStop(1,'rgba('+c.color+',0)');
  return grad;
};
var circleGrad = function (c) {
  ctx.fillStyle = gradient(c);
  ctx.fillRect(c.x-c.r,c.y-c.r,c.r*2,c.r*2);
};
var limit = function (d) {
  if (d.x<-d.r || d.x>w+d.r ||
      d.y<-d.r || d.y>h+d.r) {
    d.x = light.source.x;
    d.y = light.source.y;
    d.r = light.initialRadius;
    d.vx = v.x, 
    d.vy = v.y,
    particles.hit = true;
  }
};
var animate = function () {
  canvas.width = w;
  canvas.height = h;
  prism.draw();
  light.draw();
  if (!particles.hit) requestAnimationFrame(animate);
};

animate();