add parametric function plot functionality

Author: MathItYT

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "mathlikeanim-rs"
-version = "0.14.9"
+version = "0.14.12"
 edition = "2021"
 readme = "README.md"
 description = "A Rust library for creating mathematical animations"
@@ -31,6 +31,7 @@ categories = ["mathematics", "graphics", "wasm"]
 
 [dependencies]
 base64 = "0.22.1"
+exmex = "0.20.3"
 image = "0.25.5"
 typst = "0.13.0"
 typst-as-lib = "0.12.0"

Cargo.toml

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

docs/AnchorsAndHandles.html

@@ -1,5 +1,5 @@
-import init, { Color, Point2D, Style, VectorObjectBuilder, ImageLibrary, IntegerLerp, FontFace, Typst, Rectangle, BoundingBox, Circle, LinearGradient, ColorStop, VectorObject, RadialGradient, ImageBitmap, ImageData } from '@mathlikeanim-rs/mathlikeanim-rs'
-import { CanvasScene, SVGScene } from '@mathlikeanim-rs/renderer';
+import init, { Color, Point2D, Style, VectorObjectBuilder, ParametricFunctionPlot, ClosedInterval } from '@mathlikeanim-rs/mathlikeanim-rs'
+import { CanvasScene } from '@mathlikeanim-rs/renderer';
 
 const scene = new CanvasScene(1920, 1080);
 const renderButton = document.getElementById('render-button');
@@ -52,143 +52,32 @@ const run = async () => {
         canvasContainer.appendChild(canvas);
         canvasContainer.appendChild(svg);
     }
