html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<canvas></canvas>
<div id="cntrls">
<input id="s" type="range" min=0 max=250 step=1 value=250 />
<p style="color:white;">strength</p>
<br />
<input id="sE" type="range" min=0 max=360 step=1 value=110 />
<p style="color:white;">angle</p>
<br />
<input id="speed" type="range" min=-3 max=3 step=0.1 value=0.5 />
<p style="color:white;">speed</p>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
margin: 0;
overflow: hidden;
}
#cntrls {
position: absolute;
top: 0;
left: 0;
font-family: Arial;
}
#cntrls p {
display: inline-block;
position: relative;
top: -5;
padding: 0;
margin: 0;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
alert("I'm still working on reflections, but that will be finished soon.\n\nCreated by: The Coding Sloth");
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();
};
// Object constructor (for the blocks)
function Object(x, y, w, h, t) {
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run