Moon in the Sky

​

        var tempo = 60000 / 120;

        var disableKeys = false;

​

        let cols, rows, particle, particleNumber, bGcolor;

        let noiseValue = 0.1;

        let gridSize = 20;

        let noiseLevel = 0.01;

        let speed = 0.2;

        let triSize;

        let flowField = [];

        let particles = [];

        let blobs = [];

​

        function setup() {

            bGcolor = color(19, 28, 30);

            createCanvas(windowWidth, windowHeight);

​

            cols = int(width / gridSize);

            rows = int(height / gridSize);

            particleNumber = (cols + rows) / 2;

​

            if (width > height) {

                triSize = width / 3;

            } else {

                triSize = height / 3;

            }

​

            frameRate(24);

​

            for (let p = 0; p < particleNumber; p++) {

                let particle = new Particle();

                particles.push(particle);

            }

​

            let blob = new Blob();

            blobs.push(blob);

​

        };

​

        function draw() {

            background(bGcolor);

​

            push();

              translate(gridSize / 2, gridSize / 2);

              for (let v = 0; v < cols; v++) {

                  flowField[v] = [];

                  for (let r = 0; r < rows; r++) {

                      let offset = createVector((gridSize * v), (gridSize * r));

                      angleMode(DEGREES);

                      let head = p5.Vector.fromAngle(360 * noise(noiseValue * 0.01));

                      head.setMag(speed);

                      flowField[v][r] = head;

                      noiseValue = noiseValue + noiseLevel;

                  }

              }

            pop();

​

            let c1 = color(71, 84, 93);

            let c2 = color(5, 5, 10);

​

            for (let y = 0; y < height; y++) {

                let n = map(y, 0, height, 0, 1);

                let newc = lerpColor(c1, c2, n);

                stroke(newc);

                line(0, y, width, y);

            }

​

            blobs[0].show();

​

            for (let p = 0; p < particles.length; p++) {

                particles[p].show();

                particles[p].move();

                particles[p].follow(flowField);

                particles[p].bounce();

                particles[p].joint(particles);

            }

​

        };

​

        function keyPressed() {

            particles.forEach(particle => {

                let force = createVector(random(-10, 10), random(-10, 10));

                particle.shock(force);

            });

            blobs[0].shock();

            return false;

        };

​

        class Particle {

            constructor() {

                this.pos = createVector(random(width), random(height));

                this.vel = createVector(0, 0);

                this.acc = createVector(0, 0);

                this.maxspeed = tempo / 250;

                this.random = random(10, 40);

                this.weigth = 1;

            }

            show() {

                noFill();

                noStroke();

                circle(this.pos.x, this.pos.y, 2);

                if (this.weigth > 1) {

                    this.weigth = this.weigth - 0.1

                }

            }

            move() {

                this.vel.add(this.acc);

                this.vel.limit(this.maxspeed);

                this.pos.add(this.vel);

                this.acc.mult(0);

            }

            shock(vectors) {

                this.pos.add(vectors);

                this.weigth = random(2, 3);

            }

            follow(vectors) {

                let force;

                let x = int(this.pos.x / gridSize);

                let y = int(this.pos.y / gridSize);

                for (let v = 0; v < cols; v++) {

                    for (let r = 0; r < rows; r++) {

                        if (v == x) {

                            if (r == y) {

                                force = vectors[v][r];

                                break;

                            }

                        }

                    }

                }

                this.applyForce(force);

            }

            applyForce(force) {

                this.acc.add(force);

            }

            bounce() {

                if (this.pos.x < 0 || this.pos.x > width) {

                    this.vel.x = this.vel.x * -1;

                }

                if (this.pos.y < 0 || this.pos.y > height) {

                    this.vel.y = this.vel.y * -1;

                }

                if (this.vel.x == 0 && this.vel.y == 0) {

                    let bounce = createVector(-0.1, -0.1);

                    this.acc.add(bounce);

                }

            }

            joint(particles) {

                particles.forEach(first => {

                    let dis = dist(this.pos.x, this.pos.y, first.pos.x, first.pos.y);

                    if (dis < triSize && dis > 10) {

                        strokeWeight(this.weigth);

                        stroke(200, map(dis, triSize, 10, 10, 100));

​

                        let x1 = this.pos.x;

                        let y1 = this.pos.y;

                        let x2 = first.pos.x;

                        let y2 = first.pos.y;

​

                        curve(width / 2, height / 2, x1, y1, x2, y2, width / 2, height / 2);

                    }

                })

            }

        }

​

        class Blob {

          constructor() {

            this.yoff = 0.0;

            this.radius = 200;

            this.state = true;

          }

​

          show() {

            fill(100, 100, 0);

            noStroke();

            push();

            translate(width / 2, height / 2);

            beginShape();

            let xoff = 0;

            for (let a = 0; a < TWO_PI; a += 0.1) {

              let offset = map(noise(xoff, this.yoff), 0, 1, -25, 25);

              let r = this.radius + offset;

              let x = r * cos(a * 56);

              let y = r * sin(a * 56);

              vertex(x, y);

              xoff += 0.1;

            }

            endShape(CLOSE);

            pop();

            this.yoff += 0.01;

          }

​

          shock() {

            if(this.radius == 300) {this.state = false}

            else if(this.radius == 150) {this.state = true}

            if(this.state) {this.radius += 1}

            else {this.radius -= 1}

          }

        }