save file

Author: javascript-2020

code-dev/26-04-16/life/life.html

@@ -0,0 +1,172 @@
+        <style>
+              canvas {
+                    position      : absolute;
+                    left          : 0;
+                    top           : 0;
+                    width         : 100%;
+                    height        : 100%;
+                    background    : black;
+              }
+        </style>
+        
+        <canvas id=canvas></canvas>
+        
+        <script>
+        
+                var ctx         = canvas.getContext('2d');
+                
+                var width       = window.innerWidth;
+                var height      = window.innerHeight;
+                canvas.width    = width;
+                canvas.height   = height;
+                
+                var atoms     = [];
+                
+                var yellow    = create(300,'yellow');                 //   300
+                var red       = create(200,'red');                    //   200
+                var green     = create(200,'green');                  //   200
+                
+                
+                var rules     = [];
+                
+                var rule1   = createRule(green,green,-0.32,80);       //  -0.32
+                createRule(green,red,-0.17,80);                       //  -0.17
+                createRule(green,yellow,0.5,80);                      //   0.34
+                
+                createRule(red,red,-0.1,80);                          //  -0.1
+                createRule(red,green,-0.34,80);                       //  -0.34
+                
+                createRule(yellow,yellow,0.25,80);                    //   0.15
+                createRule(yellow,green,-0.2,80);                     //  -0.2
+                
+                
+                (function update(){
+                
+                      draw();
+                      requestAnimationFrame(update);
+                      
+                })();
+                
+                
+                function display(x,y,c,s){
+                
+                      ctx.fillStyle = c;
+                      ctx.fillRect(x, y, s, s);
+                      
+                }//draw
+                
+                
+                function atom(x,y,color){
+                
+                      return {x,y,vx:0,vy:0,color};
+                      
+                }//atom
+                
+                function random(n){
+                
+                      return Math.random() * n + 50;
+                      
+                }//random
+                
+                function create(number,color){
+                
+                      group = [];
+                      
+                      for(var i=0;i<number;i++){
+                      
+                            group.push(atom(random(width),random(height),color));
+                            atoms.push(group[i]);
+                            
+                      }//for
+                      
+                      return group;
+                      
+                }//create
+                
+                function rule(atoms1,atoms2,g,maxd){
+                
+                      for(let i=0;i<atoms1.length;i++){
+                      
+                            fx    = 0;
+                            fy    = 0;
+                            
+                            for(let j=0;j<atoms2.length;j++){
+                            
+                                  a     = atoms1[i];
+                                  b     = atoms2[j];
+                                  
+                                  dx    = a.x - b.x;
+                                  dy    = a.y - b.y;
+                                  
+                                  d     = Math.sqrt(dx*dx+dy*dy);
+                                  
+                                  if(d>0 && d<maxd){
+                                        F     = (g*1)/d;
+                                        fx   += F*dx;
+                                        fy   += F*dy;
+                                  }
+                                  
+                            }//for
+                            
+                            a.vx    = (a.vx+fx)*0.5;
+                            a.vy    = (a.vy+fy)*0.5;
+                            
+                            a.x    += a.vx;
+                            a.y    += a.vy;
+                            
+                            if(a.x<0)
+                                  if(a.vx<0)
+                                        a.vx   *= -1;
+                                        
+                            if(a.x>width)
+                                  if(a.vx>1)
+                                        a.vx   *= -1;
+                                        
+                            if(a.y<0)
+                                  if(a.vy<0)
+                                        a.vy   *= -1;
+                                        
+                            if(a.y>height)
+                                  if(a.vy>0)
+                                        a.vy   *= -1;
+                                        
+                      }//for
+                      
+                }//rule
+                
+                function createRule(group1,group2,force,d){
+                
+                      var o   = {group1,group2,force,d};
+                      rules.push(o);
+                      return o;
+                      
+                }//create
+                
+                function applyRules(){
+                
+                      for(var o of rules){
+                            rule(o.group1,o.group2,o.force,o.d);
+                      }
+                      
+                }//applyRules
+                
+                
+                function draw(){
+                
+                      applyRules();
+                      
+                      
+                      ctx.fillStyle='black';
+                      ctx.fillRect(0,0,width,height);
+                      
+                      
+                      for (i = 0; i < atoms.length; i++) {
+                      
+                            display(atoms[i].x,atoms[i].y,atoms[i].color,5);
+                            
+                      }//for
+                      
+                      
+                }//draw
+                
+        </script>