Awhile back I thought it would be interesting to add some quick fake lighting to a personal project of mine - that for lack of a better description is a windows management system.
Here is a screenshot of the windows management system with lighting turned on:
Here is a video of me using the system:
I whipped up this prototype (don’t mind the jQuery)
There are really two keys that make this work. Getting the shadow in place and adjusting the gradient. All we really need is the angle and distance from a given `div` in relation to the “light”:
1
2
3
4
5
6
7
8
9
10
11
12
13
let calcAng =function(x, y){
let lightPos = light.position()
let dx = lightPos.left- x;
let dy = lightPos.top- y;return-Math.atan2(dy, dx)/ Math.PI*180;};
let calcDist =function(x, y){
let lightPos = light.position()
let dx = lightPos.left- x;
let dy = lightPos.top- y;return Math.sqrt(dx * dx, dy * dy);};
Standard `atan2` and the pythagorean theorem get us this. Once we have those - we can use them to set our gradient and shadow values:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// warning (apparently this function is slightly speed coded)
let calcShade =function(x, y){
let angle = calcAng(x, y);
let dist = calcDist(x, y);
let sx = dist * Math.cos(-angle * Math.PI/180)*-1;
let sy = dist * Math.sin(-angle * Math.PI/180)*-1;
sx = Math.min(20, Math.max(sx,-20));
sy = Math.min(20, Math.max(sy,-20));
let blur= Math.min(100, dist);
let hBlur = Math.min(50,blur)*0.5;// consider distance in the eq?return{
bg: `-webkit-linear-gradient(${angle}deg, rgba(0,0,0,0.2), rgba(255,255,255,0.4) ${blur}%)`,
shadow: `${sx}px ${sy}px ${hBlur}px rgba(0,0,0,0.15)`
};};
There are more videos of the windows management system on my youtube channel. Here’s another from a much earlier version of the system.
let rotX =0, rotY =0,
perspective =500,
depth,
currX, currY;// learned something like this at Andries Odendaal's www.wireframe.co.za function point3d(x, y, z){
let cosX = Math.cos(rotX),
cosY = Math.cos(rotY),
sinX = Math.sin(rotX),
sinY = Math.sin(rotY),
posX, posY, posZ;
posZ = z * cosX - x * sinX,
posX = z * sinX + x * cosX,
posY = y * cosY - posZ * sinY,
posZ = y * sinY + posZ * cosY;
depth =1/ (posZ / perspective +1);
currX = posX * depth;
currY = posY * depth;return[ currX, currY, depth ];}
Here’s is an example of it in action:
I’ve used this code many many times, it’s just easy to throw into any language and instantly get 3d points rendered in 2d. Here is a short video of a Java applet from 2003 called “Catch Env” that made use of it:
You’ll notice in that source, that I nested the equation to allow for local and global transformations. It was around that time that I learned the ins and outs of real 2D and 3D matrix transformation math… Ken Perlin’s classfiles from NYU were a real help when I was learning that stuff. I don’t think this was the exact file I was working with, but it was definitely on his site somewhere.
Before all that, during my junior year in college I created a 3d engine based off Odendaal’s code in Director (Lingo). Here is a video of some of the demos for it:
…and here is a strange screenshot from my personal website at the time:
Just an example of a powerful snippet and a gateway to learning matrix transformation math. When I first really dug in to html5 canvas - before WebGL was supported so widely - having this trick up my sleeve was great. As you can see in the below link, I used it more than a few times back then:
A student of mine was having trouble creating a 3D logo for a client. I created this snippet to help explain how some of the fp10 3D stuff works.... z-sorting etc... The code could be optimized a bit... but it works nicely...
This demo shows how you can render your QuickBox2D simulation to somewhere other than the main timeline. In this case, I render to a MovieClip that has altered z and and rotationX properties.
var i0:int = index, i1:int = index + 1, i2:int = index + 2;
var i3:int = index + 3, i4:int = index + 4, i5:int = index + 5;
var i6:int = index + 6, i7:int = index + 7;
_indices.push(i0, i1, i2,
i1, i3, i2,
i6, i7, i4,
i7, i5, i4,
i1, i5, i3,
i7, i3, i5,
i4, i5, i0,
i1, i0, i5,
i2, i6, i0,
i0, i6, i4,
i2, i3, i6,
i3, i7, i6);
_faces.push(new Face(), new Face(), new Face(),
new Face(), new Face(), new Face(),
new Face(), new Face(), new Face(),
new Face(), new Face(), new Face());
_uvts.push(Math.random(), Math.random(), 0,
Math.random(), Math.random(), 0,
Math.random(), Math.random(), 0,
Math.random(), Math.random(), 0,
Math.random(), Math.random(), 0,
Math.random(), Math.random(), 0,
Math.random(), Math.random(), 0,
Math.random(), Math.random(), 0);
_boxIndex++;
}
Lately I've been posting large code snippets... so today I'm highlighting part of a larger snippet - The above code is the heart of a small experiment I created this morning. It sets up a cube for use with drawTraingles().