Cohesion perf work.

8 years ago · 779afc5aa6
parent 3cd03243db
commit 779afc5aa6
6 changed files with 23 additions and 28 deletions
--- a/index.html
+++ b/index.html
@ -3,7 +3,6 @@
 <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
-    <script src='/core/js/ui.js'></script>
 </head>
 <body>
    <h1>Dust</h1>
@ -83,5 +82,6 @@
    </div>

    <script src='js/bundle.js'></script>
+    <script src='/core/js/ui.js'></script>
 </body>
 </html>
--- a/js/animation3a.js
+++ b/js/animation3a.js
@ -9,13 +9,11 @@ function Animation3a() {
        cohesion: true,
        count: 10,
        maxCount: 1000,
-        showVisionGrid: true,
+        showVisionGrid: false,
        speed: 4
    };

    this.container = document.getElementById('animation3a');
-    this.bounds = this.container.getBoundingClientRect();
-
    this.particles = [];
    this.globalGrid = new Grid();

@ -31,13 +29,11 @@ function Animation3a() {

    // TODO get "top" leader, once...don't update each time?
    // TODO if leader sees follower, assign to this leader?
-    // TODO X dimension modified by core UI, maybe recalc grid in animation start?
    // TODO remove bottom padding from Disqus
    // TODO ANIM2ab randomize hazards
    // TODO fix "hangup" small radius evade bug

    // TODO ANIM3a perf Scale vision grid to 1000 particles
-    // TODO ANIM3a circular leadership
    // TODO hazard grid, particles grid
    // TODO completely seal Particle

@ -78,12 +74,14 @@ Animation3a.prototype.updateAnimating = function(isAnimating) {
 }

 Animation3a.prototype.updateCount = function(count) {
+    const bounds = this.container.getBoundingClientRect();
+
    while (this.particles.length > count) {
        delete this.particles.pop().remove();
    }

    while (this.particles.length < count) {
-        const p = new Particle(this.container, this.bounds, this.options, this.globalGrid);
+        const p = new Particle(this.container, bounds, this.options, this.globalGrid);
        this.particles.push(p);
    }
 }
--- a/js/arc.js
+++ b/js/arc.js
@ -30,7 +30,7 @@ const Arc = {
        return arc;
    },

-    step: function(arc, { bounds, speed }) {
+    step: function(arc, bounds, speed) {
        // Ensure constant velocity and theta between 0 and 2π.
        const delta = speed / arc.radius;
        arc.length -= delta;
--- a/js/bundle.js
+++ b/js/bundle.js
--- a/js/index.js
+++ b/js/index.js
@ -15,4 +15,7 @@ require('../css/controls.scss');
 // new Animation1b();
 // new Animation2a();
 // new Animation2b();
-new Animation3a();
+
+window.addEventListener('load', () => {
+    new Animation3a();
+});
--- a/js/particle.js
+++ b/js/particle.js
@ -61,15 +61,12 @@ Particle.prototype.remove = function() {
 }

 Particle.prototype.nextFrame = function(globalGrid) {
-    // Randomly change radius and rotation direction.
-    if (this.arc.length <= 0 && this.config.randomize) {
-        this.arc = Arc.randomize(this.arc);
-    }
-
-    this.arc = Arc.step(this.arc, this.config);
+    this.arc = Arc.step(this.arc, this.config.bounds, this.config.speed);

    if (this.leader !== null) {
        this.arc = Arc.follow(this.arc, this.leader.arc);
+    } else if (this.arc.length <= 0 && this.config.randomize) {
+        this.arc = Arc.randomize(this.arc);
    }

    this.grids.global = globalGrid;
@ -78,6 +75,7 @@ Particle.prototype.nextFrame = function(globalGrid) {
    const { hazards, particles } = look(this.arc, this.grids);

    if (this.leader === null && particles.length > 0) {
+        // Beware of circular leadership, where a leader sees its tail.
        const candidates = particles
            .filter(v => v.leader ? (v.leader.id !== this.id) : true);

@ -85,10 +83,8 @@ Particle.prototype.nextFrame = function(globalGrid) {

        if (leader !== undefined) {
            leader.isLeader = true;
-
            // console.log(`${this.id} is now following ${leader.id}`);

-            this.isLeader = false;
            this.leader = leader;
        }
    }
@ -134,15 +130,13 @@ Particle.prototype.updateLeader = function() {
        return;
    }

-    while (this.leader.leader !== null) {
-        this.leader.isLeader = false;
+    if (this.leader.leader !== null) {
        this.leader = this.leader.leader;
-        // console.error(this.id, 'is now following', this.leader.id)
+        // console.warn(`${this.id} is now following ${this.leader.id}`);
    }

-    // Prevents circular leadership, where a leader sees its tail.
-    if (this.leader.id === this.id) {
-        this.leader = null;
+    if (this.leader !== null && this.isLeader) {
+        this.isLeader = false;
    }
 }

@ -196,7 +190,7 @@ function createContainerNode(config, id) {
 function createVisionGrid(config) {
    const { gridSize: side, visionRadius: radius } = config;
    const r0 = radius;
-    const r1 = 30;
+    const r1 = 45;

    const points = [];