Draw a rotating square

packages/site/index.html

@@ -30,36 +30,10 @@
       ></a>
     </div>
     <div class="example">
-      <pre><code class="language-javascript">import * as rose from "rose";
-import { Real, Vec, fn } from "rose";
-import { pow } from "./pow.js";
-
-const Vec2 = Vec(2, Real);
-const Mat2 = Vec(2, Vec2);
-
-const f = fn([Vec2], Real, (v) => {
-  return pow(v[0], v[1]);
-});
-
-const g = fn([Vec2], Vec2, (v) => {
-  return rose.vjp(f)(v).grad(1);
-});
-
-const h = fn([Vec2], Mat2, (v) => {
-  const { grad } = rose.vjp(g)(v);
-  return [grad([1, 0]), grad([0, 1])];
-});
-
-const l = await Promise.all([
-  rose.compile(f),
-  rose.compile(g),
-  rose.compile(h),
-]);
-
-export default (x, y) => {
-  return l.map((func) => func([x, y]));
-};</code></pre>
+      <canvas width="300" height="300" id="canvas"></canvas>
     </div>
+    <div></div>
+    <div></div>
     <div class="bottom">
       <a href="https://github.com/rose-lang/rose-icons">icons</a> by
       <a href="https://github.com/aatxe">Aaron Weiss</a> /

packages/site/src/main.ts

@@ -1,34 +1,72 @@
-import hljs from "highlight.js/lib/core";
-import javascript from "highlight.js/lib/languages/javascript";
-import "highlight.js/styles/base16/helios.css";
-
-hljs.registerLanguage("javascript", javascript);
-hljs.highlightAll();
-
-import("rose").then(
-  async ({ Dual, Real, Vec, add, compile, div, fn, mul, opaque, vjp }) => {
-    const log = opaque([Real], Real, Math.log);
-    log.jvp = fn([Dual], Dual, ({ re: x, du: dx }) => {
-      return { re: log(x), du: div(dx, x) };
-    });
-
-    const pow = opaque([Real, Real], Real, Math.pow);
-    pow.jvp = fn([Dual, Dual], Dual, ({ re: x, du: dx }, { re: y, du: dy }) => {
-      const z = pow(x, y);
-      return { re: z, du: mul(add(mul(dx, div(y, x)), mul(dy, log(x))), z) };
-    });
-
-    const Vec2 = Vec(2, Real);
-    const Mat2 = Vec(2, Vec2);
-
-    const f = fn([Vec2], Real, ([x, y]) => pow(x, y));
-    const g = fn([Vec2], Vec2, (v) => vjp(f)(v).grad(1));
-    const h = fn([Vec2], Mat2, (v) => {
-      const { grad } = vjp(g)(v);
-      return [grad([1, 0] as any), grad([0, 1] as any)];
-    });
-
-    const funcs = await Promise.all([compile(f), compile(g), compile(h)]);
-    console.log(funcs.map((func) => func([2, 3])));
-  },
+import {
+  Dual,
+  Real,
+  Vec,
+  add,
+  compile,
+  div,
+  fn,
+  jvp,
+  mul,
+  opaque,
+  vec,
+  vjp,
+} from "rose";
+
+const log = opaque([Real], Real, Math.log);
+log.jvp = fn([Dual], Dual, ({ re: x, du: dx }) => {
+  return { re: log(x), du: div(dx, x) };
+});
+
+const pow = opaque([Real, Real], Real, Math.pow);
+pow.jvp = fn([Dual, Dual], Dual, ({ re: x, du: dx }, { re: y, du: dy }) => {
+  const z = pow(x, y);
+  return { re: z, du: mul(add(mul(dx, div(y, x)), mul(dy, log(x))), z) };
+});
+
+const Vec2 = Vec(2, Real);
+const Mat2 = Vec(2, Vec2);
+
+const f = fn([Vec2], Real, ([x, y]) => pow(x, y));
+const g = fn([Vec2], Vec2, (v) => vjp(f)(v).grad(1));
+const h = fn([Vec2], Mat2, ([x, y]) => {
+  const d = jvp(g);
+  const a = d([
+    { re: x, du: 1 },
+    { re: y, du: 0 },
+  ]);
+  const b = d([
+    { re: x, du: 0 },
+    { re: y, du: 1 },
+  ]);
+  return [vec(2, Real, (i) => a[i].du), vec(2, Real, (i) => b[i].du)];
+});
+
+const all = await compile(
+  fn([Real, Real], { val: Real, grad: Vec2, hess: Mat2 }, (x, y) => {
+    const v = [x, y];
+    return { val: f(v), grad: g(v), hess: h(v) };
+  }),
 );
+
+console.log(all(2, 3));
+
+const canvas = document.getElementById("canvas") as HTMLCanvasElement;
+const { width, height } = canvas;
+const ctx = canvas.getContext("2d")!;
+
+const draw: FrameRequestCallback = (milliseconds) => {
+  ctx.resetTransform();
+  ctx.clearRect(0, 0, width, height);
+
+  ctx.translate(width / 2, height / 2);
+  ctx.scale(1, -1);
+  ctx.rotate(milliseconds / 1000);
+
+  ctx.fillStyle = "#c7254e";
+  ctx.fillRect(-100, -100, 200, 200);
+
+  window.requestAnimationFrame(draw);
+};
+
+window.requestAnimationFrame(draw);

packages/site/style.css

@@ -2,15 +2,26 @@
   --color-background: #222;
   --color-text: #ddd;
   --color-text-hover: white;
-  --color-text-dark: #666;
-  --color-link-dark: hsl(222 50% 45%);
-  --color-link-dark-hover: hsl(222 50% 50%);
+  --color-text-dark: hsl(0, 0%, 40%);
+  --color-link-dark: hsl(345, 50%, 45%);
+  --color-link-dark-hover: hsl(345, 50%, 50%);
 
   background-color: var(--color-background);
   color: var(--color-text);
   font-family: sans-serif;
 }
 
+body,
+html {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
 .top {
   margin: 10px;
   display: flex;
@@ -44,6 +55,9 @@
 }
 
 .bottom {
+  position: fixed;
+  bottom: 20px;
+  width: 100%;
   text-align: center;
   color: var(--color-text-dark);
   font-style: italic;