fix CanvasScene not rendering when offscreen and add CartesianAxes

Author: MathItYT

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "mathlikeanim-rs"
-version = "0.14.12"
+version = "0.14.13"
 edition = "2021"
 readme = "README.md"
 description = "A Rust library for creating mathematical animations"

Cargo.toml

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@mathlikeanim-rs/renderer": "^0.14.12",
+    "@mathlikeanim-rs/renderer": "^0.14.13",
     "clean-jsdoc-theme": "^4.3.0",
     "katex": "^0.16.21"
   }

README.md

@@ -1,25 +1,19 @@
-import init, { Color, Point2D, Style, VectorObjectBuilder, ParametricFunctionPlot, ClosedInterval } from '@mathlikeanim-rs/mathlikeanim-rs'
+import init, { Color, Point2D, Style, VectorObjectBuilder, Tick, Typst, FontFace, ClosedInterval, CartesianAxes } from '@mathlikeanim-rs/mathlikeanim-rs'
 import { CanvasScene } from '@mathlikeanim-rs/renderer';
 
-const scene = new CanvasScene(1920, 1080);
+const scene = new CanvasScene(1920, 1080, '/node_modules/@mathlikeanim-rs/renderer/dist/offscreen-canvas-worker.js');
 const renderButton = document.getElementById('render-button');
 const stopRecordingButton = document.getElementById('stop-recording-button');
 let firstTime = true;
 let recorder;
 let chunks = [];
 let stream;
+let data;
 const stopRecording = () => {
     recorder.stop();
     stopRecordingButton.removeEventListener('click', stopRecording);
 }
 
-function text(text, x, y, font_size, font_family, fill_style, font_faces) {
-    return VectorObjectBuilder.from_svg(`<svg xmlns="http://www.w3.org/2000/svg">
-        <text x="${x}" y="${y}" font-size="${font_size}" font-family="${font_family}">${text}</text>
-    </svg>`, font_faces)
-        .set_fill(fill_style)
-}
-
 const run = async () => {
     if (firstTime) {
         firstTime = false;
@@ -51,23 +45,51 @@ const run = async () => {
         svg.style.height = 'auto';
         canvasContainer.appendChild(canvas);
         canvasContainer.appendChild(svg);
+        data = new Uint8Array(await fetch('/latinmodern-math.otf').then(response => response.arrayBuffer()));
     }
-    const obj = new ParametricFunctionPlot(
+    const axes = new CartesianAxes(
+        new ClosedInterval(0, 10),
+        new ClosedInterval(0, 10),
+        new Point2D(960 - 400, 540 + 400),
+        new Point2D(960 + 400, 540 - 400),
+        Style.from_color(new Color(0, 0, 0, 1)),
+        5,
+        new Typst(`#show math.equation: set text(font: "Latin Modern Math")
+  #set page(fill: none)
+  $ x $`).vector_object_builder([new FontFace(data)]).scale(5, 5),
+        new Typst(`#show math.equation: set text(font: "Latin Modern Math")
+    #set page(fill: none)
+    $ y $`).vector_object_builder([new FontFace(data)]).scale(5, 5),
+        [new Tick(5, new Typst(`#show math.equation: set text(font: "Latin Modern Math")
+    #set page(fill: none)
+    $ 5 $`).vector_object_builder([new FontFace(data)]).scale(2.5, 2.5))]
+    );
+    const obj = axes.with_tips_at_ends(VectorObjectBuilder.default_tip_shape(50)).set_name('Axes').build();
+    scene.objects.push(obj);
+    const animations = new Map();
+    const plot = axes.plot_function(
         't',
-        'sin(t)',
-        new ClosedInterval(-10, 10),
-        new ClosedInterval(-10, 10),
-        new ClosedInterval(-1, 1),
-    ).vector_object_builder
+        't^2 / 10',
+        new ClosedInterval(0, 10),
+        new ClosedInterval(0, 10),
+        new ClosedInterval(0, 10),
+    );
+    const obj2 = plot.vector_object_builder
         .set_stroke(Style.from_color(new Color(255, 0, 0, 1)))
-        .set_stroke_width(1)
-        .set_name('ParametricFunctionPlot')
-        .scale_to_width(1920)
-        .move_to(new Point2D(960, 540))
+        .set_stroke_width(5)
+        .set_name('Plot')
         .build();
-    scene.objects.push(obj);
-    const animations = new Map();
-    animations.set('ParametricFunctionPlot', (old, t) => {
+    console.log(obj2.path);
+    scene.objects.push(obj2);
+    animations.set('Axes', (old, t) => {
+        if (t == 1) {
+            return old;
+        }
+        return new VectorObjectBuilder(old)
+            .become_partial(0, t)
+            .build();
+    });
+    animations.set('Plot', (old, t) => {
         if (t == 1) {
             return old;
         }

docs/AnchorsAndHandles.html

@@ -1,5 +1,5 @@
 {
   "dependencies": {
-    "@mathlikeanim-rs/renderer": "^0.14.12"
+    "@mathlikeanim-rs/renderer": "^0.14.13"
   }
 }