User:Crbyers52/common.js

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;