make a cute little canvas to draw on and hook it up to some ojs

FIx Dev Container

See merge request Anson-Projects/projects!9

.gitignore

@@ -1,4 +1,3 @@
-_freeze/
 _site/
 public/
 ghost-upload/target/
@@ -7,3 +6,4 @@ posts/*/\.jupyter_cache/
 !/.quarto/_freeze/
 !/.quarto/_freeze/*
 /.quarto/
+**/.DS_Store

.gitlab-ci.yml

@@ -1,19 +1,16 @@
 build:
   stage: build
   image:
-    name: gcr.io/kaniko-project/executor:v1.21.0-debug
+    name: gcr.io/kaniko-project/executor:v1.23.2-debug
     entrypoint: [""]
   script:
     - /kaniko/executor
       --context "${CI_PROJECT_DIR}"
       --dockerfile "${CI_PROJECT_DIR}/Dockerfile"
       --destination "${CI_REGISTRY_IMAGE}:${CI_COMMIT_BRANCH}"
-      --destination "${CI_REGISTRY_IMAGE}:latest"
+      --cleanup
 
 staging:
-  cache:
-    paths:
-      - _freeze
   stage: deploy
   image: ${CI_REGISTRY_IMAGE}:${CI_COMMIT_BRANCH}
   script:

Dockerfile

@@ -1,11 +1,12 @@
-FROM ubuntu:22.04
+FROM debian:bookworm
 
 ARG DEBIAN_FRONTEND=noninteractive
 
-ENV JULIA_VERSION=1.11.1 \
+ENV JULIA_VERSION=1.11.5 \
     JULIA_MAJOR_VERSION=1.11 \
-    JULIA_PATH=/usr/local/julia \
-    QUARTO_VERSION=1.6.37
+    JULIA_PATH=/usr/local/julia
+    
+ENV QUARTO_VERSION=1.7.31
 
 RUN apt-get update && apt-get install -y --no-install-recommends \
     apt-utils dialog \
@@ -13,19 +14,19 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     python3 python3-pip python3-dev \
     r-base \
     gcc g++ \
