Gravity example: Implemented coloring by velocity

examples/gravity/index.js

@@ -1,7 +1,7 @@
 import {Bootstrap} from "../common/bootstrap.js";
 import {ResistanceForce} from "../../lib/physics/force.js";
 import {InsetConstraint} from "../../lib/physics/constraint.js";
-import {GravityComponentType, GravityExampleSettings} from "./settings.js";
+import {GravityComponentType, GravityExampleSettings, ParticleColoringType} from "./settings.js";
 import {SettingsController} from "../common/ui/controllers/settings.js";
 import {Dialog, DialogPositionEnum, DialogTypeEnum} from "../common/ui/controls/dialog.js";
 import {Button} from "../common/ui/controls/button.js";
@@ -12,6 +12,8 @@ import {GravityRender} from "./render.js";
 import {updateUrl} from "../common/utils.js";
 import * as Utils from "../common/utils.js";
 import {SolverSettings} from "../common/settings/solver.js";
+import * as ColorUtils from "../../lib/utils/color.js";
+import {Vector2} from "../../lib/utils/vector.js";
 
 SolverSettings.Properties.bias.defaultValue = 0.5;
 SolverSettings.Properties.beta.defaultValue = 1;
@@ -52,10 +54,9 @@ const RenderInstance = new GravityRender(document.getElementById("canvas"), Sett
 const BootstrapInstance = new Bootstrap(
     RenderInstance.renderer,
     Settings,
-    //Object.assign({solverBias: 0.5, solverBeta: 1}, options)
 );
 
-RenderInstance.initialize();
+RenderInstance.initialize(BootstrapInstance);
 const GravityInstance = new GravityPhysics(BootstrapInstance, Settings);
 const WorldInstance = new GravityWorld(BootstrapInstance, Settings);
 await WorldInstance.initialize();
@@ -102,6 +103,8 @@ async function reconfigure(newSettings) {
 }
 
 // noinspection InfiniteLoopJS
+let max_speed = 1000;
 while (true) {
+    await BootstrapInstance.requestRenderFrame(RenderInstance.renderStep.bind(RenderInstance));
     await BootstrapInstance.requestPhysicsFrame(GravityInstance.gravityStep.bind(GravityInstance));
 }

examples/gravity/render.js

@@ -1,10 +1,15 @@
 import {WebglRenderer} from "../../lib/render/renderer/webgl/renderer.js";
 import {m4} from "../../lib/render/renderer/webgl/utils/m4.js";
+import {ParticleColoringType} from "./settings.js";
+import {Vector2} from "../../lib/utils/vector.js";
+import * as ColorUtils from "../../lib/utils/color.js";
 
 export class GravityRender {
     matrix = null;
     canvasMatrix = null;
+    maxSpeed = 0
 
+    bootstrap;
     renderer;
     settings;
 
@@ -18,7 +23,9 @@ export class GravityRender {
         this.renderer = new WebglRenderer(element, settings.renderer);
     }
 
-    initialize() {
+    initialize(bootstrap) {
+        this.bootstrap = bootstrap;
+
         let projMatrix = m4.projection(this.renderer.canvasWidth, this.renderer.canvasHeight, 2);
         projMatrix = m4.translate(projMatrix, this.renderer.canvasWidth / 2, this.renderer.canvasHeight / 2, 0);
         projMatrix = m4.scale(projMatrix, 1 / this.settings.world.worldScale, 1 / this.settings.world.worldScale, 1);
@@ -42,6 +49,21 @@ export class GravityRender {
 
     reconfigure(settings) {
         this.settings = settings;
-        this.initialize();
+        this.initialize(this.bootstrap);
+    }
+
+    renderStep() {
+        if (this.settings.render.particleColoring !== ParticleColoringType.velocity) return;
+
+        for (let body of this.bootstrap.rigidBodies) {
+            if (body.tag !== "particle") continue;
+
+            const renderer = this.bootstrap.getRenderObject(body);
+
+            this.maxSpeed = Math.max(Math.abs(body.velocity.x), Math.abs(body.velocity.y), this.maxSpeed);
+            const color = body.velocity.scaled(1 / this.maxSpeed * 0.5).add(new Vector2(0.5, 0.5));
+            renderer.color = ColorUtils.rgbToHex(color.x, 0.5, color.y);
+        }
+
     }
 }

examples/gravity/settings.js

@@ -39,6 +39,15 @@ class ParticleSettings extends SettingsBase {
     }
 }
 
+/**
+ * @enum {string}
+ */
+export const ParticleColoringType = {
+    randomColor: "randomColor",
+    velocity: "velocity",
+    none: "none",
+}
+
 class RenderSettings extends SettingsBase {
     static Properties = {
         particleScale: Property.float("p_scale", 20)
@@ -52,9 +61,9 @@ class RenderSettings extends SettingsBase {
         particleBlending: Property.bool("blend", true)
             .setName("Particle Blending")
             .setAffects(GravityComponentType.renderer),
-        particleColoring: Property.bool("color", true)
+        particleColoring: Property.enum("color", ParticleColoringType, ParticleColoringType.velocity)
             .setName("Particle Coloring")
-            .setAffects(GravityComponentType.particleLook),
+            .setAffects(GravityComponentType.particleLook, GravityComponentType.renderer),
         particleTextureUrl: Property.string("tex", new URL("./sprites/particle.png", import.meta.url).toString())
             .setName("Particle texture url")
             .setBreaks(GravityComponentType.particleLook),

examples/gravity/world.js

@@ -4,6 +4,7 @@ import {CircleBody} from "../../lib/physics/body/circle.js";
 import {SpriteObject} from "../../lib/render/renderer/webgl/objects/sprite.js";
 import {BoundaryBox} from "../../lib/physics/common/boundary.js";
 import {ImageTexture} from "../../lib/render/renderer/webgl/misc/texture.js";
+import {ParticleColoringType} from "./settings.js";
 
 export class GravityWorld {
     bootstrap;
@@ -117,10 +118,12 @@ export class GravityWorld {
 
             const renderer = this.bootstrap.getRenderObject(particle);
             if (updateLook) {
-                if (this.settings.render.particleColoring) {
+                if (this.settings.render.particleColoring === ParticleColoringType.randomColor) {
                     renderer.color = Utils.randomColor(170, 255);
-                } else {
+                } else if (this.settings.render.particleColoring === ParticleColoringType.none) {
                     renderer.color = "#ffffff";
+                } else {
+                    renderer.color = "#000000";
                 }
 
                 renderer.opacity = this.settings.render.particleOpacity;