diff --git a/public/fonts/KFOkCnqEu92Fr1Mu51xIIzI.woff2 b/public/fonts/KFOkCnqEu92Fr1Mu51xIIzI.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..3791c883e8d0e8d3d5331b60584cf3869276cd43 Binary files /dev/null and b/public/fonts/KFOkCnqEu92Fr1Mu51xIIzI.woff2 differ diff --git a/public/fonts/KFOlCnqEu92Fr1MmEU9fBBc4.woff2 b/public/fonts/KFOlCnqEu92Fr1MmEU9fBBc4.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..8dceabcf6bdfdb0f09be31878c1ebfdd0be943ff Binary files /dev/null and b/public/fonts/KFOlCnqEu92Fr1MmEU9fBBc4.woff2 differ diff --git a/public/theme.css b/public/theme.css index f90784a53e1633bf97fa3d6a5376e812b6615f3f..a795d88100c0d9aacb37a59a8566058d13620b53 100644 --- a/public/theme.css +++ b/public/theme.css @@ -1,3 +1,29 @@ +/* latin */ +@font-face { + font-family: 'Roboto'; + font-style: italic; + font-weight: 400; + src: local('Roboto Italic'), local('Roboto-Italic'), url(fonts/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url(fonts/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* latin */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: local('Roboto Medium'), local('Roboto-Medium'), url(fonts/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + + body, html { width: 100%; height: 100%; @@ -6,7 +32,7 @@ body { background:white; font-size: 10pt; color: #000; - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; + font-family: "Roboto", "Helvetica Neue",Helvetica,Arial,sans-serif; line-height: 1.1; overflow: hidden; width: 100%; @@ -191,8 +217,8 @@ div.eqn { width: 0.3em; } -h1 { - +h1, h2, b, h3, h4, .kw { + font-weight: 500; } h2:before { counter-increment: h2counter; @@ -218,7 +244,6 @@ h3:before { counter-increment: h3counter; } .kw { - font-weight: bold; color: green; } .katex { @@ -236,7 +261,7 @@ p, h4, .example { margin-top: 2px; margin-bottom: 0; } -#reg02axis2{ +#reg02b1axis2{ transform: rotate(150deg); transform-origin: 49.5% 50%; } diff --git a/public/tsbb06.html b/public/tsbb06.html index f6f9c06064e32f349294febc3ec522ded2181ec3..179237499f1d5efa59c6598d9c24349baff4e83c 100644 --- a/public/tsbb06.html +++ b/public/tsbb06.html @@ -301,38 +301,46 @@ <path d="M0,0 L0,6 L9,3 z" vector-effect="non-scaling-stroke"></path> </marker> </defs> - <g id="reg02axis"> - <line x1="0" y1="80%" x2="95%" y2="80%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line> - <line x1="20%" y1="100%" x2="20%" y2="10" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line> - <line x1="20%" y1="50%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line> - <line x1="50%" y1="80%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line> - <circle cx="20%" cy="80%" r="3" fill="#000"></circle> - <foreignObject x="21%" y="80%"><span class="keq fltl">o</span></foreignObject> - <foreignObject x="19%" y="45%"><span class="keq fltr">x_2</span></foreignObject> - <foreignObject x="48%" y="80%"><span class="keq fltm">x_1</span></foreignObject> + <g id="reg02b1axis1"> + <g id="reg02b1axes"> + <line x1="0" y1="80%" x2="95%" y2="80%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line> + <line x1="20%" y1="100%" x2="20%" y2="10" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line> + </g> + <g id="reg02b1ptax1"> + <line x1="20%" y1="50%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line> + <line x1="50%" y1="80%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line> + <foreignObject x="19%" y="45%"><span class="keq fltr">x_2</span></foreignObject> + <foreignObject x="48%" y="80%"><span class="keq fltm">x_1</span></foreignObject> + <foreignObject x="48%" y="50%"><span class="keq fltr">[x_1, x_2]</span></foreignObject> + </g> + <g id="reg02b1o"> + <circle cx="20%" cy="80%" r="3" fill="#000"></circle> + <foreignObject id="reg02b1o" x="21%" y="80%"><span class="keq fltl">o</span></foreignObject> + </g> + + <foreignObject id="reg02b1axis2lbl1" x="66%" y="10%"><span class="keq">o'</span></foreignObject> + <foreignObject id="reg02b1axis2lbl2" x="71%" y="24%"><span class="keq">x_2'</span></foreignObject> + <foreignObject id="reg02b1axis2lbl3" x="44%" y="20%"><span class="keq">x_1'</span></foreignObject> + <foreignObject id="reg02b1axis2lbl4" x="52%" y="50%"><span class="keq">[x_1', x_2']</span></foreignObject> + </g> - <g id="reg02axis2"> + <g id="reg02b1axis2"> <line x1="25%" y1="70%" x2="55%" y2="70%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line> <line x1="30%" y1="80%" x2="30%" y2="45%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line> <line x1="30%" y1="50%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line> <line x1="50%" y1="70%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line> <circle cx="30%" cy="70%" r="3" fill="#000"></circle> - </g> - <foreignObject x="66%" y="10%"><span class="keq">o'</span></foreignObject> - <foreignObject x="71%" y="24%"><span class="keq">x_2'</span></foreignObject> - <foreignObject x="44%" y="20%"><span class="keq">x_1'</span></foreignObject> - <foreignObject x="52%" y="50%"><span class="keq">[x_1', x_2']</span></foreignObject> - <foreignObject x="48%" y="50%"><span class="keq fltr">[x_1, x_2]</span></foreignObject> + </g> + <circle id="reg02b1pt" cx="50%" cy="50%" r="3" fill="#000"></circle> - <circle cx="50%" cy="50%" r="3" fill="#000"></circle> </svg> </div> <div class="figcaption"><span class="kw">Cartesian coordinate system</span></div> </div> <div id="reg02b2" class="block row2 col2"> <div class="figure"><img src="figs/handedness.svg"></div> - <div class="figcaption"><span class="kw">Handedness</span> (right hand = clockwise)</div> + <div class="figcaption"><span class="kw">Handedness</span> (right hand = counter-clockwise)</div> </div> <div id="reg02b3" class="block row2 col2"> <div class="figure"><img src="figs/righthand.svg"></div> @@ -346,48 +354,64 @@ <h3 id="reg021h">Points in <span class="keq">\mathbb{E}^2</span></h3> <div id="reg021b" class="blocks"> <div id="reg021b1" class="block row3 col3"> - <p><span class="kw">Point</span> in <span class="keq">\mathbb{E}^2\Rightarrow</span> <span class="kw">Vector</span> <span class="keq">\vec{x}\in \mathbb{R}^2</span></p> - <div class="center keq">\vec{x}\hspace{-2px}=\hspace{-2px}\begin{bmatrix}x_1\\x_2\end{bmatrix}</div> - <p class="elevquarter"><span class="kw">Vector sum</span>: <span class="keq">\vec{z}=\vec{x}\hspace{-2px}+\hspace{-2px}\vec{y}\hspace{-2px}=\hspace{-4px}\begin{bmatrix}\hspace{-4px}x_1\hspace{-2px}+\hspace{-2px}y_1\hspace{-5px}\\\hspace{-4px}x_2\hspace{-2px}+\hspace{-2px}y_2\hspace{-5px}\end{bmatrix}</span></p> - <p class="elevquarter"><span class="kw">Scalar multiple</span>: <span class="keq">c\vec{x}=\begin{bmatrix}cx_1\\cx_2\end{bmatrix}</span></p> - <p><span class="kw">Linear combination</span>:</p> - <div class="eq keq">\vec{z}=c_1\vec{x}+c_2\vec{y}=\begin{bmatrix}c_1x_1+c_2y_1\\c_1x_2+c_2y_2\end{bmatrix}</div> - <p><span class="kw">Scalar (or dot) product</span>:</p> - <div class="eq keq">\vec{x}\cdot \vec{y} = \vec{x}^T\vec{y} = x_1y_1+x_2y_2</div> - <p><span class="kw">Vector norm (or length)</span>:</p> - <div class="eq keq">\|\vec{x}\|=(\vec{x}\cdot \vec{x})^\frac{1}{2}=\sqrt{x_1^2+x_2^2}</div> - - <p><span class="kw">Unit vector</span>: <span class="keq">\hat{x}=\displaystyle\frac{\vec{x}}{\|\vec{x}\|}, \|\hat{x}\|=1</span></p> + <p><span class="kw">Point</span> in <span class="keq">\mathbb{E}^2\Rightarrow</span> <span id="reg021b1ptvt"><span class="kw">Vector</span> <span class="keq">\vec{x}\in \mathbb{R}^2</span></span></p> + <div id="reg021b1vtx" class="center keq">\vec{x}\hspace{-2px}=\hspace{-2px}\begin{bmatrix}x_1\\x_2\end{bmatrix}</div> + <p id="reg021b1vtsum" class="elevquarter"><span class="kw">Vector sum</span>: <span class="keq">\vec{z}=\vec{x}\hspace{-2px}+\hspace{-2px}\vec{y}\hspace{-2px}=\hspace{-4px}\begin{bmatrix}\hspace{-4px}x_1\hspace{-2px}+\hspace{-2px}y_1\hspace{-5px}\\\hspace{-4px}x_2\hspace{-2px}+\hspace{-2px}y_2\hspace{-5px}\end{bmatrix}</span></p> + <p id="reg021b1vtmult" class="elevquarter"><span class="kw">Scalar multiple</span>: <span class="keq">c\vec{x}=\begin{bmatrix}cx_1\\cx_2\end{bmatrix}</span></p> + <div id="reg021b1vtcomb"> + <p><span class="kw">Linear combination</span>:</p> + <div class="eq keq">\vec{z}=c_1\vec{x}+c_2\vec{y}=\begin{bmatrix}c_1x_1+c_2y_1\\c_1x_2+c_2y_2\end{bmatrix}</div> + </div> + <div id="reg021b1vtdot"> + <p><span class="kw">Scalar (or dot) product</span>:</p> + <div class="eq keq">\vec{x}\cdot \vec{y} = \vec{x}^T\vec{y} = x_1y_1+x_2y_2</div> + </div> + <div id="reg021b1vtnorm"> + <p><span class="kw">Vector norm (or length)</span>:</p> + <div class="eq keq">\|\vec{x}\|=(\vec{x}\cdot \vec{x})^\frac{1}{2}=\sqrt{x_1^2+x_2^2}</div> + </div> + <p id="reg021b1vtunit"><span class="kw">Unit vector</span>: <span class="keq">\hat{x}=\displaystyle\frac{\vec{x}}{\|\vec{x}\|}, \|\hat{x}\|=1</span></p> </div> <div id="reg021b2" class="block col3 row2 full"> <svg class="full"> <line x1="0" y1="80%" x2="95%" y2="80%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line> <line x1="20%" y1="100%" x2="20%" y2="10" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line> - <line x1="20%" y1="80%" x2="60%" y2="70%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line> - <line x1="20%" y1="68%" x2="63%" y2="68%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line> - <line x1="63%" y1="80%" x2="63%" y2="68%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line> - - <line x1="20%" y1="80%" x2="80%" y2="65%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line> + <g id="reg021b2vx"> + <line x1="20%" y1="80%" x2="60%" y2="70%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line> + <foreignObject x="55%" y="72%"><span class="keq">\vec{x}</span></foreignObject> + + <g id="reg021b2vxc"> + <line x1="20%" y1="68%" x2="63%" y2="68%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line> + <line x1="63%" y1="80%" x2="63%" y2="68%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line> + <foreignObject x="58%" y="80%"><span class="keq">x_1</span></foreignObject> + <foreignObject x="18%" y="65%"><span class="keq fltr">x_2</span></foreignObject> + </g> + + </g> + <g id="reg021b2vy"> + <line x1="20%" y1="80%" x2="35%" y2="50%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line> + <foreignObject x="28%" y="45%"><span class="keq">\vec{y}</span></foreignObject> + <line x1="37%" y1="48%" x2="77%" y2="38%" stroke="#666" stroke-dasharray="4" stroke-width="1" vector-effect="non-scaling-stroke"></line> + <line x1="63%" y1="68%" x2="78%" y2="38%" stroke="#666" fill="#666" stroke-width="1" stroke-dasharray="4" vector-effect="non-scaling-stroke"></line> + <line x1="20%" y1="80%" x2="75%" y2="40%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line> + <foreignObject x="36%" y="48%" width="100%" transform="rotate(-42)" transform-origin="50% 50%"><div class="keq">\vec{x}+\vec{y}</div></foreignObject> + </g> - <line x1="20%" y1="80%" x2="35%" y2="50%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line> + <g id="reg021b2cvx"> + <line x1="20%" y1="80%" x2="80%" y2="65%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line> + <foreignObject x="75%" y="68%"><span class="keq">c\vec{x}</span></foreignObject> + </g> - - <line x1="37%" y1="48%" x2="77%" y2="38%" stroke="#666" stroke-dasharray="4" stroke-width="1" vector-effect="non-scaling-stroke"></line> - <line x1="63%" y1="68%" x2="78%" y2="38%" stroke="#666" fill="#666" stroke-width="1" stroke-dasharray="4" vector-effect="non-scaling-stroke"></line> - <line x1="20%" y1="80%" x2="75%" y2="40%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line> - <foreignObject x="55%" y="72%"><span class="keq">\vec{x}</span></foreignObject> - <foreignObject x="75%" y="68%"><span class="keq">c\vec{x}</span></foreignObject> - <foreignObject x="36%" y="48%" width="100%" transform="rotate(-42)" transform-origin="50% 50%"><div class="keq">\vec{x}+\vec{y}</div></foreignObject> - <foreignObject x="28%" y="45%"><span class="keq">\vec{y}</span></foreignObject> - <foreignObject x="58%" y="80%"><span class="keq">x_1</span></foreignObject> - <foreignObject x="18%" y="65%"><span class="keq fltr">x_2</span></foreignObject> </svg> </div> <div id="reg021b3" class="block col2"> <div class="figure"><img src="figs/placeholder.svg"></div> </div> - <div id="reg021b4" class="block col4 row2"> + <div id="reg021b4" class="block col2"> + <div class="figure"><img src="figs/placeholder.svg"></div> + </div> + <div id="reg021b5" class="block col4 row2"> <p><b>Scalar product and angles</b> (<span class="keq">\theta=\angle(\vec{x}, \vec{y})</span>): </p> <div class="keq eq">\vec{x}\cdot \vec{y} = \|\vec{x}\|\|\vec{y}\|\cos\theta</div> <p><span class="kw">Perpendicularity</span> (<span class="kw">Orthogonality</span>):</p> @@ -401,10 +425,6 @@ </div> </div> - <div id="reg021b5" class="block col2"> - <div class="figure"><img src="figs/placeholder.svg"></div> - <div class="figcaption">Left hand system</div> - </div> <div id="reg021b6" class="block col2"> <div class="figure"><img src="figs/placeholder.svg"></div> <div class="figcaption">Left hand system</div> @@ -417,6 +437,10 @@ <div class="figure"><img src="figs/placeholder.svg"></div> <div class="figcaption">Left hand system</div> </div> + <div id="reg021b9" class="block col2"> + <div class="figure"><img src="figs/placeholder.svg"></div> + <div class="figcaption">Left hand system</div> + </div> </div> <h3 class="hidden">Lines in <span class="keq">\mathbb{E}^2</span></h3> <div class="blocks hidden"> @@ -985,8 +1009,7 @@ <p><span class="kw">Projective Plane</span>: <span class="keq">\mathbb{P}^2</span></p> <p class="center"><span class="keq">\mathbb{E}^2\cup</span> set of points at infinity</p> </div> - <div class="block"></div> - + <div class="block col2 row2"> <div class="figure"><img src="figs/placeholder.svg"></div> <div class="figcaption">Parallel lines and point at infinity</div> diff --git a/public/tsbb06.js b/public/tsbb06.js index 0975ce3bad3a71d9c6bead39627692482a593275..ad4d6c3af3597b17be9fbf5afb29295451b7b0f6 100644 --- a/public/tsbb06.js +++ b/public/tsbb06.js @@ -116,7 +116,7 @@ var Scrubber = (function () { nextPause = this._pauses.find(function (pause) { return pause > _this.time; }); else nextPause = this._pausesR.find(function (pause) { return pause < _this.time; }); - //console.log(nextPause, this._pausesR); + console.log(nextPause, this._pausesR); if (nextPause !== undefined) { //console.log(nextPause, time); if (time !== null) { @@ -146,11 +146,33 @@ var Scrubber = (function () { document.addEventListener("DOMContentLoaded", function () { var kFormula = document.querySelectorAll(".keq"); [].forEach.call(kFormula, function (kFormulai) { return katex.render(kFormulai.innerHTML.replace(/&/g, '&'), kFormulai); }); - var reg02b = document.getElementById("reg021b"); + // var reg02b=document.getElementById("reg021b"); var reg02b1 = document.getElementById("reg02b1"); var reg02b2 = document.getElementById("reg02b2"); var reg02b3 = document.getElementById("reg02b3"); var reg02b4 = document.getElementById("reg02b4"); + var reg02b1axis2 = document.getElementById("reg02b1axis2"); + var reg02b1axis1 = document.getElementById("reg02b1axis1"); + var reg02b1axes = document.getElementById("reg02b1axes"); + var reg02b1o = document.getElementById("reg02b1o"); + var reg02b1pt = document.getElementById("reg02b1pt"); + var reg02b1ptax1 = document.getElementById("reg02b1ptax1"); + var reg02b1axis2lbl1 = document.getElementById("reg02b1axis2lbl1"); + var reg02b1axis2lbl2 = document.getElementById("reg02b1axis2lbl2"); + var reg02b1axis2lbl3 = document.getElementById("reg02b1axis2lbl3"); + var reg02b1axis2lbl4 = document.getElementById("reg02b1axis2lbl4"); + var reg021b1ptvt = document.getElementById("reg021b1ptvt"); + var reg021b1vtx = document.getElementById("reg021b1vtx"); + var reg021b2vx = document.getElementById("reg021b2vx"); + var reg021b1vtsum = document.getElementById("reg021b1vtsum"); + var reg021b2vy = document.getElementById("reg021b2vy"); + var reg021b2vxc = document.getElementById("reg021b2vxc"); + var reg021b2cvx = document.getElementById("reg021b2cvx"); + var reg021b1vtmult = document.getElementById("reg021b1vtmult"); + var reg021b1vtcomb = document.getElementById("reg021b1vtcomb"); + var reg021b1vtdot = document.getElementById("reg021b1vtdot"); + var reg021b1vtnorm = document.getElementById("reg021b1vtnorm"); + var reg021b1vtunit = document.getElementById("reg021b1vtunit"); var reg021h = document.getElementById("reg021h"); var reg021b = document.getElementById("reg021b"); var reg021b1 = document.getElementById("reg021b1"); @@ -162,19 +184,32 @@ document.addEventListener("DOMContentLoaded", function () { var reg021b7 = document.getElementById("reg021b7"); var reg021b8 = document.getElementById("reg021b8"); var fadeIn = [{ opacity: 0 }, { opacity: 1 }]; + var fadeOut = [{ opacity: 1 }, { opacity: 0 }]; var scrubber = new Scrubber("scrubber-touch", "scrubber-cur"); scrubber.activate(); var times = [ - [1000, 0], [1000, 1000], [1000, 2000], [1000, 3000], [1000, 4000], - [1000, 5000], [1000, 6000], [1000, 7000], [1000, 8000], [1000, 9000], [1000, 10000], [1000, 11000], [1000, 12000], [1000, 13000], [1000, 14000], + // 1 2 3 4 5 6 7 8 9 10 11 12 13 + /* REG 02 */ [500, 0], [500, 500], [500, 1000], [500, 1500], [500, 2000], [500, 2500], [500, 2500], [500, 2500], [500, 2500], [500, 2500], [500, 3000], [500, 3500], [500, 4000], + // 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 + /* REG 02 B */ [500, 4500], [500, 4500], [500, 4500], [500, 5000], [500, 5000], [500, 5000], [500, 5500], [500, 5500], [500, 5500], [500, 6000], [500, 6000], [500, 6500], [500, 7000], [500, 7500], [500, 8000], [500, 6500], [500, 7500], [500, 8500], [500, 10000], [500, 13000], [500, 14000], + ]; + var fx = [ + // 1 2 3 4 5 6 7 8 9 10 11 12 13 + fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, + // 1 2 3 4 5 6 7 8 9 10 11 12 13 + fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeOut, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, ]; var effects = []; - var items = [reg02b, reg02b1, reg02b2, reg02b3, reg02b4, reg021h, reg021b, reg021b1, reg021b2, reg021b3, reg021b4, reg021b5, reg021b6, reg021b7, reg021b8]; + var items = [ + // 1 2 3 4 5 6 7 8 9 10 11 12 13 + reg02b1, reg02b1o, reg02b1axes, reg02b1pt, reg02b1ptax1, reg02b1axis2, reg02b1axis2lbl1, reg02b1axis2lbl2, reg02b1axis2lbl3, reg02b1axis2lbl4, reg02b2, reg02b3, reg02b4, + // 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 + reg021h, reg021b1, reg021b2, reg021b1ptvt, reg021b2vx, reg021b1vtx, reg021b1vtsum, reg021b2vy, reg021b2vxc, reg021b2cvx, reg021b1vtmult, reg021b1vtcomb, reg021b1vtdot, reg021b1vtnorm, reg021b1vtunit, reg021b3, reg021b4, reg021b5, reg021b6, reg021b7, reg021b8]; var total = 15000; for (var i = 0; i < items.length; i++) { - effects.push(new KeyframeEffect(items[i], fadeIn, { duration: times[i][0], easing: "ease-in-out", delay: times[i][1], endDelay: total - (times[i][1] + times[i][0]), fill: "both" })); + effects.push(new KeyframeEffect(items[i], fx[i], { duration: times[i][0], easing: "ease-in-out", delay: times[i][1], endDelay: total - (times[i][1] + times[i][0]), fill: "both" })); } - scrubber.pauses = [0, 1000, 2000, 3000, 4000, 5000]; + scrubber.pauses = [0, 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000, 5500, 6000, 6500, 7000, 7500, 8000, 8500, 9000, 9500, 10000, 10500, 11000, 11500, 12000, 12500, 13000, 13500, 14000, 14500, 15000, 15500, 16000, 16500, 17000, 17500, 18000, 18500, 19000, 19500]; scrubber.animations = effects.map(function (effect) { return new Animation(effect, document.timeline); }); scrubber.time_max = 10000; scrubber.playForwards(); diff --git a/scrubber.ts b/scrubber.ts index 47926a0b7cd1c2091a12db7f2f8959dd26869e48..9fbc6fa4240b0267e0dfedcc25924d712af3aaad 100644 --- a/scrubber.ts +++ b/scrubber.ts @@ -118,7 +118,7 @@ export class Scrubber { let nextPause: number | undefined; if(!this.reversed) nextPause = this._pauses.find((pause) => pause > this.time); else nextPause = this._pausesR.find((pause) => pause < this.time); - //console.log(nextPause, this._pausesR); + console.log(nextPause, this._pausesR); if (nextPause !== undefined) { //console.log(nextPause, time); if (time !== null) { diff --git a/tsbb06.mr b/tsbb06.mr index 9e58a8284db187e9ad243ccda43482d153135db0..11c3eb1bc8a3c4ef5adee583b28ea2bfecebad58 100644 --- a/tsbb06.mr +++ b/tsbb06.mr @@ -301,38 +301,46 @@ \path(d="M0,0 L0,6 L9,3 z" vector-effect="non-scaling-stroke") } } - \g#reg02axis{ - \line(x1="0" y1="80%" x2="95%" y2="80%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke") - \line(x1="20%" y1="100%" x2="20%" y2="10" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke") - \line(x1="20%" y1="50%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4") - \line(x1="50%" y1="80%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4") - \circle(cx="20%" cy="80%" r="3" fill="#000") - \foreignObject(x="21%" y="80%"){\span.keq.fltl{o}} - \foreignObject(x="19%" y="45%"){\span.keq.fltr{x_2}} - \foreignObject(x="48%" y="80%"){\span.keq.fltm{x_1}} + \g#reg02b1axis1{ + \g#reg02b1axes{ + \line(x1="0" y1="80%" x2="95%" y2="80%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke") + \line(x1="20%" y1="100%" x2="20%" y2="10" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke") + } + \g#reg02b1ptax1{ + \line(x1="20%" y1="50%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4") + \line(x1="50%" y1="80%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4") + \foreignObject(x="19%" y="45%"){\span.keq.fltr{x_2}} + \foreignObject(x="48%" y="80%"){\span.keq.fltm{x_1}} + \foreignObject(x="48%" y="50%"){\span.keq.fltr{[x_1, x_2]}} + } + \g#reg02b1o{ + \circle(cx="20%" cy="80%" r="3" fill="#000") + \foreignObject#reg02b1o(x="21%" y="80%"){\span.keq.fltl{o}} + } + + \foreignObject#reg02b1axis2lbl1(x="66%" y="10%"){\span.keq{o'}} + \foreignObject#reg02b1axis2lbl2(x="71%" y="24%"){\span.keq{x_2'}} + \foreignObject#reg02b1axis2lbl3(x="44%" y="20%"){\span.keq{x_1'}} + \foreignObject#reg02b1axis2lbl4(x="52%" y="50%"){\span.keq{[x_1', x_2']}} + } - \g#reg02axis2{ + \g#reg02b1axis2{ \line(x1="25%" y1="70%" x2="55%" y2="70%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke") \line(x1="30%" y1="80%" x2="30%" y2="45%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke") \line(x1="30%" y1="50%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4") \line(x1="50%" y1="70%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4") \circle(cx="30%" cy="70%" r="3" fill="#000") - } - \foreignObject(x="66%" y="10%"){\span.keq{o'}} - \foreignObject(x="71%" y="24%"){\span.keq{x_2'}} - \foreignObject(x="44%" y="20%"){\span.keq{x_1'}} - \foreignObject(x="52%" y="50%"){\span.keq{[x_1', x_2']}} - \foreignObject(x="48%" y="50%"){\span.keq.fltr{[x_1, x_2]}} + } + \circle#reg02b1pt(cx="50%" cy="50%" r="3" fill="#000") - \circle(cx="50%" cy="50%" r="3" fill="#000") } } \div.figcaption{\span.kw{Cartesian coordinate system}} } \div#reg02b2.block.row2.col2{ \div.figure{\img(src="figs/handedness.svg")} - \div.figcaption{\span.kw{Handedness} (right hand = clockwise)} + \div.figcaption{\span.kw{Handedness} (right hand = counter-clockwise)} } \div#reg02b3.block.row2.col2{ \div.figure{\img(src="figs/righthand.svg")} @@ -346,48 +354,64 @@ \h3#reg021h{Points in \span.keq{\\mathbb\{E\}^2}} \div#reg021b.blocks{ \div#reg021b1.block.row3.col3{ - \p{\span.kw{Point} in \span.keq{\\mathbb\{E\}^2\\Rightarrow} \span.kw{Vector} \span.keq{\\vec\{x\}\\in \\mathbb\{R\}^2}} - \div.center.keq{\\vec\{x\}\\hspace\{-2px\}=\\hspace\{-2px\}\\begin\{bmatrix\}x_1\\\\x_2\\end\{bmatrix\}} - \p.elevquarter{\span.kw{Vector sum}: \span.keq{\\vec\{z\}=\\vec\{x\}\\hspace\{-2px\}+\\hspace\{-2px\}\\vec\{y\}\\hspace\{-2px\}=\\hspace\{-4px\}\\begin\{bmatrix\}\\hspace\{-4px\}x_1\\hspace\{-2px\}+\\hspace\{-2px\}y_1\\hspace\{-5px\}\\\\\\hspace\{-4px\}x_2\\hspace\{-2px\}+\\hspace\{-2px\}y_2\\hspace\{-5px\}\\end\{bmatrix\}}} - \p.elevquarter{\span.kw{Scalar multiple}: \span.keq{c\\vec\{x\}=\\begin\{bmatrix\}cx_1\\\\cx_2\\end\{bmatrix\}}} - \p{\span.kw{Linear combination}:} - \div.eq.keq{\\vec\{z\}=c_1\\vec\{x\}+c_2\\vec\{y\}=\\begin\{bmatrix\}c_1x_1+c_2y_1\\\\c_1x_2+c_2y_2\\end\{bmatrix\}} - \p{\span.kw{Scalar (or dot) product}:} - \div.eq.keq{\\vec\{x\}\\cdot \\vec\{y\} = \\vec\{x\}^T\\vec\{y\} = x_1y_1+x_2y_2} - \p{\span.kw{Vector norm (or length)}:} - \div.eq.keq{\\|\\vec\{x\}\\|=(\\vec\{x\}\\cdot \\vec\{x\})^\\frac\{1\}\{2\}=\\sqrt\{x_1^2+x_2^2\}} - - \p{\span.kw{Unit vector}: \span.keq{\\hat\{x\}=\\displaystyle\\frac\{\\vec\{x\}\}\{\\|\\vec\{x\}\\|\}, \\|\\hat\{x\}\\|=1}} + \p{\span.kw{Point} in \span.keq{\\mathbb\{E\}^2\\Rightarrow} \span#reg021b1ptvt{\span.kw{Vector} \span.keq{\\vec\{x\}\\in \\mathbb\{R\}^2}}} + \div#reg021b1vtx.center.keq{\\vec\{x\}\\hspace\{-2px\}=\\hspace\{-2px\}\\begin\{bmatrix\}x_1\\\\x_2\\end\{bmatrix\}} + \p#reg021b1vtsum.elevquarter{\span.kw{Vector sum}: \span.keq{\\vec\{z\}=\\vec\{x\}\\hspace\{-2px\}+\\hspace\{-2px\}\\vec\{y\}\\hspace\{-2px\}=\\hspace\{-4px\}\\begin\{bmatrix\}\\hspace\{-4px\}x_1\\hspace\{-2px\}+\\hspace\{-2px\}y_1\\hspace\{-5px\}\\\\\\hspace\{-4px\}x_2\\hspace\{-2px\}+\\hspace\{-2px\}y_2\\hspace\{-5px\}\\end\{bmatrix\}}} + \p#reg021b1vtmult.elevquarter{\span.kw{Scalar multiple}: \span.keq{c\\vec\{x\}=\\begin\{bmatrix\}cx_1\\\\cx_2\\end\{bmatrix\}}} + \div#reg021b1vtcomb{ + \p{\span.kw{Linear combination}:} + \div.eq.keq{\\vec\{z\}=c_1\\vec\{x\}+c_2\\vec\{y\}=\\begin\{bmatrix\}c_1x_1+c_2y_1\\\\c_1x_2+c_2y_2\\end\{bmatrix\}} + } + \div#reg021b1vtdot{ + \p{\span.kw{Scalar (or dot) product}:} + \div.eq.keq{\\vec\{x\}\\cdot \\vec\{y\} = \\vec\{x\}^T\\vec\{y\} = x_1y_1+x_2y_2} + } + \div#reg021b1vtnorm{ + \p{\span.kw{Vector norm (or length)}:} + \div.eq.keq{\\|\\vec\{x\}\\|=(\\vec\{x\}\\cdot \\vec\{x\})^\\frac\{1\}\{2\}=\\sqrt\{x_1^2+x_2^2\}} + } + \p#reg021b1vtunit{\span.kw{Unit vector}: \span.keq{\\hat\{x\}=\\displaystyle\\frac\{\\vec\{x\}\}\{\\|\\vec\{x\}\\|\}, \\|\\hat\{x\}\\|=1}} } \div#reg021b2.block.col3.row2.full{ \svg.full{ \line(x1="0" y1="80%" x2="95%" y2="80%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke") \line(x1="20%" y1="100%" x2="20%" y2="10" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke") - \line(x1="20%" y1="80%" x2="60%" y2="70%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke") - \line(x1="20%" y1="68%" x2="63%" y2="68%" stroke="#999" stroke-width="1" stroke-dasharray="4") - \line(x1="63%" y1="80%" x2="63%" y2="68%" stroke="#999" stroke-width="1" stroke-dasharray="4") - - \line(x1="20%" y1="80%" x2="80%" y2="65%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke") + \g#reg021b2vx{ + \line(x1="20%" y1="80%" x2="60%" y2="70%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke") + \foreignObject(x="55%" y="72%"){\span.keq{\\vec\{x\}}} + + \g#reg021b2vxc{ + \line(x1="20%" y1="68%" x2="63%" y2="68%" stroke="#999" stroke-width="1" stroke-dasharray="4") + \line(x1="63%" y1="80%" x2="63%" y2="68%" stroke="#999" stroke-width="1" stroke-dasharray="4") + \foreignObject(x="58%" y="80%"){\span.keq{x_1}} + \foreignObject(x="18%" y="65%"){\span.keq.fltr{x_2}} + } + + } + \g#reg021b2vy{ + \line(x1="20%" y1="80%" x2="35%" y2="50%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke") + \foreignObject(x="28%" y="45%"){\span.keq{\\vec\{y\}}} + \line(x1="37%" y1="48%" x2="77%" y2="38%" stroke="#666" stroke-dasharray="4" stroke-width="1" vector-effect="non-scaling-stroke") + \line(x1="63%" y1="68%" x2="78%" y2="38%" stroke="#666" fill="#666" stroke-width="1" stroke-dasharray="4" vector-effect="non-scaling-stroke") + \line(x1="20%" y1="80%" x2="75%" y2="40%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke") + \foreignObject(x="36%" y="48%" width="100%" transform="rotate(-42)" transform-origin="50% 50%"){\div.keq{\\vec\{x\}+\\vec\{y\}}} + } - \line(x1="20%" y1="80%" x2="35%" y2="50%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke") - + \g#reg021b2cvx{ + \line(x1="20%" y1="80%" x2="80%" y2="65%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke") + \foreignObject(x="75%" y="68%"){\span.keq{c\\vec\{x\}}} + } - \line(x1="37%" y1="48%" x2="77%" y2="38%" stroke="#666" stroke-dasharray="4" stroke-width="1" vector-effect="non-scaling-stroke") - \line(x1="63%" y1="68%" x2="78%" y2="38%" stroke="#666" fill="#666" stroke-width="1" stroke-dasharray="4" vector-effect="non-scaling-stroke") - \line(x1="20%" y1="80%" x2="75%" y2="40%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke") - \foreignObject(x="55%" y="72%"){\span.keq{\\vec\{x\}}} - \foreignObject(x="75%" y="68%"){\span.keq{c\\vec\{x\}}} - \foreignObject(x="36%" y="48%" width="100%" transform="rotate(-42)" transform-origin="50% 50%"){\div.keq{\\vec\{x\}+\\vec\{y\}}} - \foreignObject(x="28%" y="45%"){\span.keq{\\vec\{y\}}} - \foreignObject(x="58%" y="80%"){\span.keq{x_1}} - \foreignObject(x="18%" y="65%"){\span.keq.fltr{x_2}} } } \div#reg021b3.block.col2{ \div.figure{\img(src="figs/placeholder.svg")} } - \div#reg021b4.block.col4.row2{ + \div#reg021b4.block.col2{ + \div.figure{\img(src="figs/placeholder.svg")} + } + \div#reg021b5.block.col4.row2{ \p{\b{Scalar product and angles} (\span.keq{\\theta=\\angle(\\vec\{x\}, \\vec\{y\})}): } \div.keq.eq{\\vec\{x\}\\cdot \\vec\{y\} = \\|\\vec\{x\}\\|\\|\\vec\{y\}\\|\\cos\\theta} \p{\span.kw{Perpendicularity} (\span.kw{Orthogonality}):} @@ -401,10 +425,6 @@ } } - \div#reg021b5.block.col2{ - \div.figure{\img(src="figs/placeholder.svg")} - \div.figcaption{Left hand system} - } \div#reg021b6.block.col2{ \div.figure{\img(src="figs/placeholder.svg")} \div.figcaption{Left hand system} @@ -417,6 +437,10 @@ \div.figure{\img(src="figs/placeholder.svg")} \div.figcaption{Left hand system} } + \div#reg021b9.block.col2{ + \div.figure{\img(src="figs/placeholder.svg")} + \div.figcaption{Left hand system} + } } \h3.hidden{Lines in \span.keq{\\mathbb\{E\}^2}} \div.blocks.hidden{ @@ -985,8 +1009,7 @@ \p{\span.kw{Projective Plane}: \span.keq{\\mathbb\{P\}^2}} \p.center{\span.keq{\\mathbb\{E\}^2\\cup} set of points at infinity} } - \div.block{} - + \div.block.col2.row2{ \div.figure{\img(src="figs/placeholder.svg")} \div.figcaption{Parallel lines and point at infinity} diff --git a/tsbb06.ts b/tsbb06.ts index 6560f2d2fb3932e6dfdffb0f4fc64b328f0a3b1b..dab1845be410945d552b82558913fddfea3b0c74 100644 --- a/tsbb06.ts +++ b/tsbb06.ts @@ -35,11 +35,34 @@ document.addEventListener("DOMContentLoaded", () => { var kFormula = document.querySelectorAll(".keq"); [].forEach.call(kFormula, kFormulai => katex.render(kFormulai.innerHTML.replace(/&/g, '&'), kFormulai)); - var reg02b=document.getElementById("reg021b"); + // var reg02b=document.getElementById("reg021b"); var reg02b1=document.getElementById("reg02b1"); var reg02b2=document.getElementById("reg02b2"); var reg02b3=document.getElementById("reg02b3"); var reg02b4=document.getElementById("reg02b4"); + var reg02b1axis2=document.getElementById("reg02b1axis2"); + var reg02b1axis1=document.getElementById("reg02b1axis1"); + var reg02b1axes=document.getElementById("reg02b1axes"); + var reg02b1o=document.getElementById("reg02b1o"); + var reg02b1pt=document.getElementById("reg02b1pt"); + var reg02b1ptax1=document.getElementById("reg02b1ptax1"); + var reg02b1axis2lbl1=document.getElementById("reg02b1axis2lbl1"); + var reg02b1axis2lbl2=document.getElementById("reg02b1axis2lbl2"); + var reg02b1axis2lbl3=document.getElementById("reg02b1axis2lbl3"); + var reg02b1axis2lbl4=document.getElementById("reg02b1axis2lbl4"); + var reg021b1ptvt=document.getElementById("reg021b1ptvt"); + var reg021b1vtx=document.getElementById("reg021b1vtx"); + var reg021b2vx=document.getElementById("reg021b2vx"); + var reg021b1vtsum=document.getElementById("reg021b1vtsum"); + var reg021b2vy=document.getElementById("reg021b2vy"); + var reg021b2vxc=document.getElementById("reg021b2vxc"); + var reg021b2cvx=document.getElementById("reg021b2cvx"); + var reg021b1vtmult=document.getElementById("reg021b1vtmult"); + var reg021b1vtcomb=document.getElementById("reg021b1vtcomb"); + var reg021b1vtdot=document.getElementById("reg021b1vtdot"); + var reg021b1vtnorm=document.getElementById("reg021b1vtnorm"); + var reg021b1vtunit=document.getElementById("reg021b1vtunit"); + var reg021h=document.getElementById("reg021h"); var reg021b=document.getElementById("reg021b"); var reg021b1=document.getElementById("reg021b1"); @@ -55,16 +78,29 @@ document.addEventListener("DOMContentLoaded", () => { var scrubber = new Scrubber("scrubber-touch", "scrubber-cur"); scrubber.activate(); var times = [ - [1000, 0], [1000, 1000], [1000, 2000], [1000, 3000], [1000, 4000], - [1000, 5000], [1000, 6000], [1000, 7000], [1000, 8000], [1000, 9000], [1000, 10000], [1000, 11000], [1000, 12000], [1000, 13000], [1000, 14000], + // 1 2 3 4 5 6 7 8 9 10 11 12 13 + /* REG 02 */ [500, 0], [500, 500], [500, 1000], [500, 1500], [500, 2000], [500, 2500], [500, 2500], [500, 2500], [500, 2500], [500, 2500], [500, 3000], [500, 3500], [500, 4000], + // 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 + /* REG 02 B */ [500, 4500], [500, 4500], [500, 4500], [500, 5000], [500, 5000], [500, 5000], [500, 5500], [500, 5500], [500, 5500], [500, 6000], [500, 6000], [500, 6500], [500, 7000], [500, 7500], [500, 8000], [500, 6500], [500, 7500], [500, 8500], [500, 10000], [500, 13000], [500, 14000], ]; + var fx = [ + // 1 2 3 4 5 6 7 8 9 10 11 12 13 + fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, + // 1 2 3 4 5 6 7 8 9 10 11 12 13 + fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeOut, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, + ] + var effects:KeyframeEffect[] = []; - var items = [reg02b, reg02b1, reg02b2, reg02b3, reg02b4, reg021h, reg021b, reg021b1, reg021b2, reg021b3, reg021b4, reg021b5, reg021b6, reg021b7, reg021b8]; + var items = [ + // 1 2 3 4 5 6 7 8 9 10 11 12 13 + reg02b1, reg02b1o, reg02b1axes, reg02b1pt, reg02b1ptax1, reg02b1axis2, reg02b1axis2lbl1, reg02b1axis2lbl2, reg02b1axis2lbl3, reg02b1axis2lbl4, reg02b2, reg02b3, reg02b4, + // 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 + reg021h, reg021b1, reg021b2, reg021b1ptvt, reg021b2vx, reg021b1vtx, reg021b1vtsum, reg021b2vy, reg021b2vxc, reg021b2cvx, reg021b1vtmult, reg021b1vtcomb, reg021b1vtdot, reg021b1vtnorm, reg021b1vtunit, reg021b3, reg021b4, reg021b5, reg021b6, reg021b7, reg021b8]; var total = 15000; for(let i=0; i < items.length; i++) { - effects.push(new KeyframeEffect(items[i], fadeIn, {duration: times[i][0], easing:"ease-in-out", delay: times[i][1], endDelay: total-(times[i][1]+times[i][0]), fill: "both"})); + effects.push(new KeyframeEffect(items[i], fx[i], {duration: times[i][0], easing:"ease-in-out", delay: times[i][1], endDelay: total-(times[i][1]+times[i][0]), fill: "both"})); } - scrubber.pauses=[0, 1000, 2000, 3000, 4000, 5000]; + scrubber.pauses=[0, 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000, 5500, 6000, 6500, 7000, 7500, 8000, 8500, 9000, 9500, 10000, 10500, 11000, 11500, 12000, 12500, 13000, 13500, 14000, 14500, 15000, 15500, 16000, 16500, 17000, 17500, 18000, 18500, 19000, 19500]; scrubber.animations=effects.map(effect => new Animation(effect, document.timeline)); scrubber.time_max = 10000; scrubber.playForwards();