KS Sreeram's BlogZola2022-06-05T00:00:00+00:00https://kssreeram.org/atom.xmlScroll-jacking for Fun and Math2022-06-05T00:00:00+00:002022-06-05T00:00:00+00:00
Unknown
https://kssreeram.org/blog/scrolljacking-fun-math/<h2 id="pacing-and-visual-communication">Pacing and Visual Communication</h2>
<p>I love YouTube. Videos can be great at visual communication.
They're good for conveying a high-level overview of a topic.</p>
<p>But they aren't great for communicating detail-oriented information.
Such information needs to be digested by the viewer, and that takes time.
Time that varies a lot. It varies from person to person.
It can also vary across different parts of the content for a single person.</p>
<p>Inevitably, you'll find videos too slow, too fast, or both.
You don't control the pacing.</p>
<p>Before you ask.. No, setting the playback speed to 1.5x is not good enough. :/</p>
<p>This is where text articles (papers, blog posts) shine.
You have <em>complete</em> control over the pacing.
You can read one paragraph fast, the second one slow, and entirely skip a third.
You can go back and forth with ease.</p>
<p>But... text articles aren't great at visual communication.</p>
<h2 id="an-experiment">An Experiment</h2>
<p>Is it possible communicate visually while letting the viewer control the pacing?</p>
<p>Enter scroll-jacking! (hijacking the scroll behavior)</p>
<p>You might have seen websites that hijack the scroll behavior for a variety of gimmicks.
Many of these gimmicks are cringe-inducing and annoying.</p>
<p>If you look past the cringe, perhaps scroll-jacking can be put to good use.
Perhaps you can let the viewer control the pacing of an animation. Scrolling with modern phones (or a good trackpad) is smooth and easy.</p>
<p>Can we use this for communicating, say, math?</p>
<p>Here are a couple of experiments in doing just that.</p>
<ul>
<li>
<p><a href="https://kssreeram.org/blog/pythagoras-theorem/">Pythagoras' Theorem</a></p>
</li>
<li>
<p><a href="https://kssreeram.org/blog/sigma-n/">What is 1 + 2 + ⋯ (till n)?</a></p>
</li>
</ul>
<p>Admittedly, this is simple high-school math. Someday, I'd like to try something more complex.</p>
<p><em>(@-me on twitter <a rel="external" href="https://twitter.com/kssreeram">@kssreeram</a>
for comments and feedback.)</em></p>
What is 1 + 2 + ⋯ (till n)?2022-06-04T00:00:00+00:002022-06-04T00:00:00+00:00
Unknown
https://kssreeram.org/blog/sigma-n/<style type="text/css">
.math {
font-weight: bold;
}
</style>
<p>The answer is:</p>
<p><span class="math">n × (n + 1) / 2</span></p>
<p>Let's check with an example, <span class="math">n = 4</span>.</p>
<div class="math">
1 + 2 + 3 + 4<br/>
= 4 × (4 + 1) / 2<br/>
= 4 × 5 / 2<br/>
= 10
</div>
<p>Yep. That's right.</p>
<p>Let's see if we can prove this...</p>
<p>(Continue scrolling to play the animation.
Please use a smooth scrolling device like a touchscreen or a trackpad.)</p>
<div id="filmroll-1" class="filmroll">
<canvas class="canvas" width="400" height="400"></canvas>
<div class="section-container" data-timing="1.2">
<div class="section-caption">
<div class="section-caption-content">
Let's represent
<span class="math">1</span>
to
<span class="math">n</span>
with balls.<br/>
</div>
</div>
</div>
<div class="section-container" data-timing="0">
<div class="section-caption">
<div class="section-caption-content">
The number of yellow balls =<br/>
<span class="math">
1 + 2 + 3 + ⋯ (</span>till
<span class="math">
n)</span>
</div>
</div>
</div>
<div class="section-container" data-timing="0.5">
<div class="section-caption">
<div class="section-caption-content">
Double the number of balls,<br/>
and make a grid.
</div>
</div>
</div>
<div class="section-container" data-timing="0.3">
<div class="section-caption">
<div class="section-caption-content">
The first row has
<span class="math">1</span>
yellow &
<span class="math">n</span>
blue balls.<br/>
A total of
<span class="math">n + 1</span>
balls.
</div>
</div>
</div>
<div class="section-container" data-timing="0.3">
<div class="section-caption">
<div class="section-caption-content">
The second row has
<span class="math">2</span>
yellow &
<span class="math">n-1</span>
blue balls.<br/>
Again, a total of
<span class="math">n + 1</span>
balls.
</div>
</div>
</div>
<div class="section-container" data-timing="0.3">
<div class="section-caption">
<div class="section-caption-content">
Every row has
<span class="math">n + 1</span>
balls!<br/>
The grid has a total of
<span class="math">
n × (n + 1)
</span>
balls.
</div>
</div>
</div>
<div class="section-container" data-timing="0.3">
<div class="section-caption">
<div class="section-caption-content">
The number of yellow balls<br/>
is half that
<span class="math">
= n × (n + 1) / 2
</span>
</div>
</div>
</div>
<div class="section-container" data-timing="0">
<div class="section-caption">
<div class="section-caption-content">
Therefore,<br/>
<span class="math">
1 + 2 + ⋯ (</span>till
<span class="math">n)
= n × (n + 1) / 2
</span>
</div>
</div>
</div>
</div>
<p><em>(@-me on twitter <a rel="external" href="https://twitter.com/kssreeram">@kssreeram</a>
for comments and feedback.)</em></p>
<script>
//
// Circle
//
function Circle(center, radius, color) {
this.center = center;
this.radius = radius;
this.color = color;
}
Circle.prototype.execute = function (ctx) {
let center = deref(this.center);
let radius = deref(this.radius);
let color = deref(this.color);
ctx.beginPath();
ctx.arc(center.x, center.y, radius, 0, 2 * Math.PI);
ctx.fillStyle = color.toString();
ctx.fill();
};
//
// COLORS
// FONT1
// FONT2
//
const COLORS = {
bg: parseColor("#fcf3d9"),
red: parseColor("#c1251f"),
yellow: parseColor("#f8c02d"),
blue: parseColor("#0d5073"),
black: parseColor("#000000"),
};
const FONT1 = "16px sans-serif";
const FONT2 = "12px sans-serif";
//
// drawSigmaN
//
function drawSigmaN(target, playing) {
let currentSection = 0;
let animate = function (fStart, fEnd, vStart, vEnd) {
if (playing.section < currentSection) return vStart;
if (playing.section > currentSection) return vEnd;
let f = (playing.fraction - fStart) / (fEnd - fStart);
f = clamp(f, 0.0, 1.0);
return lerp(f, vStart, vEnd);
};
// Collect draw commands.
let commands = [];
let cmd = function (obj) {
commands.push(obj);
};
// Draw BG and border.
{
let [w, h] = [target.requiredWidth, target.requiredHeight];
cmd(new Rect(vec2(0, 0), vec2(w, h), COLORS.bg));
cmd(new RectBorder(vec2(0, 0), vec2(w, h), 3, COLORS.yellow));
}
// Draw balls for each of 1 to n.
let N = 6;
let RSTEP = 22;
assert(N >= 4);
let R = RSTEP - 4;
let ballsOrigin = vec2(65, 90);
// Draw highlighter. This is used later.
let highlightP1 = ref(vec2(-RSTEP - 5, -RSTEP));
let highlightP2 = ref(vec2((2*N+1)*RSTEP + 5, RSTEP));
let highlightAlpha = ref(0.0);
{
cmd(new Save());
cmd(new Translate(ballsOrigin));
cmd(new SetAlpha(highlightAlpha));
cmd(new Rect(highlightP1, highlightP2, parseColor("#FFFFFF")));
cmd(new RectBorder(highlightP1, highlightP2, 2, COLORS.red));
cmd(new Restore());
}
{
let steps = 3 * 2 + 1 + 1;
let step = 0;
cmd(new Save());
cmd(new Translate(ballsOrigin));
let startColor = lerp(0.1, COLORS.bg, COLORS.yellow);
let rowP = vec2(0, 0);
let rowLabelCommands = [];
for (let row = 1; row <= N; ++row) {
// Draw label.
let text = `${row}`;
if (row === N - 2) { text = "⋮"; }
else if (row === N-1) { text = "n-1"; }
else if (row === N) { text = "n"; }
{
let si = Math.min(step, steps - 1);
let scale = animate(si/steps, (si + 1)/steps, 30, 1);
let alpha = animate(si/steps, (si + 0.9)/steps, 0.0, 0.3);
alpha = animate((si + 0.9)/steps, (si + 1)/steps, alpha, 1.0);
rowLabelCommands.push(new Save());
rowLabelCommands.push(new SetAlpha(alpha));
rowLabelCommands.push(new Translate(rowP));
if (row < N - 2) {
rowLabelCommands.push(new Scale1(scale));
}
rowLabelCommands.push(new Label(vec2(0, 0), text, COLORS.black, FONT1));
rowLabelCommands.push(new Restore());
}
step += 1;
// Draw row of balls.
{
let ballP = rowP;
let si = Math.min(step, steps - 1);
let [t1, t2] = [si/steps, (si + 1)/steps];
let color = animate(t1, t2, startColor, COLORS.yellow);
for (let i = 0; i < row; ++i) {
cmd(new Circle(ballP, R, color));
ballP = ballP.add(vec2(2*RSTEP, 0));
}
}
step += 1;
rowP = rowP.add(vec2(0, 2*RSTEP));
}
for (let obj of rowLabelCommands) {
cmd(obj);
}
cmd(new Restore());
}
currentSection += 1;
// Nothing to do for section 2.
currentSection += 1;
// Double the balls and make a grid.
let blueAlpha = ref(0.0);
{
let p1 = vec2(-RSTEP, -RSTEP);
let p2 = p1.add(vec2((N + 1)*2*RSTEP, N*2*RSTEP));
let mid = p1.add(p2).scale(0.5);
blueAlpha.value = animate(0.0, 0.1, blueAlpha.value, 0.8);
blueAlpha.value = animate(0.1, 1.0, blueAlpha.value, 1.0);
let angle = animate(0.0, 1.0, 0, -180);
cmd(new Save());
cmd(new SetAlpha(blueAlpha));
cmd(new Translate(ballsOrigin));
cmd(new Translate(mid));
cmd(new Rotate(angle));
cmd(new Translate(mid.negate()));
let rowP = vec2(0, 0);
for (let row = 1; row <= N; ++row) {
// Draw row of balls.
let ballP = rowP;
for (let i = 0; i < row; ++i) {
cmd(new Circle(ballP, R, COLORS.blue));
ballP = ballP.add(vec2(2*RSTEP, 0));
}
let text = `${row}`;
if (row === N - 2) { text = "⋮"; }
else if (row === N-1) { text = "n-1"; }
else if (row === N) { text = "n"; }
cmd(new Save());
cmd(new Translate(rowP));
cmd(new Rotate(-angle));
cmd(new Label(vec2(0, 0), text, COLORS.bg, FONT1));
cmd(new Restore());
rowP = rowP.add(vec2(0, 2*RSTEP));
}
cmd(new Restore());
}
currentSection += 1;
// Highlight row 1.
{
highlightAlpha.value = animate(0.0, 0.5, highlightAlpha.value, 1.0);
}
currentSection += 1;
// Highlight row 2.
{
let p1 = vec2(-RSTEP - 5, RSTEP);
let p2 = vec2((2*N+1)*RSTEP + 5, 3*RSTEP);
highlightP1.value = animate(0.0, 0.5, highlightP1.value, p1);
highlightP2.value = animate(0.0, 0.5, highlightP2.value, p2);
}
currentSection += 1;
// Highlight all rows.
{
let p1 = vec2(-RSTEP - 5, -RSTEP);
let p2 = vec2((2*N+1)*RSTEP + 5, (2*N-1)*RSTEP);
highlightP1.value = animate(0.0, 0.5, highlightP1.value, p1);
highlightP2.value = animate(0.0, 0.5, highlightP2.value, p2);
}
currentSection += 1;
// Show only the yellow balls.
{
highlightAlpha.value = animate(0.0, 1.0, highlightAlpha.value, 0.0);
blueAlpha.value = animate(0.0, 1.0, blueAlpha.value, 0.1);
}
currentSection += 1;
// Execute draw commands.
let ctx = target.context;
ctx.save();
{
let f = target.scale * target.pixelRatio;
ctx.scale(f, f);
}
for (let obj of commands) {
obj.execute(ctx);
}
ctx.restore();
}
//
// updateLoop
// initialize
//
function updateLoop(froll) {
froll.update();
requestAnimationFrame(function () { updateLoop(froll); });
}
function initialize() {
let root = document.getElementById("filmroll-1");
let froll = new Filmroll(root, drawSigmaN);
updateLoop(froll);
}
document.addEventListener("DOMContentLoaded", initialize);
</script>
Pythagoras' Theorem2022-06-03T00:00:00+00:002022-06-03T00:00:00+00:00
Unknown
https://kssreeram.org/blog/pythagoras-theorem/<p>You might remember Pythagoras' theorem from high-school math:</p>
<p>In a right-angled triangle, the square of the hypotenuse
is the sum of the squares of the other two sides.</p>
<p>The following is a visual "proof" of the theorem:</p>
<p>(Continue scrolling to play the animation.
Please use a smooth scrolling device like a touchscreen or a trackpad.)</p>
<style type="text/css">
.math {
font-family: "Georgia", serif;
font-style: italic;
font-weight: bold;
}
</style>
<div id="filmroll-1" class="filmroll">
<canvas class="canvas" width="400" height="400"></canvas>
<div class="section-container" data-timing="0.3">
<div class="section-caption">
<div class="section-caption-content">
Consider a right-angled triangle <br/>
with sides
<span class="math">a</span>,
<span class="math">b</span>, and
<span class="math">c</span>.
</div>
</div>
</div>
<div class="section-container" data-timing="0.3">
<div class="section-caption">
<div class="section-caption-content">
Make a square of side
<span class="math">a + b</span>.
</div>
</div>
</div>
<div class="section-container" data-timing="0.5">
<div class="section-caption">
<div class="section-caption-content">
Place 4 copies of the triangle in it.<br/>
They fit perfectly!
</div>
</div>
</div>
<div class="section-container" data-timing="0.5">
<div class="section-caption">
<div class="section-caption-content">
The visible blue is a square!<br/>
With side
<span class="math">c</span>.
</div>
</div>
</div>
<div class="section-container" data-timing="0.5">
<div class="section-caption">
<div class="section-caption-content">
Its area is
<span class="math">c²</span>.
</div>
</div>
</div>
<div class="section-container" data-timing="0.5">
<div class="section-caption">
<div class="section-caption-content">
Let's re-arrange the triangles<br/>
without changing the blue area...
</div>
</div>
</div>
<div class="section-container" data-timing="0.5">
<div class="section-caption">
<div class="section-caption-content">
Rotate two of the triangles by 90°.
</div>
</div>
</div>
<div class="section-container" data-timing="0.9">
<div class="section-caption">
<div class="section-caption-content">
What remains are two squares.<br/>
With sides
<span class="math">a</span>
and
<span class="math">b</span>.
</div>
</div>
</div>
<div class="section-container" data-timing="0.5">
<div class="section-caption">
<div class="section-caption-content">
Their areas are
<span class="math">a²</span>
and
<span class="math">b²</span>.
</div>
</div>
</div>
<div class="section-container" data-timing="0">
<div class="section-caption">
<div class="section-caption-content">
The rotations didn't change the blue area.<br/>
Therefore,
<span class="math">c² = a² + b²</span>.
</div>
</div>
</div>
</div>
<p><em>(@-me on twitter <a rel="external" href="https://twitter.com/kssreeram">@kssreeram</a>
for comments and feedback.)</em></p>
<script>
//
// COLORS
// FONT
//
const COLORS = {
bg: parseColor("#fcf3d9"),
red: parseColor("#c1251f"),
yellow: parseColor("#f8c02d"),
blue: parseColor("#0d5073"),
black: parseColor("#000000"),
};
const FONT = "italic 16px Georgia, serif";
//
// drawPythagoras
//
function drawPythagoras(target, playing) {
let currentSection = 0;
let animate = function (fStart, fEnd, vStart, vEnd) {
if (playing.section < currentSection) return vStart;
if (playing.section > currentSection) return vEnd;
let f = (playing.fraction - fStart) / (fEnd - fStart);
f = clamp(f, 0.0, 1.0);
return lerp(f, vStart, vEnd);
};
// Collect draw commands.
let commands = [];
let cmd = function (obj) {
commands.push(obj);
};
// Draw BG and border.
{
let [w, h] = [target.requiredWidth, target.requiredHeight];
cmd(new Rect(vec2(0, 0), vec2(w, h), COLORS.bg));
cmd(new RectBorder(vec2(0, 0), vec2(w, h), 3, COLORS.yellow));
}
// Draw main triangle.
let [a, b] = [110, 40];
let tri0Origin = vec2(150, 80);
let triPoints = [vec2(0, 0), vec2(a, 0), vec2(0, -b)];
{
let marker = [
vec2(0,0), vec2(10, 0),
vec2(10, -10), vec2(0, -10),
];
cmd(new Save());
cmd(new Translate(tri0Origin));
cmd(new Polygon(triPoints, COLORS.yellow, 1, COLORS.red));
cmd(new Polygon(marker, null, 1, COLORS.red));
// Draw labels.
let ps = [
pointAlongLine(triPoints[0], triPoints[1], 0.4, 13),
pointAlongLine(triPoints[2], triPoints[0], 0.5, 13),
pointAlongLine(triPoints[1], triPoints[2], 0.55, 13),
];
let scale = animate(0.0, 1.0, 10, 1);
let alpha = 0;
alpha = animate(0.0, 0.8, alpha, 0.3);
alpha = animate(0.8, 1.0, alpha, 1.0);
cmd(new SetAlpha(alpha));
for (let i = 0; i < ps.length; ++i) {
cmd(new Save());
cmd(new Translate(ps[i]));
cmd(new Scale1(scale));
cmd(new Label(vec2(0, 0), ("abc")[i], COLORS.black, FONT));
cmd(new Restore());
}
cmd(new Restore());
}
currentSection += 1;
// Draw first square.
let square1Origin = vec2(30, 170);
let squarePoints = [vec2(0, 0), vec2(0, a+b), vec2(a+b, a+b), vec2(a+b, 0)];
{
let alpha = animate(0.0, 1.0, 0.0, 1.0);
let p = pointAlongLine(vec2(a+b,-15), vec2(0,-15), 0.5, 15);
cmd(new Save());
cmd(new SetAlpha(alpha));
cmd(new Translate(square1Origin));
cmd(new Polygon(squarePoints, COLORS.blue, null, null));
cmd(new ArrowLine(vec2(0, -15), vec2(a+b, -15), 1, COLORS.black));
cmd(new Label(p, "a + b", COLORS.black, FONT));
cmd(new Restore());
}
currentSection += 1;
// Place 4 copies of the triangle inside the square.
let triOrigins = [vec2(0, 0), vec2(0, a+b), vec2(a+b, 0), vec2(a+b, a+b)];
let triRotations = [90, 0, -180, -90];
let square1TriColor = ref(COLORS.yellow);
{
let alpha = 0;
alpha = animate(0.0, 0.01, alpha, 0.5);
alpha = animate(0.01, 1.0, alpha, 1.0);
for (let i = 0; i < triOrigins.length; ++i) {
let destP = triOrigins[i].add(square1Origin);
let p = animate(0.0, 1.0, tri0Origin, destP);
let angle = animate(0.0, 1.0, 0, triRotations[i]);
cmd(new Save());
cmd(new SetAlpha(alpha));
cmd(new Translate(p));
cmd(new Rotate(angle));
cmd(new Polygon(triPoints, square1TriColor, null, null));
cmd(new Restore());
}
}
currentSection += 1;
// Draw labels for the "c" square.
let cAlpha = ref(0.0);
{
let ps = [
pointAlongLine(vec2(0, a), vec2(b, 0), 0.5, 10),
pointAlongLine(vec2(b, 0), vec2(a+b, b), 0.5, 10),
pointAlongLine(vec2(a+b, b), vec2(a, a+b), 0.5, 10),
pointAlongLine(vec2(a, a+b), vec2(0, a), 0.5, 10),
];
cAlpha.value = animate(0.0, 1.0, cAlpha.value, 1.0);
let scale = animate(0.0, 1.0, 30, 1);
let color = animate(0.0, 1.0, COLORS.blue, COLORS.bg);
let triDestColor = lerp(0.3, COLORS.bg, COLORS.yellow);
square1TriColor.value = animate(0.0, 1.0, square1TriColor.value, triDestColor);
for (let p of ps) {
let p2 = p.add(square1Origin);
cmd(new Save());
cmd(new Translate(p2));
cmd(new Scale1(scale));
cmd(new SetAlpha(cAlpha));
cmd(new Label(vec2(0, 0), "c", color, FONT));
cmd(new Restore());
}
}
currentSection += 1;
// Draw the c^2 label.
{
let alpha = animate(0.0, 1.0, 0.0, 1.0);
let scale = animate(0.0, 1.0, 30, 1);
let color = animate(0.0, 1.0, COLORS.blue, COLORS.bg);
square1TriColor.value = animate(0.0, 1.0, square1TriColor.value, COLORS.yellow);
cAlpha.value = animate(0.0, 1.0, cAlpha.value, 0.0);
let p = square1Origin.add(vec2((a+b)/2, (a+b)/2));
cmd(new Save());
cmd(new Translate(p));
cmd(new Scale1(scale));
cmd(new SetAlpha(alpha));
cmd(new Label(vec2(0, 0), "c²", color, FONT));
cmd(new Restore());
}
currentSection += 1;
// Draw the second square.
let square2Origin = vec2(220, 170);
let square2Rotation1 = ref(0);
let square2Rotation2 = ref(0);
{
let p = animate(0.0, 1.0, square1Origin, square2Origin);
let alpha = animate(0.0, 1.0, 0.0, 1.0);
cmd(new Save());
cmd(new Translate(p));
cmd(new SetAlpha(alpha));
cmd(new Polygon(squarePoints, COLORS.blue, null, null));
// Draw the 2 non-animated triangles.
for (let i = 0; i < 2; ++i) {
cmd(new Save());
cmd(new Translate(triOrigins[i]));
cmd(new Rotate(triRotations[i]));
cmd(new Polygon(triPoints, COLORS.yellow, null, null));
cmd(new Restore());
}
// Draw animated triangles.
{
cmd(new Save());
cmd(new Translate(vec2(b, 0)));
cmd(new Rotate(square2Rotation1));
cmd(new Translate(vec2(a, 0)));
cmd(new Rotate(-180));
cmd(new Polygon(triPoints, COLORS.yellow, null, null));
cmd(new Restore());
}
{
cmd(new Save());
cmd(new Translate(vec2(a, a+b)));
cmd(new Rotate(square2Rotation2));
cmd(new Translate(vec2(b, 0)));
cmd(new Rotate(-90));
cmd(new Polygon(triPoints, COLORS.yellow, null, null));
cmd(new Restore());
}
cmd(new Restore());
}
currentSection += 1;
// Rotate two triangles in the second square.
{
square2Rotation1.value = animate(0.0, 0.5, square2Rotation1.value, 90);
square2Rotation2.value = animate(0.5, 1.0, square2Rotation2.value, -90);
}
currentSection += 1;
// Label the sides of "a" and "b" squares.
let aAlpha = ref(0.0);
let bAlpha = ref(0.0);
{
let squareA = [
vec2(b, 0), vec2(a+b, 0),
vec2(a+b, a), vec2(b, a),
];
let squareB = [
vec2(a, a), vec2(a+b, a),
vec2(a+b, a+b), vec2(a, a+b),
];
let lineAlpha = animate(0.0, 0.2, 0.0, 0.5);
aAlpha.value = animate(0.0, 0.5, aAlpha.value, 1.0);
let aScale = animate(0.0, 0.5, 20, 1);
let aColor = animate(0.0, 0.5, COLORS.blue, COLORS.bg);
bAlpha.value = animate(0.65, 1.0, bAlpha.value, 1.0);
let bScale = animate(0.65, 1.0, 20, 0.6);
let bColor = animate(0.65, 1.0, COLORS.blue, COLORS.bg);
cmd(new Save());
cmd(new Translate(square2Origin));
{
cmd(new Save());
cmd(new SetAlpha(lineAlpha));
cmd(new Line(vec2(0, a), vec2(a+b, a), 1, COLORS.yellow));
cmd(new Restore());
}
for (let i = 0; i < squareA.length; ++i) {
let p1 = squareA[i];
let p2 = squareA[(i + 1) % squareA.length];
let p = pointAlongLine(p1, p2, 0.5, 10);
cmd(new Save());
cmd(new SetAlpha(aAlpha));
cmd(new Translate(p));
cmd(new Scale1(aScale));
cmd(new Label(vec2(0, 0), "a", aColor, FONT));
cmd(new Restore());
}
for (let i = 0; i < squareB.length; ++i) {
let p1 = squareB[i];
let p2 = squareB[(i + 1) % squareA.length];
let p = pointAlongLine(p1, p2, 0.5, 7);
cmd(new Save());
cmd(new SetAlpha(bAlpha));
cmd(new Translate(p));
cmd(new Scale1(bScale));
cmd(new Label(vec2(0, 0), "b", bColor, FONT));
cmd(new Restore());
}
cmd(new Restore());
}
currentSection += 1;
// Label the areas of "a" and "b" squares.
{
aAlpha.value = animate(0.0, 1.0, aAlpha.value, 0.0);
bAlpha.value = animate(0.0, 1.0, bAlpha.value, 0.0);
let a2Origin = vec2(b, 0).add(vec2(a+b, a)).scale(0.5);
let b2Origin = vec2(a, a).add(vec2(a+b, a+b)).scale(0.5);
let alpha = animate(0.0, 1.0, 0.0, 1.0);
let scale = animate(0.0, 1.0, 30, 1.0);
let color = animate(0.0, 1.0, COLORS.blue, COLORS.bg);
cmd(new Save());
cmd(new SetAlpha(alpha));
cmd(new Translate(square2Origin));
{
cmd(new Save());
cmd(new Translate(a2Origin));
cmd(new Scale1(scale));
cmd(new Label(vec2(0, 0), "a²", color, FONT));
cmd(new Restore());
}
{
cmd(new Save());
cmd(new Translate(b2Origin));
cmd(new Scale1(scale));
cmd(new Label(vec2(0, 0), "b²", color, FONT));
cmd(new Restore());
}
cmd(new Restore());
}
currentSection += 1;
// Execute draw commands.
let ctx = target.context;
ctx.save();
{
let f = target.scale * target.pixelRatio;
ctx.scale(f, f);
}
for (let obj of commands) {
obj.execute(ctx);
}
ctx.restore();
}
//
// updateLoop
// initialize
//
function updateLoop(froll) {
froll.update();
requestAnimationFrame(function () { updateLoop(froll); });
}
function initialize() {
let root = document.getElementById("filmroll-1");
let froll = new Filmroll(root, drawPythagoras);
updateLoop(froll);
}
document.addEventListener("DOMContentLoaded", initialize);
</script>
Beware of Sync Platforms2013-07-12T17:52:00+00:002013-07-12T17:52:00+00:00
Unknown
https://kssreeram.org/blog/beware-of-sync-platforms/<p>Recently, Dropbox <a rel="external" href="https://www.dropbox.com/developers/blog/43/the-datastore-api-a-new-way-to-store-and-sync-app-data%3E">announced</a> their database sync platform.</p>
<p>At first sight, it looked simple and clean. But I was disappointed
when I saw this:</p>
<blockquote>
<p>Forget conflicts and combining changes when people use your app from different devices. With datastores, Dropbox can now understand the structure of your app data and automatically merge changes made at the same time. For example, simultaneous edits to a contact's phone number and email address will be merged without sync conflicts or any action from the user.</p>
</blockquote>
<p>Any sync-platform that claims to perform automatic conflict resolution
is broken. This is because conflict resolution is fundamentally a
domain specific problem that cannot be magically solved by a generic
platform.</p>
<p>Let me explain with an example.</p>
<p>Dropbox does not consider changes to two different fields of the same
record as conflicting. That's a problem.</p>
<p>To see why, consider the following scenario:</p>
<p>My wife and I are going on a picnic with friends. We use a task-list
app with two fields per task - "task name" (a string) and "completed"
(a boolean) - to create a shopping list that's shared between the two
of us.<sup id="fnr1-20130712">[<a href="https://kssreeram.org/blog/beware-of-sync-platforms/#fn1-20130712">1</a>]<a href="https://kssreeram.org/blog/beware-of-sync-platforms/#fn1-20130712">1</a></sup></p>
<p>The list contains the following items that are yet to be completed.</p>
<ul>
<li>12 AAA batteries</li>
<li>4 foldable chairs</li>
<li>bread and butter</li>
<li>dry wood for fire</li>
</ul>
<p>Once an item is completed, it is moved off the list and displayed in a
separate section.</p>
<p>Let's say my wife realizes we actually need 5 chairs, not 4. She goes
ahead and changes "4 foldable chairs" to "5 foldable chairs". She
happens to be offline when she makes this change, and hence this
change isn't visible to the server immediately.</p>
<p>At around the same time, I buy the 4 chairs. I go to the app and look
for the item "4 foldable chairs" and mark it as completed. The item is
moved off my list into the completed section.</p>
<p>Once my wife gets online, the app pushes her changes to the server. My
wife's change modifies the "task name" field. My change modifies the
"completed" field. If Dropbox were used for syncing, since the two
fields are independent, it would automatically apply both
changes. Dropbox sees that there are two simultaneous changes to the
same record, but it does not consider this to be a conflict because
the two changes operate on two different fields.</p>
<p>This effectively results in the item "5 foldable chairs" being marked
as completed.</p>
<p>In the context of this task-list app, Dropbox's automatic merging has
resulted in a situation that's akin to losing data! We did not buy 5
chairs, but the app makes us believe that we are done buying
chairs. That's just as bad as losing data.</p>
<p>In essense, the notion of a <em>conflict</em> depends on the <em>meaning</em> that
we assign to the data. Dropbox knows nothing about the meaning. It
only knows the shape of the data. And that's not enough to resolve
conflicts.</p>
<div class="footnotes">
<hr/>
<ol>
<li id="fn1-20130712">
<p>Dropbox doesn't yet allow two different accounts to share the same datastore. For now, assume that my wife and I share a common dropbox account. <a href="#fnr1-20130712">↩</a></p>
</li>
</ol>
</div>
What made C great2011-10-13T13:19:00+00:002011-10-13T13:19:00+00:00
Unknown
https://kssreeram.org/blog/what-made-c-great/<p>The man himself <a rel="external" href="http://cm.bell-labs.com/cm/cs/who/dmr/chist.html">said</a> it best:</p>
<blockquote>
<p>C is quirky, flawed, and an enormous success. While accidents of history surely helped, it evidently satisfied a need for a system implementation language efficient enough to displace assembly language, yet sufficiently abstract and fluent to describe algorithms and interactions in a wide variety of environments.</p>
</blockquote>
<p>Thank you, Dennis Ritchie, for giving us C.</p>