Mobject2D.fillZone -> Mobject2D.strokes

SeiyaCooper · Aug 18, 2024 · 5b91b89 · 5b91b89
1 parent 1c41ffb
commit 5b91b89
Show file tree

Hide file tree

Showing 12 changed files with 119 additions and 63 deletions.
diff --git a/site/pages/gallery/Magnetic Focus.astro b/site/pages/gallery/Magnetic Focus.astro
@@ -19,7 +19,7 @@ import Example from "../../layouts/Example.astro";
                 super(...args);
                 this.strength = strength;
                 this.strokeColor = mp.COLORS.GRAY_C;
-                this.fillColor = mp.COLORS.GRAY_D;
+                this.fillColor = mp.COLORS.GRAY_D.withRGBA({ a: 0.1 });
             }
 
             update() {
@@ -48,6 +48,10 @@ import Example from "../../layouts/Example.astro";
             }
         }
 
+        /// Init magnetic field
+        const field = new UniformMagneticField(new mp.Vector(0, 0, 1), 0, 0);
+        layer.add(field);
+
         /// Init charges
         const charges = [
             new Charge(1, -2, 0.8),
@@ -65,10 +69,6 @@ import Example from "../../layouts/Example.astro";
             charge.v = new mp.Vector(1, 0, 0);
         }
 
