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.
Awhile back, I wrote some collision detection code that blitted existing interactive SVG to Canvas and then used the pixel data to figure out various aspects of the relationships between arbitrary SVG nodeTypes. A really simple trick I used can be seen in this pen:
The trick is to load the svg data into an image as a datauri. There are other tricks like this - one of which is using an svg `foreignObject` to blit html to canvas:
There were some browser issues at the time with this. The main one being IE 10/11 didn’t really work (tainted canvas if I recall correctly). The `foreignObject` trick didn’t work with image xlink:hrefs in safari at the time… (weirdly if you opened the dev tools it would start to work) anyway…
I ended up forking canvg for various cases. canvg is really cool… just a note, a coworker of mine went in at some point and optimized it like crazy and improved the perf a good deal by “drying things up”. Maybe I’ll suggest that he submit his optimizations at some point.
This is a quick example showing how to give an input field “memory”. After you type something once and hit return it will be stored in `localStorage`. String values are ranked based on how often they are selected/entered. I know people don’t like jQuery these days, seems this pen is from a time when I still used it.
There’s definitely room for improvement here - but the key features are covered.
