Bouncy Balls, Animation


A brain-melting animation of bouncy balls made using Javascript.





                    var x;
                    var y;
                    var vx;
                    var vy; 
                    var s; 
                    
                    var bby = []; //1. define the array
                    var nnn = 200; //2. number of objects
                    
                    function setup() {
                      var myCanvas = createCanvas(windowWidth, 400);
                      myCanvas.parent("smart");
                    
                      //making a ball using class BouncyBoi, specifically using constructor
                      for (let i = 0; i < nnn; i++){
                        bby[i] = new BouncyBoi();
                      }
                      
                      }
                      
                      function draw() {
                        background(225);
                    
                        for (let i = 0; i < nnn; i++){
                        bby[i].move(); //activating move
                        bby[i].display(); //activating display
                        }
                        
                      }
                    
                    class BouncyBoi {
                      constructor() {
                        this.x = width;
                        this.y = height;
                        this.vx = 5;  //x velocity
                        this.vy = 5;  //y velocity
                        this.s = windowWidth/40;
                        this.max = 10;
                        this.min = 2;
                        this.rainbow = color(random(150,255), random(150,255), 0);
                      }
                      
                      //method : a function in the class
                      move() {
                        this.x += this.vx;
                        this.y += this.vy;
                        
                        if (this.x<=(this.s/2) || this.x>=(windowWidth)-(this.s/2)){
                            if (this.vx<=0) {
                                this.x = (this.s/2);
                                this.vx = random(this.min,this.max);
                            }
                            else {
                                this.x = width-(this.s/2);
                                this.vx = random(this.min,this.max) * -1;
                            }
                        }
                    
                        if (this.y<=(this.s/2) || this.y>=(400)-(this.s/2)){
                            if (this.vy<=0) {
                                this.y = (this.s/2);
                                this.vy = random(this.min,this.max);
                            }
                            else {
                                this.y = height-(this.s/2);
                                this.vy = random(this.min,this.max) * -1;
                            }
                        }
                      }
                      
                      display() {
                        fill(this.rainbow);
                        noStroke();
                        ellipse(this.x, this.y, this.s, this.s);
                      }
                      
                    }