add section titles

Author: g-harel

demo/content.ts

@@ -1,4 +1,4 @@
-import {addCanvas, colors, sizes} from "./internal/layout";
+import {addCanvas, addTitle, colors, sizes} from "./internal/layout";
 import {
     point,
     drawOpen,
@@ -26,6 +26,27 @@ import {genFromOptions} from "../internal/gen";
 import {BlobOptions} from "../public/blobs";
 import {interpolateBetween} from "../internal/animate/interpolate";
 
+const makePoly = (pointCount: number, radius: number, center: Coord): Point[] => {
+    const angle = (2 * Math.PI) / pointCount;
+    const points: Point[] = [];
+    const nullHandle = {angle: 0, length: 0};
+    for (let i = 0; i < pointCount; i++) {
+        const coord = expandHandle(center, {angle: i * angle, length: radius});
+        points.push({...coord, handleIn: nullHandle, handleOut: nullHandle});
+    }
+    return points;
+};
+
+const centeredBlob = (options: BlobOptions, center: Coord): Point[] => {
+    return mapPoints(genFromOptions(options), ({curr}) => {
+        curr.x += center.x - options.size / 2;
+        curr.y += center.y - options.size / 2;
+        return curr;
+    });
+};
+
+addTitle(4, "What are vector graphics?");
+
 addCanvas(
     1.3,
     // Pixelated circle.
@@ -170,16 +191,7 @@ addCanvas(2, (ctx, width, height, animate) => {
         can be approximated instead.`;
 });
 
-const makePoly = (pointCount: number, radius: number, center: Coord): Point[] => {
-    const angle = (2 * Math.PI) / pointCount;
-    const points: Point[] = [];
-    const nullHandle = {angle: 0, length: 0};
-    for (let i = 0; i < pointCount; i++) {
-        const coord = expandHandle(center, {angle: i * angle, length: radius});
-        points.push({...coord, handleIn: nullHandle, handleOut: nullHandle});
-    }
-    return points;
-};
+addTitle(4, "How are blobs made?");
 
 addCanvas(
     1.3,
@@ -252,14 +264,6 @@ addCanvas(
     },
 );
 
-const centeredBlob = (options: BlobOptions, center: Coord): Point[] => {
-    return mapPoints(genFromOptions(options), ({curr}) => {
-        curr.x += center.x - options.size / 2;
-        curr.y += center.y - options.size / 2;
-        return curr;
-    });
-};
-
 addCanvas(
     1.3,
     (ctx, width, height) => {
@@ -338,6 +342,8 @@ addCanvas(
     },
 );
 
+addTitle(4, "How are animated blobs interpolated?");
+
 addCanvas(2, (ctx, width, height, animate) => {
     const period = Math.PI * 1000;
     const center: Coord = {x: width * 0.5, y: height * 0.5};
@@ -392,4 +398,10 @@ addCanvas(2, (ctx, width, height, animate) => {
 
         drawClosed(ctx, interpolateBetween(percentage, blobA, blobB), true);
     });
+
+    // TODO have content about why being able to interrupt transitions with another.
+    return `Interpolating between two blobs requires transforming the x,y coordinates of each point
+        as well as its handles. However this has two important prerequisites. First, both blobs must
+        have the same number of points. Second, the points must be matched with their nearest
+        counterpart in the target shape.`;
 });

demo/example.ts

@@ -1,5 +1,7 @@
 import {CanvasKeyframe, canvasPath} from "../public/animate";
 
+// TODO add click me prompt before clicked.
+
 // Fetch reference to example container.
 const exampleContainer = document.querySelector(".example")!;
 

demo/index.html

@@ -46,6 +46,15 @@
                 padding: 2.5rem 0 8rem;
             }
 
+            .container .title {
+                color: #aaa;
+                font-weight: 700;
+                max-width: 1000px;
+                text-transform: uppercase;
+                user-select: none;
+                width: 100%;
+            }
+
             .container .section {
                 border: 1px solid #eee;
                 border-radius: 0.5rem;

demo/internal/layout.ts

@@ -44,27 +44,29 @@ export const sizes = (): {width: number; pt: number} => {
 const createSection = (): HTMLElement => {
     const numberLabel = ("000" + cells.length).substr(-3);
 
-    const section = document.createElement("div");
-    section.classList.add("section");
-    section.setAttribute("id", numberLabel);
-    containerElement.appendChild(section);
+    const sectionElement = document.createElement("div");
+    sectionElement.classList.add("section");
+    sectionElement.setAttribute("id", numberLabel);
+    containerElement.appendChild(sectionElement);
 
     const numberElement = document.createElement("a");
     numberElement.classList.add("number");
     numberElement.setAttribute("href", "#" + numberLabel);
     numberElement.appendChild(document.createTextNode(numberLabel));
-    section.appendChild(numberElement);
+    sectionElement.appendChild(numberElement);
 
-    return section;
+    return sectionElement;
 };
 
 // Adds a section of text to the bottom of the layout.
-export const addTitle = (text: string) => {
-    const sectionElement = createSection();
+export const addTitle = (heading: number, text: string) => {
+    const wrapperElement = document.createElement(`h${heading}`);
+    wrapperElement.classList.add("title");
+    containerElement.appendChild(wrapperElement);
 
     const textWrapperElement = document.createElement("div");
     textWrapperElement.classList.add("text");
-    sectionElement.appendChild(textWrapperElement);
+    wrapperElement.appendChild(textWrapperElement);
 
     text = text.replace("\n", " ").replace(/\s+/g, " ").trim();
     const textElement = document.createTextNode(text);
@@ -120,10 +122,11 @@ const redraw = () => {
                 // Draw canvas debug info.
                 const drawDebug = () => {
                     if (debug) {
-                        tempStyles(cell.ctx, () => {
-                            cell.ctx.strokeStyle = colors.debug;
-                            cell.ctx.strokeRect(0, 0, cellWidth, cellHeight - 1);
-                        });
+                        tempStyles(
+                            cell.ctx,
+                            () => (cell.ctx.strokeStyle = colors.debug),
+                            () => cell.ctx.strokeRect(0, 0, cellWidth, cellHeight - 1),
+                        );
                     }
                 };
                 drawDebug();
@@ -144,10 +147,11 @@ const redraw = () => {
                         cell.ctx.clearRect(0, 0, cellWidth, cellHeight);
                         drawDebug();
                         if (debug) {
-                            tempStyles(cell.ctx, () => {
-                                cell.ctx.fillStyle = colors.debug;
-                                cell.ctx.fillText(String(frameTime), 10, 15);
-                            });
+                            tempStyles(
+                                cell.ctx,
+                                () => (cell.ctx.fillStyle = colors.debug),
+                                () => cell.ctx.fillText(String(frameTime), 10, 15),
+                            );
                         }
 
                         painter(frameTime);