-    wget curl tar \
+    curl tar \
     openssh-client \
     && rm -rf /var/lib/apt/lists/*
 
 # Use a RUN command for architecture detection and conditional logic
-RUN wget https://github.com/quarto-dev/quarto-cli/releases/download/v${QUARTO_VERSION}/quarto-${QUARTO_VERSION}-linux-$(if [ "$(uname -m)" = "x86_64" ]; then echo "amd64"; else echo "arm64"; fi).tar.gz -O quarto.tar.gz \
+RUN curl -fsSL "https://github.com/quarto-dev/quarto-cli/releases/download/v${QUARTO_VERSION}/quarto-${QUARTO_VERSION}-linux-$(if [ "$(uname -m)" = "x86_64" ]; then echo "amd64"; else echo "arm64"; fi).tar.gz" -o quarto.tar.gz \
     && tar -xzf quarto.tar.gz -C /opt \
     && mkdir -p /opt/quarto \
     && mv /opt/quarto-${QUARTO_VERSION}/* /opt/quarto/ \
     && ln -s /opt/quarto/bin/quarto /usr/local/bin/quarto \
     && rm -rf quarto.tar.gz /opt/quarto-${QUARTO_VERSION}
 
-RUN python3 -m pip install jupyter webio_jupyter_extension jupyter-cache
+RUN python3 -m pip install --break-system-packages jupyter webio_jupyter_extension jupyter-cache 
 
 RUN curl -fsSL "https://julialang-s3.julialang.org/bin/linux/$(if [ "$(uname -m)" = "x86_64" ]; then echo "x64"; else echo "aarch64"; fi)/${JULIA_MAJOR_VERSION}/julia-${JULIA_VERSION}-linux-$(if [ "$(uname -m)" = "x86_64" ]; then echo "x86_64"; else echo "aarch64"; fi).tar.gz" -o julia.tar.gz \
     && tar -xzf julia.tar.gz -C /tmp \

Project.toml

@@ -1,20 +1,9 @@
 [deps]
-CSV = "336ed68f-0bac-5ca0-87d4-7b16caf5d00b"
-Colors = "5ae59095-9a9b-59fe-a467-6f913c188581"
 Conda = "8f4d0f93-b110-5947-807f-2305c1781a2d"
-DataFrames = "a93c6f00-e57d-5684-b7b6-d8193f3e46c0"
-DifferentialEquations = "0c46a032-eb83-5123-abaf-570d42b7fbaa"
-GR_jll = "d2c73de3-f751-5644-a686-071e5b155ba9"
 IJulia = "7073ff75-c697-5162-941a-fcdaad2a7d2a"
 LinearAlgebra = "37e2e46d-f89d-539d-b4ee-838fcccc9c8e"
-Measurements = "eff96d63-e80a-5855-80a2-b1b0885c5ab7"
-Optim = "429524aa-4258-5aef-a3af-852621145aeb"
-PlotlyJS = "f0f68f2c-4968-5e81-91da-67840de0976a"
-Plots = "91a5bcdd-55d7-5caf-9e0b-520d859cae80"
 Pluto = "c3e4b0f8-55cb-11ea-2926-15256bba5781"
 Revise = "295af30f-e4ad-537b-8983-00126c2a3abe"
-SatelliteToolbox = "6ac157d9-b43d-51bb-8fab-48bf53814f4a"
-Unitful = "1986cc42-f94f-5a68-af5c-568840ba703d"
 
 [compat]
 julia = "1.11"

_freeze/site_libs/quarto-listing/quarto-listing.js

@@ -0,0 +1,253 @@
+const kProgressiveAttr = "data-src";
+let categoriesLoaded = false;
+
+window.quartoListingCategory = (category) => {
+  category = atob(category);
+  if (categoriesLoaded) {
+    activateCategory(category);
+    setCategoryHash(category);
+  }
+};
+
+window["quarto-listing-loaded"] = () => {
+  // Process any existing hash
+  const hash = getHash();
+
+  if (hash) {
+    // If there is a category, switch to that
+    if (hash.category) {
+      // category hash are URI encoded so we need to decode it before processing
+      // so that we can match it with the category element processed in JS
+      activateCategory(decodeURIComponent(hash.category));
+    }
+    // Paginate a specific listing
+    const listingIds = Object.keys(window["quarto-listings"]);
+    for (const listingId of listingIds) {
+      const page = hash[getListingPageKey(listingId)];
+      if (page) {
+        showPage(listingId, page);
+      }
+    }
+  }
+
+  const listingIds = Object.keys(window["quarto-listings"]);
+  for (const listingId of listingIds) {
+    // The actual list
+    const list = window["quarto-listings"][listingId];
+
+    // Update the handlers for pagination events
+    refreshPaginationHandlers(listingId);
+
+    // Render any visible items that need it
+    renderVisibleProgressiveImages(list);
+
+    // Whenever the list is updated, we also need to
+    // attach handlers to the new pagination elements
+    // and refresh any newly visible items.
+    list.on("updated", function () {
+      renderVisibleProgressiveImages(list);
+      setTimeout(() => refreshPaginationHandlers(listingId));
+
+      // Show or hide the no matching message
+      toggleNoMatchingMessage(list);
+    });
+  }
+};
+
+window.document.addEventListener("DOMContentLoaded", function (_event) {
+  // Attach click handlers to categories
+  const categoryEls = window.document.querySelectorAll(
+    ".quarto-listing-category .category"
+  );
+
+  for (const categoryEl of categoryEls) {
+    // category needs to support non ASCII characters
+    const category = decodeURIComponent(
+      atob(categoryEl.getAttribute("data-category"))
+    );
+    categoryEl.onclick = () => {
+      activateCategory(category);
+      setCategoryHash(category);
+    };
+  }
+
+  // Attach a click handler to the category title
+  // (there should be only one, but since it is a class name, handle N)
+  const categoryTitleEls = window.document.querySelectorAll(
+    ".quarto-listing-category-title"
+  );
+  for (const categoryTitleEl of categoryTitleEls) {
+    categoryTitleEl.onclick = () => {
+      activateCategory("");
+      setCategoryHash("");
+    };
+  }
+
+  categoriesLoaded = true;
+});
+
+function toggleNoMatchingMessage(list) {
+  const selector = `#${list.listContainer.id} .listing-no-matching`;
+  const noMatchingEl = window.document.querySelector(selector);
+  if (noMatchingEl) {
+    if (list.visibleItems.length === 0) {
+      noMatchingEl.classList.remove("d-none");
+    } else {
+      if (!noMatchingEl.classList.contains("d-none")) {
+        noMatchingEl.classList.add("d-none");
+      }
+    }
+  }
+}
+
+function setCategoryHash(category) {
+  setHash({ category });
+}
+
+function setPageHash(listingId, page) {
+  const currentHash = getHash() || {};
+  currentHash[getListingPageKey(listingId)] = page;
+  setHash(currentHash);
+}
+
+function getListingPageKey(listingId) {
+  return `${listingId}-page`;
+}
+
+function refreshPaginationHandlers(listingId) {
+  const listingEl = window.document.getElementById(listingId);
+  const paginationEls = listingEl.querySelectorAll(
+    ".pagination li.page-item:not(.disabled) .page.page-link"
+  );
+  for (const paginationEl of paginationEls) {
+    paginationEl.onclick = (sender) => {
+      setPageHash(listingId, sender.target.getAttribute("data-i"));
+      showPage(listingId, sender.target.getAttribute("data-i"));
+      return false;
+    };
+  }
+}
+
+function renderVisibleProgressiveImages(list) {
+  // Run through the visible items and render any progressive images
+  for (const item of list.visibleItems) {
+    const itemEl = item.elm;
+    if (itemEl) {
+      const progressiveImgs = itemEl.querySelectorAll(
+        `img[${kProgressiveAttr}]`
+      );
+      for (const progressiveImg of progressiveImgs) {
+        const srcValue = progressiveImg.getAttribute(kProgressiveAttr);
+        if (srcValue) {
+          progressiveImg.setAttribute("src", srcValue);
+        }
+        progressiveImg.removeAttribute(kProgressiveAttr);
+      }
+    }
+  }
+}
+
+function getHash() {
+  // Hashes are of the form
+  // #name:value|name1:value1|name2:value2
+  const currentUrl = new URL(window.location);
+  const hashRaw = currentUrl.hash ? currentUrl.hash.slice(1) : undefined;
+  return parseHash(hashRaw);
+}
+
+const kAnd = "&";
+const kEquals = "=";
+
+function parseHash(hash) {
+  if (!hash) {
+    return undefined;
+  }
+  const hasValuesStrs = hash.split(kAnd);
+  const hashValues = hasValuesStrs
+    .map((hashValueStr) => {
+      const vals = hashValueStr.split(kEquals);
+      if (vals.length === 2) {
+        return { name: vals[0], value: vals[1] };
+      } else {
+        return undefined;
+      }
+    })
+    .filter((value) => {
+      return value !== undefined;
+    });
+
+  const hashObj = {};
+  hashValues.forEach((hashValue) => {
+    hashObj[hashValue.name] = decodeURIComponent(hashValue.value);
+  });
+  return hashObj;
+}
+
+function makeHash(obj) {
+  return Object.keys(obj)
+    .map((key) => {
+      return `${key}${kEquals}${obj[key]}`;
+    })
+    .join(kAnd);
+}
+
+function setHash(obj) {
+  const hash = makeHash(obj);
+  window.history.pushState(null, null, `#${hash}`);
+}
+
+function showPage(listingId, page) {
+  const list = window["quarto-listings"][listingId];
+  if (list) {
+    list.show((page - 1) * list.page + 1, list.page);
+  }
+}
+
+function activateCategory(category) {
+  // Deactivate existing categories
+  const activeEls = window.document.querySelectorAll(
+    ".quarto-listing-category .category.active"
+  );
+  for (const activeEl of activeEls) {
+    activeEl.classList.remove("active");
+  }
+
+  // Activate this category
+  const categoryEl = window.document.querySelector(
+    `.quarto-listing-category .category[data-category='${btoa(
+      encodeURIComponent(category)
+    )}']`
+  );
+  if (categoryEl) {
+    categoryEl.classList.add("active");
+  }
+
+  // Filter the listings to this category
+  filterListingCategory(category);
+}
+
+function filterListingCategory(category) {
+  const listingIds = Object.keys(window["quarto-listings"]);
+  for (const listingId of listingIds) {
+    const list = window["quarto-listings"][listingId];
+    if (list) {
+      if (category === "") {
+        // resets the filter
+        list.filter();
+      } else {
+        // filter to this category
+        list.filter(function (item) {
+          const itemValues = item.values();
+          if (itemValues.categories !== null) {
+            const categories = decodeURIComponent(
+              atob(itemValues.categories)
+            ).split(",");
+            return categories.includes(category);
+          } else {
+            return false;
+          }
+        });
+      }
+    }
+  }
+}

posts/2025-05-10-double-pendulum-redux/index.qmd

@@ -0,0 +1,155 @@
+---
+title: "Double Pendulum"
+description: |
+  Lets create a double pendulum in Observable JS!
+date: 2025-05-09
+categories:
+  - Observable JS
+  - Code
+  - Math
+draft: false
+freeze: true
+image: FeistyCompetentGarpike-mobile.mp4
+image-alt: "My original Double Pendulum done in Python and Processing.js"
+---
+
+Quarto (which this blog is built on) recently added support for [Observable JS](https://observablehq.com/@observablehq/observable-javascript), which lets you make really cool interactive and animated visualizations. I have an odd fixation with finding new tools to visualize data, and while JS is far from the first tool I want to grab I figure I should give OJS a shot. Web browsers have been the best way to distribute and share applications for a long time now so I think its time that I invest some time to learn something better than a plotly diagram or jupyter notebook saved as a pdf to share data.
+
+![My original Double Pendulum done in Python and Processing.js](FeistyCompetentGarpike-mobile.mp4){fig-alt="My original Double Pendulum done in Python and Processing.js"}
+
+Many years ago I hit the front page the [/r/python](https://www.reddit.com/r/Python/comments/ci1cg4/double_pendulum_made_with_processingpy/) with a double pendulum I made after watching the wonderful [Daniel Shiffman](https://thecodingtrain.com/showcase/author/anson-biggs) of the Coding Train. The video was posted on gfycat which is now defunct but the internet archive has saved it: [https://web.archive.org/web/20201108021323/https://gfycat.com/feistycompetentgarpike-daniel-shiffman-double-pendulum-coding-train](https://web.archive.org/web/20201108021323/https://gfycat.com/feistycompetentgarpike-daniel-shiffman-double-pendulum-coding-train)
+
+I originally used Processing's Python bindings to make the animation. So, a lot of the hard work was done (mostly by Daniel), and this animation seems to be a crowd pleaser so I went ahead and ported it over. Keeping the code hidden since its not the focus here, but feel free to expand it and peruse.
+
+
+```{ojs}
+//| echo: false
+
+// Interactive controls
+viewof length1 = Inputs.range([50, 300], {step: 10, value: 200, label: "Length of pendulum 1"})
+viewof length2 = Inputs.range([50, 300], {step: 10, value: 200, label: "Length of pendulum 2"})
+viewof mass1 = Inputs.range([10, 100], {step: 5, value: 40, label: "Mass of pendulum 1"})
+viewof mass2 = Inputs.range([10, 100], {step: 5, value: 40, label: "Mass of pendulum 2"})
+
+```
+
+
+
+```{ojs}
+//| code-fold: true
+//| column: page
+
+pendulum = {
+  const width = 900;
+  const height = 600;
+  const canvas = DOM.canvas(width, height);
+  const ctx = canvas.getContext("2d");
+  const gravity = .1;
+  const traceCanvas = DOM.canvas(width, height);
+  const traceCtx = traceCanvas.getContext("2d");
+  traceCtx.fillStyle = "white";
+  traceCtx.fillRect(0, 0, width, height);
+
+  const centerX = width / 2;
+  const centerY = 200;
+
+  // State variables
+  let angle1 = Math.PI / 2;
+  let angle2 = Math.PI / 2;
+  let angularVelocity1 = 0;
+  let angularVelocity2 = 0;
+  let previousPosition2X = -1;
+  let previousPosition2Y = -1;
+
+
+  function animate() {
+    // Physics calculations (same equations as Python)
+    let numerator1Part1 = -gravity * (2 * mass1 + mass2) * Math.sin(angle1);
+    let numerator1Part2 = -mass2 * gravity * Math.sin(angle1 - 2 * angle2);
+    let numerator1Part3 = -2 * Math.sin(angle1 - angle2) * mass2;
+    let numerator1Part4 = angularVelocity2 * angularVelocity2 * length2 + 
+                          angularVelocity1 * angularVelocity1 * length1 * Math.cos(angle1 - angle2);
+    let denominator1 = length1 * (2 * mass1 + mass2 - mass2 * Math.cos(2 * angle1 - 2 * angle2));
+    let angularAcceleration1 = (numerator1Part1 + numerator1Part2 + numerator1Part3 * numerator1Part4) / denominator1;
+
+    let numerator2Part1 = 2 * Math.sin(angle1 - angle2);
+    let numerator2Part2 = angularVelocity1 * angularVelocity1 * length1 * (mass1 + mass2);
+    let numerator2Part3 = gravity * (mass1 + mass2) * Math.cos(angle1);
+    let numerator2Part4 = angularVelocity2 * angularVelocity2 * length2 * mass2 * Math.cos(angle1 - angle2);
+    let denominator2 = length2 * (2 * mass1 + mass2 - mass2 * Math.cos(2 * angle1 - 2 * angle2));
+    let angularAcceleration2 = (numerator2Part1 * (numerator2Part2 + numerator2Part3 + numerator2Part4)) / denominator2;
+
+    // Update velocities and angles
+    angularVelocity1 += angularAcceleration1;
+    angularVelocity2 += angularAcceleration2;
+    angle1 += angularVelocity1;
+    angle2 += angularVelocity2;
+
+    // Calculate positions
+    let position1X = length1 * Math.sin(angle1);
+    let position1Y = length1 * Math.cos(angle1);
+    let position2X = position1X + length2 * Math.sin(angle2);
+    let position2Y = position1Y + length2 * Math.cos(angle2);
+
+    // Clear and draw to canvas
+    ctx.fillStyle = "white";
+    ctx.fillRect(0, 0, width, height);
+    ctx.drawImage(traceCanvas, 0, 0);
+
+    // Draw pendulum
+    ctx.save();
+    ctx.translate(centerX, centerY);
+
+    // First arm and mass
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(position1X, position1Y);
+    ctx.strokeStyle = "black";
+    ctx.lineWidth = 2;
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.arc(position1X, position1Y, mass1/2, 0, 2 * Math.PI);
+    ctx.fillStyle = "black";
+    ctx.fill();
+
+    // Second arm and mass
+    ctx.beginPath();
+    ctx.moveTo(position1X, position1Y);
+    ctx.lineTo(position2X, position2Y);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.arc(position2X, position2Y, mass2/2, 0, 2 * Math.PI);
+    ctx.fill();
+
+    ctx.restore();
+
+    // Draw trace line
+    if (previousPosition2X !== -1 && previousPosition2Y !== -1) {
+      traceCtx.save();
+      traceCtx.translate(centerX, centerY);
+      traceCtx.beginPath();
+      traceCtx.moveTo(previousPosition2X, previousPosition2Y);
+      traceCtx.lineTo(position2X, position2Y);
+      traceCtx.strokeStyle = "black";
+      traceCtx.stroke();
+      traceCtx.restore();
+    }
+
+    previousPosition2X = position2X;
+    previousPosition2Y = position2Y;
+
+    requestAnimationFrame(animate);
+  }
+
+  animate();
+  return canvas;
+}
+```
+
+## Conclusion
+
+I think this is far from an idiomatic implementation so I'll keep this brief. I don't think I used JS or Observable as well as I could have so treat this as a beginner stabbing into the dark because thats essentially what the code is.
+
+This was quite a bit more work than the [original Python implementation](https://gitlab.com/MisterBiggs/double_pendulum/blob/master/double_pendulum.pyde), but running real time, having beaufitul defaults, and being interactive without a backend make this leagues better than anything offered by any other language. There is definitely a loss of energy in the system over time that I attribute to Javascript being a mess, but I doubt that I would ever move all of my analysis to JS anyways so I don't think it matters. Its also very likely I'm doing something bad with my timesteps.

posts/2025-05-25-Brachistochrone/index.qmd

@@ -0,0 +1,114 @@
+---
+title: "Brachistochrone"
+description: |
+  Lets create a double pendulum in Observable JS!
+date: 2025-05-09
+categories:
+  - Observable JS
+  - Code
+  - Math
+---
+
+This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text 
+
+:::{.column-screen}
+```{ojs}
+//| echo: false
+
+
+viewof canvas = {
+  const height = 500;
+  const canvas = html`<canvas width=${width} height="${height}" style="border: 1px solid #ccc; cursor: crosshair;"></canvas>`;
+  const ctx = canvas.getContext('2d');
+
+  let isDrawing = false;
+  let lastX = 0;
+  let lastY = 0;
+  let pathLength = 0;
+  let pathHistory = [{time: Date.now(), length: 0}];
+
+  // Drawing settings
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 2;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  canvas.addEventListener('mousedown', (e) => {
+    if (!isDrawing) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.arc(300, 100, 5, 0, 2 * Math.PI);
+      ctx.fillStyle = 'red';
+      ctx.fill();
+      ctx.arc(600, 300, 5, 0, 2 * Math.PI);
+      ctx.fillStyle = 'red';
+      ctx.fill();
+      pathLength = 0;
+      pathHistory = [{time: Date.now(), length: 0}];
+      canvas.value = {length: pathLength, history: pathHistory};
+      canvas.dispatchEvent(new CustomEvent("input"));
+    }
+    isDrawing = true;
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+  });
+
+  canvas.addEventListener('mousemove', (e) => {
+    if (!isDrawing) return;
+
+    // Calculate distance
+    const distance = Math.sqrt(
+      Math.pow(e.offsetX - lastX, 2) + 
+      Math.pow(e.offsetY - lastY, 2)
+    );
+    const angle = Math.atan2(e.offsetY - lastY, e.offsetX - lastX)
+    pathLength += distance;
+
+    // Draw
+    ctx.beginPath();
+    ctx.moveTo(lastX, lastY);
+    ctx.lineTo(e.offsetX, e.offsetY);
+    ctx.stroke();
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+
+    // Update value and emit event
+    pathHistory.push({time: Date.now(), length: pathLength});
+    canvas.value = {length: pathLength, history: pathHistory};
+    canvas.dispatchEvent(new CustomEvent("input"));
+  });
+
+  canvas.addEventListener('mouseup', () => isDrawing = false);
+  canvas.addEventListener('mouseout', () => isDrawing = false);
+
+  // Initial value
+  canvas.value = {length: 0, history: pathHistory};
+  return canvas;
+}
+
+```
+
+
+```{ojs}
+//| echo: false
+md`Current path length: **${canvas.length?.toFixed(0) || 0} pixels**`
+```
+
+```{ojs}
+//| echo: false
+import {Plot} from "@observablehq/plot"
+
+pathChart = Plot.plot({
+  width: width,
+  height: 200,
+  y: {label: "Path Length (pixels)"},
+  x: {label: "Time", type: "time"},
+  marks: [
+    Plot.line(canvas.history || [], {
+      x: "time", 
+      y: "length",
+      stroke: "steelblue",
+      strokeWidth: 2
+    })
+  ]
+})
+```
+
+This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text