-
Notifications
You must be signed in to change notification settings - Fork 39
/
Copy pathtools.html
132 lines (116 loc) · 4.83 KB
/
tools.html
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<title>HTML5 and CSS cheat sheet</title>
<link href="style.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
</head>
<!-- div.section>h2+div.snippet>h2+div.codeblock>div.ex+code -->
<body>
<script src="https://unpkg.com/most/dist/most.js"></script>
<script>
window.addEventListener("load", () => {
const { fromEvent, combine } = most;
function toNumber(event) {
console.log(event.target.value);
return Number(event.target.value)
}
function validMatrix(m) {
return m.length === 6 && m.filter(elem => typeof (elem) !== "number").length === 0;
}
function applyTransform(p, m) {
var xt = p[0] * m[0] + p[1] * m[2] + m[4];
var yt = p[0] * m[1] + p[1] * m[3] + m[5];
return [xt, yt];
}
function transform(m1, m2) {
return [
m1[0] * m2[0] + m1[2] * m2[1],
m1[1] * m2[0] + m1[3] * m2[1],
m1[0] * m2[2] + m1[2] * m2[3],
m1[1] * m2[2] + m1[3] * m2[3],
m1[0] * m2[4] + m1[2] * m2[5] + m1[4],
m1[1] * m2[4] + m1[3] * m2[5] + m1[5]
];
};
const IDENTITY_MATRIX = [1, 0, 0, 1, 0, 0];
function toMatrix(event) {
return String(event.target.value).split(" ").filter(x => x !== "").map(Number);
}
function matrixStreamOf(input) {
return fromEvent("input", input).map(toMatrix).startWith(IDENTITY_MATRIX);
}
function numberStreamOf(input) {
return fromEvent("input", input).map(toNumber).startWith(0);
}
// point x matrix
const matrix$ = matrixStreamOf(document.getElementById("matrix-1"));
const x$ = numberStreamOf(document.getElementById("x"));
const y$ = numberStreamOf(document.getElementById("y"));
const point$ = combine((a, b) => [a, b], x$, y$);
const out1$ = combine(applyTransform, point$, matrix$);
const out1 = document.getElementById("out-1");
out1$.map(p => p.join(" ")).observe(p => out1.textContent = p);
// matrix x matrix
const matrixMul1$ = matrixStreamOf(document.getElementById("matrix-mul-1"));
const matrixMul2$ = matrixStreamOf(document.getElementById("matrix-mul-2"));
const outMul = document.getElementById("out-mul");
const outMul$ = combine(transform, matrixMul1$, matrixMul2$);
outMul$.map(p => p.join(" ")).observe(m => outMul.textContent = m);
});
</script>
<nav>
<ul class="left">
<li>
<a href="html-css-cheat-sheet.html#html">HTML</a>
</li>
<li>
<a href="html-css-cheat-sheet.html#css">CSS</a>
</li>
<li>
<a href="animation.html#animation">Animation</a>
</li>
<li>
<a href="tools.html">Tools</a>
</li>
</ul>
<ul class="right">
<li>
<a href="https://github.com/acchou/html-css-cheat-sheet" target="_blank" rel="noopener noreferrer">
<img class="social-logo" src="github.svg">
</a>
</li>
</ul>
</nav>
<section id="html">
<h1>Tools</h1>
<section id="html-templates">
<h2>Transforms</h2>
<div class="snippet span-7">
<h2>Matrix transforms</h2>
<div class="matrix">
<div class="codeblock">
(
<input id="x" size="5" type="text" placeholder="0">
<input id="y" size="5" type="text" placeholder="0">) x (
<input id="matrix-1" type="text" placeholder="1 0 0 1 0 0">) = (
<label id="out-1"></label>
)
</div>
<div class="codeblock">
(
<input id="matrix-mul-1" type="text" placeholder="1 0 0 1 0 0">) x (
<input id="matrix-mul-2" type="text" placeholder="1 0 0 1 0 0">) = (
<label id="out-mul"></label>
)
</div>
</div>
</div>
</div>
</section>
</section>
</body>
</html>