{
  "format": "srwb",
  "version": "1.0",
  "notebook": {
    "name": "Workbook Graphics",
    "cells": [
      {
        "name": "static_axes",
        "type": "markdown",
        "language": "markdown",
        "code": "# A static SVG diagram\n\nRight and up lie on the paper. The dot in a circle means the normal points toward you.\n\n<svg xmlns=\"http://www.w3.org/2000/svg\"\n     viewBox=\"0 0 360 220\" width=\"100%\" height=\"220\"\n     role=\"img\" aria-label=\"Right, up and outward normal on paper\">\n  <title>A paper coordinate frame</title>\n  <rect x=\"20\" y=\"18\" width=\"320\" height=\"184\"\n        rx=\"6\" fill=\"#ffffff\" stroke=\"#526170\" stroke-width=\"2\" />\n  <path d=\"M110 145 H280\" fill=\"none\" stroke=\"#075d69\" stroke-width=\"3\" />\n  <polygon points=\"280,145 267,138 267,152\" fill=\"#075d69\" />\n  <path d=\"M110 145 V48\" fill=\"none\" stroke=\"#064d91\" stroke-width=\"3\" />\n  <polygon points=\"110,48 103,61 117,61\" fill=\"#064d91\" />\n  <circle cx=\"110\" cy=\"145\" r=\"10\" fill=\"#ffffff\" stroke=\"#14191f\" stroke-width=\"2\" />\n  <circle cx=\"110\" cy=\"145\" r=\"3\" fill=\"#14191f\" />\n  <text x=\"204\" y=\"168\" fill=\"#14191f\" font-size=\"16\">r: right</text>\n  <text x=\"124\" y=\"62\" fill=\"#14191f\" font-size=\"16\">u: up</text>\n  <text x=\"42\" y=\"190\" fill=\"#14191f\" font-size=\"16\">n: toward you</text>\n</svg>"
      },
      {
        "name": "embedded_png",
        "type": "markdown",
        "language": "markdown",
        "code": "## The same picture as an embedded PNG\n\nThis image is stored in Markdown source, not as saved code output.\n\n<img alt=\"Paper axes\" width=\"100%\" src=\"data:image/png;base64,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\">"
      },
      {
        "name": "canvas_axes",
        "type": "code",
        "language": "javascript",
        "code": "(() => {\n  const canvas = document.createElement('canvas');\n  canvas.width = 360;\n  canvas.height = 220;\n  const ctx = canvas.getContext('2d');\n  ctx.fillStyle = '#ffffff';\n  ctx.fillRect(0, 0, 360, 220);\n  ctx.strokeStyle = '#526170';\n  ctx.lineWidth = 2;\n  ctx.strokeRect(20, 18, 320, 184);\n\n  function arrow(x1, y1, x2, y2, color) {\n    const angle = Math.atan2(y2 - y1, x2 - x1);\n    ctx.strokeStyle = color;\n    ctx.fillStyle = color;\n    ctx.lineWidth = 3;\n    ctx.beginPath();\n    ctx.moveTo(x1, y1);\n    ctx.lineTo(x2, y2);\n    ctx.stroke();\n    ctx.beginPath();\n    ctx.moveTo(x2, y2);\n    ctx.lineTo(x2 - 14 * Math.cos(angle - 0.5),\n               y2 - 14 * Math.sin(angle - 0.5));\n    ctx.lineTo(x2 - 14 * Math.cos(angle + 0.5),\n               y2 - 14 * Math.sin(angle + 0.5));\n    ctx.closePath();\n    ctx.fill();\n  }\n  arrow(110, 145, 280, 145, '#075d69'); // right\n  arrow(110, 145, 110, 48, '#064d91');  // up\n  ctx.fillStyle = '#ffffff';\n  ctx.strokeStyle = '#14191f';\n  ctx.lineWidth = 2;\n  ctx.beginPath();\n  ctx.arc(110, 145, 10, 0, 2 * Math.PI);\n  ctx.fill();\n  ctx.stroke();\n  ctx.fillStyle = '#14191f';\n  ctx.beginPath();\n  ctx.arc(110, 145, 3, 0, 2 * Math.PI);\n  ctx.fill();\n  ctx.font = '16px sans-serif';\n  ctx.fillText('r: right', 204, 168);\n  ctx.fillText('u: up', 124, 62);\n  ctx.fillText('n: toward you', 42, 190);\n  window.renderImage(canvas.toDataURL('image/png'));\n})();"
      },
      {
        "name": "math_axes",
        "type": "markdown",
        "language": "markdown",
        "code": "Right, up and outward normal form a right-handed frame.\n\n$$\\mathbf{r} \\times \\mathbf{u} = \\mathbf{n}$$\n\nRows of the frame matrix: right, up, then outward normal.\n\n$$\nM = \\begin{pmatrix}\nr_x & r_y & r_z \\\\\nu_x & u_y & u_z \\\\\nn_x & n_y & n_z\n\\end{pmatrix}\n$$"
      }
    ]
  }
}