physics updated

src/css/main.css

@@ -42,7 +42,7 @@ html, body
     outline: 1px solid #2c2c2c;
     outline-offset: -1px;
 
-    touch-action: pinch-zoom;
+    // touch-action: pinch-zoom;
 }
 
 .buttons

src/js/engine/display.js

@@ -11,6 +11,7 @@ class display
 
     draw()
     {
+        /* particle */ this.engine.particles.forEach(arr => arr.forEach(p => p.drawSnake()))
         this.engine.particles.forEach(arr => arr.forEach(p => p.draw()))
     }
 
@@ -20,18 +21,18 @@ class display
         if(pos.x >= 0 && pos.x < this.size.width && pos.y >= 0 && pos.y < this.size.height) return false; else return true
     }
 
-    randomPos()
+    randomPos(s=this.size.width/10)
     {
-        if(vars.centerParticles) return this.randomMidPos()
+        if(vars.centerParticles) return this.randomMidPos(s)
         return { 
         x: Math.random() * this.size.width, 
         y: Math.random() * this.size.height }
     }
 
-    randomMidPos()
+    randomMidPos(s)
     {
         let mid = {x: this.size.width/2, y: this.size.height/2}
-        let size = 100;
+        let size = s;
         return {
             x: mid.x + (Math.random()*size) - (size/2),
             y: mid.y + (Math.random()*size) - (size/2) }

src/js/engine/engine.js

@@ -5,7 +5,6 @@ class engine
     constructor(containerID)
     {
         this.display = new display(containerID, this)
-        this.particles = [] // 2d array
         this.vars()
     }
 
@@ -16,101 +15,54 @@ class engine
 
     particleInit()
     {
+        this.particles = [] // 2d array
+
         let num = vars.particleColorCount
         let len = vars.particleCount
+        let dim = [num, len];
 
         this.rules = {
-            colorCount : num,
-            colors: this.createColors(num),
-            mass : this.createMasses(num),
-            force : this.createForces(num)
+            colors :  this.randomColor(dim),
+            mass   :  this.randomMass(dim), // .map((arr, i) => i==0 ? [20] : arr),
+            force  :  this.randomForce([num, num]), // .map((arr,i) => i==0 ? arr.fill(0) : arr)
         }
 
-        // this.rules =  
+        // this.rules = 
 
-
-        this.createGroups(this.rules.colorCount, len)
+        this.createGroups(dim)
     }
 
-    createGroups(num, size)
-    {
-        this.particles = []
-        let created = []
-        for(let a = 0; num > a; a++)
-        {
-            created.push(this.createParticles(size, this.randomColor() ))
-        }
-
-        this.applyMasses()
-        this.applyColors()
-
-        return created
-    }
+    randomColor(dim)      { return this.createArray(dim[0], get.randomColor) }
+    randomMass(dim)       { let scale = 0.5; let min =  3*scale; let max = 7*scale; return this.createArray(dim[0], Math.random).map(n => n * (max-min) + min) }
+    randomForce(dim)      { let scale = 1; let min = scale * -1; let max = scale; return this.create2dArray(dim, Math.random).map(arr => arr.map(n => n * (max-min) + min)) }
 
-    createParticles(n, color="white")
+    createGroups(dim)
     {
-        let created = []
-        for(let a = 0; n > a; a++)
-        {
-            created.push(
-            new particle(this.display, this.display.randomPos(), color ))
-        }
-        this.particles.push(created)
-        return created
+        this.particles = new Array(dim[0]).fill(0).map(e => new Array(dim[1]).fill(0).map(e2 =>
+                new particle(this.display, this.display.randomPos())
+            ))
+
+        this.applyChanges("mass", this.rules.mass, true)
+        this.applyChanges("color", this.rules.colors, true)
     }
 
-    createColors(len)
-    {
-        let colors = []
-        for(let a = 0; a < len; a++)
-        {
-            colors.push(this.randomColor())
-        }
-        return colors
-    }
+    createArray(lem, func) { return new Array(lem).fill(0).map(e => func() ) }
 
-    applyColors()
+    create2dArray(dim, func)
     {
-        let colors = this.rules.colors
-        this.particles.forEach((arr, i) => arr.forEach(p => {p.color = colors[i]} ))
+        return new Array(dim[0]).fill(0).map(e => 
+            new Array(dim[1]).fill(0).map(e2 => 
+                func()
+            )
+        )
     }
 
-    createMasses(len)
+    applyChanges(element, val, groupChanges=false)
     {
-        let mass = []
-        let minMass = 0.2
-        let maxMass = 0.7
-        let rMass = maxMass - minMass
-
-        for(let a = 0; a < len; a++)
-        {
-            mass.push(Math.random()*rMass+minMass)
-        }
-        return mass
+        if(groupChanges) this.particles.forEach((arr, i) => arr.forEach((p, i2) => {p[element] = val[i]} ))
+        else this.particles.forEach((arr, i) => arr.forEach((p, i2) => {p[element] = val[i][i2]} ))
     }
 
-    applyMasses()
-    {
-        let mass = this.rules.mass
-        this.particles.forEach((arr, i) => arr.forEach(p => {p.mass = mass[i]} ))
-    }
-
-    createForces(size)
-    {
-        let forces = [];
-        let force = 2 * 1
-
-        for(let p = 0; p < size; p++)
-        {
-            forces[p] = [];
-
-            for(let p2 = 0; p2 < size; p2++)
-            {
-                forces[p].push(Math.random()*force-force/2)
-            }
-        }
-        return forces;
-    }
 
     applyForces()
     {
@@ -121,7 +73,7 @@ class engine
         {
             for(let p2 in part)
             {
-                this.rule(part[p], part[p2], force[p][p2])
+                this.rule(part[p], part[p2], force[p][p2]/**/)
             }
         }
     }
@@ -139,6 +91,7 @@ class engine
 
     rule(par, par2, g)
     {
+        // g = 0.5; // Math.random()*6.674;
         let noWall = vars.noWall
 
         let width = this.display.size.width
@@ -160,6 +113,7 @@ class engine
 
                 if(noWall)
                 {
+                    limit = 500
                     if(a.x > width - limit && b.x < limit) { b.x += width }
                     else if(a.x < limit && b.x > width - limit) { b.x -= width }
                     if(a.y > height - limit && b.y < limit) { b.y += height }
@@ -169,40 +123,27 @@ class engine
                 let d = {x: (b.x-a.x), y: (b.y-a.y)}
                 let dist = Math.sqrt(d.x**2 + d.y**2)
 
-                if(dist >= 0 && dist <= limit)
+                // GRAVITY CODE 
+
+                // if(dist < p2.mass*10) continue; // (1 / .5 = 2)
+
+                if(dist < limit)
                 {
-                    let fr = g * p2.mass
-
-                    let size = limit*vars.particleScale // (p2.mass + p.mass)*10/2
-
-                    let attrLen = limit - size
-                    let mid = vars.particleForceMid
-                    let attrMid = attrLen*mid
-                    let attrPos = dist - size
-
-                    let attraction = 0
-                    let repulstion = 1-(dist/size)
+                    let fr = (g * p2.mass * p.mass) / dist**2
 
-                    if(attrPos <= attrMid)
+                    /* collision */ let scale = this.display.ui.uiScale*4; let collisionD = p2.mass*scale+p.mass*scale;
+                    if(dist <= collisionD)
                     {
-                        attraction = attrPos/attrMid
+                        fr *= fr < 0 ? 1 : -1;
                     }
-                    else if(attrPos > attrMid)
-                    {
-                        attraction = 1-(attrPos-attrMid)/(limit-attrMid) // 1−((12−10)÷(20−10))
-                    }
-                    if(attraction == "-Infinity") attraction = 0;
-                    if(fr > 0) repulstion *= -1
-
-                    attraction *= 1
-                    repulstion *= 1
+                    // fr = fr * (dist/limit)
 
-                    if(dist <= size) {frc.x += fr * repulstion * (d.x/dist) / p.mass}
-                    else             {frc.x += fr * attraction * (d.x/dist) / p.mass}
-                    if(dist <= size) {frc.y += fr * repulstion * (d.y/dist) / p.mass}
-                    else             {frc.y += fr * attraction * (d.y/dist) / p.mass}
+                    frc.x += (fr * d.x) / p.mass
+                    frc.y += (fr * d.y) / p.mass
 
                 }
+
+                // END OF GRAVITY CODE
             }
 
             let velo = get.addPos(p.velo, frc)
@@ -229,24 +170,9 @@ class engine
 
             if(!(noWall)) // wall repultion
             {
-                if(p.pos.x <= 0 || p.pos.x >= width){p.velo.x *= -1}
-                if(p.pos.y <= 0 || p.pos.y >= height){p.velo.y *= -1}
+                if(p.pos.x <= 0 || p.pos.x >= width){p.velo.x *= -0.5}
+                if(p.pos.y <= 0 || p.pos.y >= height){p.velo.y *= -0.5}
             }
         }
     }