-    scene.objects.forEach(obj => obj.free());
-    scene.objects = [];
-    // const obj = new Circle(
-    //     new Point2D(960, 540),
-    //     500,
-    // )
-    //     .vector_object_builder()
-    //     .set_fill(Style.from_color(new Color(255, 0, 0, 0.5)))
-    //     .set_stroke(Style.from_color(new Color(255, 0, 0, 1)))
-    //     .set_stroke_width(0.05)
-    //     .set_name('Circle')
-    //     .build();
-    // scene.objects.push(new Rectangle(new BoundingBox(0, 0, 1920, 1080)).vector_object_builder.set_fill(Style.from_color(new Color(0, 0, 0, 1))).build());
-    // scene.objects.push(obj);
-    // const animations = new Map();
-    // animations.set('Circle', (old, t) => {
-    //     if (t == 1) {
-    //         return new VectorObjectBuilder(old)
-    //             .set_fill(Style.from_color(new Color(255, 255, 0, 0.5)))
-    //             .set_stroke(Style.from_color(new Color(255, 255, 0, 1)))
-    //             .set_name('Circle')
-    //             .build();
-    //     }
-    //     const drawPathT = new IntegerLerp(0, 2, t);
-    //     return new VectorObjectBuilder(old)
-    //         .become_partial(0, drawPathT.index === 0 ? drawPathT.remainder : 1)
-    //         .fade_fill(drawPathT.index === 0 ? 1 : 1 - drawPathT.remainder)
-    //         .lerp_fill(Style.from_color(new Color(255, 255, 0, 0.5)), drawPathT.index === 0 ? 0 : drawPathT.remainder)
-    //         .lerp_stroke(Style.from_color(new Color(255, 255, 0, 1)), drawPathT.index === 0 ? 0 : drawPathT.remainder)
-    //         .set_name('Circle')
-    //         .build();
-    // });
-    // await scene.play(animations, 2000, t => t);
-    // const animations2 = new Map();
-    // animations2.set('Circle', (old, t) => {
-    //     return new VectorObjectBuilder(old)
-    //         .lerp_fill(Style.from_linear_gradient(new LinearGradient(
-    //             new Point2D(-1, -1),
-    //             new Point2D(1, 1),
-    //             [
-    //                 new ColorStop(new Color(255, 0, 0, 0.5), 0),
-    //                 new ColorStop(new Color(255, 255, 0, 0.5), 0.5),
-    //                 new ColorStop(new Color(255, 0, 255, 0.5), 1)
-    //             ]
-    //         )), t)
-    //         .lerp_stroke(Style.from_linear_gradient(new LinearGradient(
-    //             new Point2D(-1, -1),
-    //             new Point2D(1, 1),
-    //             [
-    //                 new ColorStop(new Color(255, 0, 0, 1), 0),
-    //                 new ColorStop(new Color(255, 255, 0, 1), 0.5),
-    //                 new ColorStop(new Color(255, 0, 255, 1), 1)
-    //             ]
-    //         )), t)
-    //         .set_name('Circle')
-    //         .build();
-    // });
-    // await scene.play(animations2, 2000, t => t);
-    // // const animations3 = new Map();
-    // // animations3.set('Circle', (old, t) => {
-    // //     console.log(t);
-    // //     return new VectorObjectBuilder(old)
-    // //         .lerp_fill(Style.from_radial_gradient(
-    // //             new RadialGradient(
-    // //                 new Point2D(0, 0),
-    // //                 new Point2D(0, 0),
-    // //                 1,
-    // //                 [
-    // //                     new ColorStop(new Color(255, 0, 0, 0.5), 0),
-    // //                     new ColorStop(new Color(255, 255, 0, 0.5), 1)
-    // //                 ]
-    // //             )), t, 100, 100)
-    // //         .lerp_stroke(
-    // //             Style.from_radial_gradient(
-    // //                 new RadialGradient(
-    // //                     new Point2D(960, 540),
-    // //                     new Point2D(960, 540),
-    // //                     500,
-    // //                     [
-    // //                         new ColorStop(new Color(255, 0, 0, 1), 0),
-    // //                         new ColorStop(new Color(255, 255, 0, 1), 1)
-    // //                     ]
-    // //                 )), t, 100, 100)
-    // //         .build();
-    // // });
-    // // await scene.play(animations3, 2000, t => t);
-    // let c = new VectorObjectBuilder(scene.objects[1])
-    //     .set_fill(Style.from_image(ImageBitmap.fill_linear_gradient(
-    //         -2,
-    //         -2,
-    //         4,
-    //         4,
-    //         300,
-    //         300,
-    //         new LinearGradient(
-    //             new Point2D(-1, -1),
-    //             new Point2D(1, 1),
-    //             [
-    //                 new ColorStop(new Color(255, 0, 0, 0.5), 0),
-    //                 new ColorStop(new Color(255, 255, 0, 0.5), 0.5),
-    //                 new ColorStop(new Color(255, 0, 255, 0.5), 1)
-    //             ]
-    //         )
-    //     )))
-    //     .set_stroke(Style.from_image(ImageBitmap.fill_linear_gradient(
-    //         -2,
-    //         -2,
-    //         4,
-    //         4,
-    //         300,
-    //         300,
-    //         new LinearGradient(
-    //             new Point2D(-1, -1),
-    //             new Point2D(1, 1),
-    //             [
-    //                 new ColorStop(new Color(255, 0, 0, 1), 0),
-    //                 new ColorStop(new Color(255, 255, 0, 1), 0.5),
-    //                 new ColorStop(new Color(255, 0, 255, 1), 1)
-    //             ]
-    //         )
-    //     )))
-    //     .build();
-    // scene.objects[1] = c;
-    // scene.render();
-    const imageLibrary = new ImageLibrary();
-    const data = await fetch('mdn_logo_only_color.png').then(res => res.arrayBuffer()).then(buffer => new Uint8Array(buffer));
-    imageLibrary.set('mdn_logo_only_color.png', new ImageData(data));
-    const obj = text('Hello, World!', 960, 540, 100, 'Latin Modern Math', Style.from_color(new Color(0, 0, 0, 1)), [new FontFace(new Uint8Array(await fetch('latinmodern-math.otf').then(res => res.arrayBuffer())))]).set_name('Text').build();
+    const obj = new ParametricFunctionPlot(
+        't',
+        'sin(t)',
+        new ClosedInterval(-10, 10),
+        new ClosedInterval(-10, 10),
+        new ClosedInterval(-1, 1),
+    ).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))
+        .build();
     scene.objects.push(obj);
     const animations = new Map();
-    animations.set('Text', (old, t) => {
+    animations.set('ParametricFunctionPlot', (old, t) => {
+        if (t == 1) {
+            return old;
+        }
         return new VectorObjectBuilder(old)
-            .lerp_fill(Style.from_color(new Color(255, 0, 0, 1)), t)
-            .set_name('Text')
+            .become_partial(0, t)
             .build();
     });
     await scene.play(animations, 2000, t => t);
+    scene.objects.forEach(obj => obj.free());
+    scene.objects = [];
 };
 
 const onClick = async () => {

docs/Arc.html

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

docs/BoundingBox.html

@@ -69,6 +69,7 @@ impl Arc {
             .set_path(path)
             .scale(self.radius, self.radius, None, None)
             .shift(self.center.x, self.center.y, None)
+            .actual_path_as_path(None, None)
     }
 
     /// Returns the center point of the arc.

docs/Circle.html

@@ -1,3 +1,4 @@
 pub mod vector_object;
 pub mod geometry;
-pub mod typesetting;
+pub mod typesetting;
+pub mod plotting;