I have a set of ~100 pictograms that I use for personal notation. When I was actively working on Zeta. I created a few of these with equations:
You can read more about Zeta in this post.
I spam my facebook with images from my sketchbooks if you’re at all interested in seeing more pictograms:
In 2015 I created QuickShader… which just takes the boilerplate out of showing a shader in the browser. Here are a few examples:
Being able to draw smooth lines that connect arbitrary points is something that I find myself needing very frequently. This is a port of an old snippet that does just that. By averaging control points of a quadratic bezier curve we ensure that our resulting Bezier curves are always smooth.
The key can be seen here with the `bezierSkin` function. It draws either a closed or open curve.
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 29 30 31 32 33 34 35 36 37 38 | // array of xy coords, closed boolean function bezierSkin(bez, closed = true) { var avg = calcAvgs(bez), leng = bez.length, i, n; if (closed) { c.moveTo(avg[0], avg[1]); for (i = 2; i < leng; i += 2) { n = i + 1; c.quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]); } c.quadraticCurveTo(bez[0], bez[1], avg[0], avg[1]); } else { c.moveTo(bez[0], bez[1]); c.lineTo(avg[0], avg[1]); for (i = 2; i < leng - 2; i += 2) { n = i + 1; c.quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]); } c.lineTo(bez[leng - 2], bez[leng - 1]); } } // create anchor points by averaging the control points function calcAvgs(p) { var avg = [], leng = p.length, prev; for (var i = 2; i < leng; i++) { prev = i - 2; avg.push((p[prev] + p[i]) / 2); } // close avg.push((p[0] + p[leng - 2]) / 2); avg.push((p[1] + p[leng - 1]) / 2); return avg; } |
The control points are then averaged to ensure that the curve contains no sharp angles.
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.
Maybe I’ll post more about that in the future…