alert("I'm still working on reflections, but that will be finished soon") var objects = []; window.onload = function() { lS = document.getElementById("s"); sE = document.getElementById("sE"); c = document.getElementsByTagName("canvas")[0]; c.width = window.innerWidth; c.height = window.innerHeight; ctx = c.getContext("2d"); new Object(230, c.height / 10, 50, 25, "solid"); new Object(100, c.height - 85, 25, 25, "solid"); //new Object(100, 200, 50, 50, "transparant"); //new Object(100, 300, 50, 50, "reflective"); new Lightsource(c.width / 2, c.height / 2, 5, 200); lS.addEventListener("change", function() {objects[objects.length - 1].s = lS.value}); sE.addEventListener("change", function() {objects[objects.length - 1].endA = sE.value}); update(); }; function Object(x, y, w, h, t) { this.x = x; this.y = y; this.w = w; this.h = h; this.t = t; this.hue; this.sat; this.lig; if (this.t == "solid") { this.hue = 20; this.sat = 70; this.lig = 10; this.c = "hsl(" + this.hue + ", " + this.sat + "%, " + this.lig + "%)"; } else if (this.t == "reflective") { this.hue = 0; this.sat = 0; this.lig = 10; this.c = "hsl(" + this.hue + ", " + this.sat + "%, " + this.lig + "%)"; } else if (this.t == "transparant") this.c = "silver"; this.light = false; this.draw = function() { ctx.fillStyle = this.c; ctx.fillRect(this.x, this.y, this.w, this.h); }; objects.push(this); } function Lightsource(x, y, r, s) { this.x = x; this.y = y; this.r = r; this.s = s; this.o = 180; this.c = "rgba(244, 255, " + this.s + ", 1)"; this.startA = 0; this.endA = 110; objects.push(this); this.draw = function() { ctx.fillStyle = this.c; ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI); ctx.fill(); for (var i = 0; i < this.endA; i += 0.5) Beam(i - this.o, this.x, this.y, this.r, this.s); this.o++; }; } function Beam(a, x, y, r, s) { this.x = x; this.y = y; this.a = a; this.r = r; this.s = s; var grd = ctx.createLinearGradient(this.x + this.r * Math.cos(Math.PI * this.a / 180.0), this.y + this.r * Math.sin(Math.PI * a / 180.0), this.x + this.s * 2 * Math.cos(Math.PI * a / 180.0), this.y + this.s * 2 * Math.sin(Math.PI * this.a / 180.0)); grd.addColorStop(0, "rgba(244, 255, " + this.s + ", 1)"); grd.addColorStop(1, "rgba(244, 255, " + this.s + ", 0)"); ctx.strokeStyle = grd; var endX = this.x + this.s * 2 * Math.cos(Math.PI * this.a / 180.0); var endY = this.y + this.s * 2 * Math.sin(Math.PI * this.a / 180.0); for (var i = 0; i < this.s; i++) { for (var j = 0; j < objects.length; j++) { if (objects[j].t != "transparant") { var x = this.x + i * 2 * Math.cos(Math.PI * this.a / 180.0); var y = this.y + i * 2 * Math.sin(Math.PI * this.a / 180.0); if (x >= objects[j].x && x <= objects[j].x + objects[j].w && y >= objects[j].y && y <= objects[j].y + objects[j].h) { var finalX = endX; var finalY = endY; endX = x; endY = y; if (objects[j].t == "reflective") { var midX = endX; var midY = endY; var usedS = Math.sqrt(Math.pow(midX - this.x, 2) + Math.pow(midY - this.y, 2)); this.s -= usedS; this.s = Math.abs(this.s) if (midY >= objects[j].y + objects[j].h - 1 && midY <= objects[j].y + objects[j].h + 1) { this.a = 270 / 2 - this.a; var endX = this.x + this.s * 2 * Math.cos(Math.PI * this.a / 180.0); var endY = this.y + this.s * 2 * Math.sin(Math.PI * this.a / 180.0); } else endY = 0; /* if (parseInt(midY) == parseInt(objects[j].y)) { var endX = this.x + this.s * 2 * Math.cos(Math.PI * (this.a - 90) / 180.0); var endY = this.y + this.s * 2 * Math.sin(Math.PI * (this.a - 90) / 180.0); } if (parseInt(midX) == parseInt(objects[j].x) + parseInt(objects[j].w)) { var endX = this.x + this.s * 2 * Math.cos(Math.PI * (this.a + 270) / 180.0); var endY = this.y + this.s * 2 * Math.sin(Math.PI * (this.a + 270) / 180.0); }*/ ctx.strokeStyle = "white"; ctx.beginPath(); ctx.moveTo(this.x + this.r * Math.cos(Math.PI * a / 180.0), this.y + this.r * Math.sin(Math.PI * a / 180.0)); ctx.lineTo(midX, midY); ctx.lineTo(endX, endY); ctx.stroke(); return; } else { if (endX > objects[j].x && endY > objects[j].y) var grd2 = ctx.createLinearGradient(endX, endY, objects[j].x, objects[j].y); else if (endX <= objects[j].x && endY > objects[j].y) var grd2 = ctx.createLinearGradient(endX, endY, objects[j].x + objects[j].w, objects[j].y); else if (endX > objects[j].x && endY <= objects[j].y) var grd2 = ctx.createLinearGradient(endX, endY, objects[j].x, objects[j].y + objects[j].h); else if (endX <= objects[j].x && endY <= objects[j].y) var grd2 = ctx.createLinearGradient(endX, endY, objects[j].x + objects[j].w, objects[j].y + objects[j].h); var arr1 = hslToRgb(objects[j].hue, objects[j].sat, objects[j].lig); var arr2 = hslToRgb(objects[j].hue, objects[j].sat, objects[j].lig + 40); var rgb1 = "rgba(" + arr1[0] + ", " + arr1[1] + ", " + arr1[2] + ", 1)"; var rgb2 = "rgba(" + arr2[0] + ", " + arr2[1] + ", " + arr2[2] + ", 0)"; grd2.addColorStop(0, "red"); grd2.addColorStop(1, "black"); ctx.beginPath(); ctx.moveTo(this.x + this.r * Math.cos(Math.PI * a / 180.0), this.y + this.r * Math.sin(Math.PI * a / 180.0)) ctx.lineTo(endX, endY); ctx.stroke(); ctx.save(); ctx.rect(objects[j].x, objects[j].y, objects[j].w, objects[j].h); ctx.clip(); ctx.strokeStyle = grd2; ctx.beginPath(); ctx.moveTo(endX, endY); ctx.lineTo(finalX, finalY); ctx.stroke(); ctx.restore(); return; } } objects[j].light = false; continue; } } } ctx.strokeStyle = grd; ctx.beginPath(); ctx.moveTo(this.x + this.r * Math.cos(Math.PI * a / 180.0), this.y + this.r * Math.sin(Math.PI * a / 180.0)); ctx.lineTo(endX, endY); ctx.stroke(); } function hslToRgb(h, s, l){ var r, g, b; if(s == 0){ r = g = b = l; // achromatic }else{ var hue2rgb = function hue2rgb(p, q, t){ if(t < 0) t += 1; if(t > 1) t -= 1; if(t < 1/6) return p + (q - p) * 6 * t; if(t < 1/2) return q; if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; } var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; } var o = 0; function update() { requestAnimationFrame(update); ctx.fillStyle = "rgba(31, 31, 31, 0.9)"; ctx.fillRect(0, 0, c.width, c.height); ctx.lineWidth = 3; ctx.lineCap = "round"; o += 0.5; var x = c.width / 2 + c.width / 7 * 2 * Math.cos(Math.PI * o / 180.0); var y = c.height / 2 + c.width / 7 * 2 * Math.sin(Math.PI * o / 180.0); objects[objects.length - 1].x = x; objects[objects.length - 1].y = y; for (var i in objects) { objects[i].draw(); i++; } }

Biko