-
-    randomColor()
-    {
-        let r = random()
-        let g = random()
-        let b = random()
-
-        return "rgb("+r+", "+g+", "+b+")"
-
-        function random()
-        {
-            let brightness = 100;
-            return parseInt(Math.random()*(255-brightness)+brightness);
-        }
-    }
 }

src/js/engine/particle.js

@@ -1,20 +1,32 @@
 
 class particle
 {
-    constructor(screen, pos, color="black")
+    constructor(screen, pos, mass=1, color="green")
     {
         this.screen = screen
         this.pos = pos
-        this.velo = {x:0, y:0}
-        this.mass = .4 // Math.random()*0.5+0.2 // Math.random()*0.3+0.2
+        this.velo = {x:(Math.random()-0.5), y:(Math.random()-0.5)}
+        this.mass = mass // Math.random()*0.5+0.2 // Math.random()*0.3+0.2
         this.color = color
+
+        this.snakeInit()
     }
 
-    addVelocity()
+    snakeInit() { this.snakeLength = 100; this.snake = [] }
+
+    snakeMove() { if(this.snake.length >= this.snakeLength) this.snake.shift(); this.snake.push(this.pos); }
+
+    drawSnake()
     {
-        this.pos.x += this.velo.x
-        this.pos.y += this.velo.y
-        // this.velo = {x:0, y:0}
+        return;
+        this.snakeMove();
+        let c = this.color.split(",").map(s => parseInt(s.replace(/\D/g, '')) );
+        for(let a = 0; a < this.snake.length-1; a++)
+        {
+            let opacity = (a / this.snake.length)*1;
+            let color = "rgba("+c[0]+", "+c[1]+", "+c[2]+", "+opacity+")";
+            this.screen.ui.drawLine(this.snake[a], this.snake[a+1], color, this.mass*this.screen.ui.uiScale/10)
+        }
     }
 
     draw()

src/js/main.js

@@ -1,10 +1,8 @@
 
-
 let test = new engine("container")
 
 let interval = setInterval(run, 1000/vars.fps);
 
-
 function run()
 {
     if(vars.clean) test.display.ui.clean();

src/js/tools/get.js

@@ -3,32 +3,36 @@ class get
 {
     static addPos(...pos)
     {
-        let initial = {x:0, y:0};
-
         return pos.reduce((sumPos, pos) =>
             {
                 let x = {
                     x: sumPos.x + pos.x,
                     y: sumPos.y + pos.y
                 }; return x
-            }, initial)
+            }, {x:0, y:0} )
+    }
+
+    static randomColor()
+    {
+        let brightness = 100;
+        let r = random(); let g = random(); let b = random()
+        return "rgb("+r+", "+g+", "+b+")"
+        function random(min=brightness, max=255) { return parseInt(Math.random()*(max-min)+min); }
     }
 }
 
 class vars
 {
     static clean = 1; // 0 false | 1 true
     static fps = 60;
-    static displaySize = 1080;
+    static displaySize = 1600;
 
-    static radius = 170;
-    static particleScale = 0.3;
-    static particleForceMid = 0.5;
-    static valocity = 0.5;
-    static noWall = true; // fps drop (need to optimize)
+    static radius = 100;
+    static valocity = 0.9;
+    static noWall = false; // fps drop (need to optimize)
 
     static centerParticles = true;
-    static totalParticle = 400
-    static particleColorCount = 6
+    static totalParticle = 1000
+    static particleColorCount = 6 // this.totalParticle
     static particleCount = parseInt(this.totalParticle/this.particleColorCount)
 }