By Zevan | August 26, 2018
Creating a dictionary type object with ES6 Symbols is easy. Yes we have Maps and WeakMaps but this is still interesting for a variety of reasons… Being able to use objects as keys in another object (dictionary) has many great uses…. So how do you use Symbols like this?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| let a = { id: Symbol('key') },
b = { id: Symbol('key') };
let dictionary = {
[a.id]: 'value by obj a',
[b.id]: 'value by obj b'
};
console.log(dictionary[a.id]);
console.log(dictionary[b.id]);
// outputs:
// 'value by obj a'
// 'value by obj b' |
By using either object a or object b’s `id` symbol, our dictionary points to another value. This old AS3 snippet is similar:
http://actionsnippet.com/?p=426
By Zevan | August 21, 2018
I have so many little snippets like this laying around, at first I didn’t remember writing this when I found it the other day… then it slowly came back to me.
Looks like this is another one from the jQuery days:
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
// meaning: http://www.ichingfortune.com/hexagrams.php
// starting hex: ䷀
var flash = $('.flash'),
syms = $('.syms'),
num = $('.num'),
start = 0x4DC0,
total = 64,
tick = 0;
for (var i = 0; i < total; i++) {
$('<div>', {
html: '&#x' + (start + i).toString(16)
}).appendTo(syms);
}
flash.html(syms.html());
flash.find('div').hide().first().show();
setInterval(function() {
var index = tick % total,
curr = flash.children().eq(index)
.show()
.siblings().hide();
curr = syms.children().eq(index)
.css('color', 'red')
.siblings().css('color', 'black');
num.text(index + 1);
tick++;
}, 600);
});
</script>
<style>
* {
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
.syms div {
position: relative;
float: left;
font-size: 3em;
-webkit-transition: color 300ms ease-out;
-ms-transition: color 300ms ease-out;
-o-transition: color 300ms ease-out;
transition: color 300ms ease-out;
}
.flash {
position: relative;
height: 6em;
}
.flash div {
position: absolute;
left: 0; top: 0;
font-size: 6em;
color: red;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
</head>
<body>
<h2>i ching : <span class="num">1</span></h2>
<div class="flash"></div>
<div class="syms"></div>
</body>
</html> |
The i-ching is a Chinese divinatory system - the “hexagrams” just look very cool, when I noticed they were available starting at `0×4DC0` I made this snippet… think ancient magic 8 ball.
wikipedia article:
https://en.wikipedia.org/wiki/I_Ching
It’s pretty fun to play with this online version:
https://www.eclecticenergies.com/iching/virtualcoins
Posted in Uncategorized | Also tagged misc |
By Zevan | August 18, 2018
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.
By Zevan | August 3, 2018
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:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_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.
Posted in Graphics, html5, javascript, misc, pixel manipulation, svg | Also tagged blitting, canvas, canvg, foreignObject, svg, trick |