-        /// Init magnetic field
-        const field = new UniformMagneticField(new mp.Vector(0, 0, 1), 0, 0);
-        layer.add(field);
-
         /// Animation part
         /*
          * Locks FPS for more accurate output

diff --git a/src/geometry/Box.js b/src/geometry/Box.js
@@ -34,7 +34,7 @@ export default class Box extends Geometry {
             normals.push(...normal);
         }
 
-        const vertices = this.getAttributeVal("position");
+        const vertices = this.getAttributeVal("position") ?? [];
         const normal = [];
         const w = this.width,
             h = this.height,

diff --git a/src/geometry/Geometry.js b/src/geometry/Geometry.js
@@ -122,13 +122,32 @@ export default class Geometry extends Node {
     }
 
     /**
-     * Get value of an attribute variable
+     * Get value of an attribute variable.
      * @param {string} name
      * @param {number[]} data
      * @param {number} n
      */
     getAttributeVal(name) {
-        return this.attributes.get(name)?.data ?? [];
+        return this.attributes.get(name)?.data;
+    }
+
+    /**
+     * Clears all attribute variables.
+     * This method would not delete any attribute variable.
+     * Instead, it sets all of them to an empty array.
+     */
+    clearAttribute() {
+        for (let [name, val] of this.attributes) {
+            this.setAttribute(name, [], val.size);
+        }
+    }
+
+    /**
+     * Removes all attribute variables.
+     * This method will delete all attribute variables.
+     */
+    removeAllAttributes() {
+        this.attributes = new Map();
     }
 
     /**

diff --git a/src/material/Mobject2DMaterial.js b/src/material/Mobject2DMaterial.js
@@ -11,6 +11,8 @@ export default class Mobject2DMaterial extends Material {
         this.vertexShader = vertexShader;
         this.fragmentShader = fragmentShader;
         this.attachComponent(new GetColorComponent());
+
+        this.depthTest = false;
     }
 
     initProgram(gl) {

diff --git a/src/math/Complex.js b/src/math/Complex.js
@@ -7,6 +7,11 @@ export default class Complex extends Array {
         super(i, j);
     }
 
+    /**
+     * The imaginary unit.
+     */
+    static I = new Complex(0, 1);
+
     /**
      * Adds a complex number
      * @param {Complex} comp

diff --git a/src/mobjects/2D/Axes2D.js b/src/mobjects/2D/Axes2D.js
@@ -9,7 +9,7 @@ import * as COLORS from "../../constants/colors.js";
 export default class Axes2D extends Mobject2D {
     _tickLength = 0.08;
 
-    strokeWidth = 0.03;
+    strokeWidth = 0.02;
 
     /**
      * Creates an axes2d mobject
@@ -24,7 +24,7 @@ export default class Axes2D extends Mobject2D {
     } = {}) {
         super();
 
-        this.setColor(COLORS.BLUE_E);
+        this.setColor(COLORS.BLUE);
         this.origin = origin;
         this.xRange = xRange;
         this.yRange = yRange;

diff --git a/src/mobjects/2D/Mobject2D.js b/src/mobjects/2D/Mobject2D.js
@@ -1,4 +1,3 @@
-import Mobject3D from "../3D/Mobject3D.js";
 import Mobject from "../Mobject.js";
 import Color from "../../math/Color.js";
 import * as Utils from "../../utils/utils.js";
@@ -19,14 +18,17 @@ export default class Mobject2D extends Mobject {
 
     lineJoin = "miter";
 
-    material = new Mobject2DMaterial();
-    fillZone = new Mobject3D();
+    strokes = new Mobject();
 
     constructor() {
         super();
-        this.add(this.fillZone);
+        this.add(this.strokes);
+
         this.material.colorMode = "vertex";
-        this.fillZone.material.colorMode = "vertex";
+        this.material.depthTest = false;
+
+        this.strokes.material = new Mobject2DMaterial();
+        this.strokes.material.colorMode = "vertex";
     }
 
     /**
@@ -74,9 +76,8 @@ export default class Mobject2D extends Mobject {
     fill() {
         if (this.points.length !== 0) this.finish();
 
-        const fillZone = this.fillZone;
-        const vertices = fillZone.getAttributeVal("position") ?? [];
-        const colors = fillZone.getAttributeVal("color") ?? [];
+        const vertices = this.getAttributeVal("position") ?? [];
+        const colors = this.getAttributeVal("color") ?? [];
 
         for (let polygon of this.polygons) {
             if (polygon.length < 3) continue;
@@ -92,10 +93,9 @@ export default class Mobject2D extends Mobject {
             }
         }
 
-        fillZone.setColor(this.fillColor);
-        fillZone.setAttribute("position", vertices, 3);
-        fillZone.setAttribute("color", colors, 4);
-        fillZone.setIndex(vertices.length / 3);
+        this.setAttribute("position", vertices, 3);
+        this.setAttribute("color", colors, 4);
+        this.setIndex(vertices.length / 3);
     }
 
     /**
@@ -104,10 +104,11 @@ export default class Mobject2D extends Mobject {
     stroke() {
         if (this.points.length !== 0) this.finish();
 
-        const reverse = this.getAttributeVal("reverse") ?? [];
-        const vertices = this.getAttributeVal("position") ?? [];
-        const previous = this.getAttributeVal("previous") ?? [];
-        const colors = this.getAttributeVal("color") ?? [];
+        const strokes = this.strokes;
+        const reverse = strokes.getAttributeVal("reverse") ?? [];
+        const vertices = strokes.getAttributeVal("position") ?? [];
+        const previous = strokes.getAttributeVal("previous") ?? [];
+        const colors = strokes.getAttributeVal("color") ?? [];
 
         for (let polygon of this.polygons) {
             for (let i = 1; i < polygon.length; i++) {
@@ -139,12 +140,12 @@ export default class Mobject2D extends Mobject {
             }
         }
 
-        this.setAttribute("position", vertices, 3);
-        this.setAttribute("previous", previous, 3);
-        this.setAttribute("reverse", reverse, 1);
-        this.setAttribute("color", colors, 4);
-        this.setUniform("thickness", this.strokeWidth);
-        this.setIndex(this.getAttributeVal("position").length / 3);
+        strokes.setAttribute("position", vertices, 3);
+        strokes.setAttribute("previous", previous, 3);
+        strokes.setAttribute("reverse", reverse, 1);
+        strokes.setAttribute("color", colors, 4);
+        strokes.setUniform("thickness", this.strokeWidth);
+        strokes.setIndex(strokes.getAttributeVal("position").length / 3);
     }
 
     draw() {}
@@ -182,13 +183,8 @@ export default class Mobject2D extends Mobject {
     }
 
     clearBuffer() {
-        this.setAttribute("position", [], 3);
-        this.setAttribute("previous", [], 3);
-        this.setAttribute("reverse", [], 1);
-        this.setAttribute("color", [], 4);
-
-        this.fillZone.setAttribute("position", [], 3);
-        this.fillZone.setAttribute("color", [], 4);
+        this.clearAttribute();
+        this.strokes.clearAttribute();
     }
 
     finish() {
@@ -224,23 +220,35 @@ export default class Mobject2D extends Mobject {
                 toPoints = [];
             let fromPrevious = [],
                 toPrevious = [];
+            let fromFillPoints = [],
+                toFillPoints = [];
+
+            const strokes = this.strokes;
             const config = {
                 start: () => {
-                    fromPoints = this.getPoints();
+                    fromPoints = strokes.getPoints();
                     for (let point of fromPoints) {
                         toPoints.push(...trans(Vector.fromArray(point)));
                     }
                     fromPoints = fromPoints.flat(1);
 
-                    fromPrevious = this.attr2Array("previous");
+                    fromPrevious = strokes.attr2Array("previous");
                     for (let point of fromPrevious) {
                         toPrevious.push(...trans(Vector.fromArray(point)));
                     }
                     fromPrevious = fromPrevious.flat(1);
+
+                    fromFillPoints = this.attr2Array("position");
+                    for (let point of fromFillPoints) {
+                        toFillPoints.push(...trans(Vector.fromArray(point)));
+                    }
+                    fromFillPoints = fromFillPoints.flat(1);
                 },
                 update: (p) => {
-                    this.setAttribute("position", MathFunc.lerpArray(fromPoints, toPoints, p), 3);
-                    this.setAttribute("previous", MathFunc.lerpArray(fromPrevious, toPrevious, p), 3);
+                    strokes.setAttribute("position", MathFunc.lerpArray(fromPoints, toPoints, p), 3);
+                    strokes.setAttribute("previous", MathFunc.lerpArray(fromPrevious, toPrevious, p), 3);
+
+                    this.setAttribute("position", MathFunc.lerpArray(fromFillPoints, toFillPoints, p), 3);
                 },
                 ...configs,
             };

diff --git a/src/mobjects/2D/Polygon.js b/src/mobjects/2D/Polygon.js
@@ -21,5 +21,6 @@ export default class Polygon extends Mobject2D {
 
     draw() {
         this.stroke();
+        this.fill();
     }
 }
diff --git a/src/mobjects/2D/Square.js b/src/mobjects/2D/Square.js
@@ -1,6 +1,10 @@
+import * as COLORS from "../../constants/colors.js";
 import RegularPolygon from "./RegularPolygon.js";
 
 export default class Square extends RegularPolygon {
+    strokeColor = COLORS.BLUE_A.clone();
+    fillColor = COLORS.BLUE.clone().withRGBA({ a: 0.3 });
+
     /**
      * Creates a square.
      * @param {Object} configs

diff --git a/src/mobjects/2D/VectorField2D.js b/src/mobjects/2D/VectorField2D.js
@@ -28,7 +28,7 @@ export default class VectorField2D extends Mobject2D {
     update() {
         this.clearGraph();
 
-        const fillZone = this.fillZone;
+        const strokes = this.strokes;
         const func = this.func;
         const xRange = this.xRange;
         const yRange = this.yRange;
@@ -40,14 +40,14 @@ export default class VectorField2D extends Mobject2D {
                 arrow.setColor(this.colorFunc(x, y, length));
                 arrow.update();
 
-                this.mergeAttributes(arrow, "position", "previous", "reverse", "color");
-                fillZone.mergeAttributes(arrow.fillZone, "position", "color");
+                this.mergeAttributes(arrow, "position", "color");
+                strokes.mergeAttributes(arrow.strokes, "position", "previous", "reverse", "color");
             }
         }
 
-        this.setUniform("thickness", this.strokeWidth);
         this.setIndex(this.getAttributeVal("position").length / 3);
-        fillZone.setIndex(fillZone.getAttributeVal("position").length / 3);
+        strokes.setUniform("thickness", this.strokeWidth);
+        strokes.setIndex(strokes.getAttributeVal("position").length / 3);
     }
 
     setColor(color) {

diff --git a/src/mobjects/Mobject.js b/src/mobjects/Mobject.js
@@ -22,6 +22,8 @@ export default class Mobject extends Geometry {
     constructor() {
         super();
         this.material.colorMode = "vertex";
+
+        this.setAttribute("position", [], 3);
     }
 
     /**
@@ -96,6 +98,7 @@ export default class Mobject extends Geometry {
      * @returns {number[][]}
      */
     attr2Array(name) {
+        console.log(name, this);
         const vertices = this.getAttributeVal(name);
         const size = this.attributes.get(name).size;
         const out = [];