Secret Tunnels

​

        var onomato = ['ぐ', 'わ', 'ん', 'G', 'W', 'O', 'N'];

        var tempo = 60000 / 120;

        var disableKeys = false;

        var marginTop = 0;

​

        let cols, rows, particle, blobNumber, bGcolor;

        let noiseValue = 0.1;

        let gridSize = 20;

        let blobSize, myFont;

        let circles = [], letters = [], blobs = [];

​

        function preload() {

            myFont = loadFont('Tsukimi.otf');

        }

​

      function setup() {

        textFont(myFont);

        bGcolor = color(19, 28, 30);

        createCanvas(windowWidth, windowHeight - marginTop);

​

          cols = int(width / gridSize);

          rows = int(height / gridSize);

          blobNumber = (cols + rows) / 2;

​

          if (width > height) {

            blobSize = blobNumber / 2.5;

          } else {

            blobSize = blobNumber / 1.5;

          }

​

          frameRate(24);

​

          let blob = new Blob(blobNumber, blobSize);

          blobs.push(blob);

​

      };

​

      function draw() {

          background(155, 155, 160);

​

          for(let s = 0; s < circles.length; s++ ) {

              circles[s].show();

              circles[s].move();

              circles[s].remove(circles);

          }  

​

          blobs[0].show();

          blobs[0].move();

          for(let l = 0; l < letters.length; l++ ) {

              letters[l].show();

              letters[l].move();

              letters[l].remove(letters);

          }

        };

​

        function keyPressed() {

          if (keyCode == 49 || keyCode == 50 || keyCode == 51 || keyCode == 52 || keyCode == 53 || keyCode == 54 || keyCode == 55 || keyCode == 56 || keyCode == 57 || keyCode == 48) { // 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 0

            blobs[0].shock();

          }

          if (keyCode == 81 || keyCode == 87 || keyCode == 69 || keyCode == 82 || keyCode == 84 || keyCode == 89 || keyCode == 85 || keyCode == 73 || keyCode == 79 || keyCode == 80) { // q + w + e + r + t + y + u + i + o + p

            let circle = new Cir(3);

            circles.push(circle);

          }

          if (keyCode == 65 || keyCode == 83 || keyCode == 68 || keyCode == 70 || keyCode == 71 || keyCode == 72 || keyCode == 74 || keyCode == 75 || keyCode == 76) { // a + s + d + f + g + h + j + k + l

            blobs[0].shock();

          }

          if (keyCode == 90 || keyCode == 88 || keyCode == 67 || keyCode == 86 || keyCode == 66 || keyCode == 78 || keyCode == 77) { // z + x + c + v + b + n + m

            let OnoLetter = onomato[floor(random(0, onomato.length))];

            let letter = new Letter(OnoLetter);

            letters.push(letter);

          }

          if (keyCode === 32) { // space

            blobs[0].shock();

            let circle = new Cir(2);

            circles.push(circle);

          }

            return false;

        };

​

​

    class Blob {

      constructor(num, size) {

        this.res = floor(num); // num of points

        this.amp = size; // space btwn blobs

        this.iter = num; // num of iterations

        this.xOffset = 0.1; // noise offset

        this.yOffset = 0.2; // noise offset

        this.speed = 0.001; // noise speed

        this.time = 0; // noise time

        this.intens = 0.015;

        this.pinkOffset = 0;

        this.blueOffset = 0;

      }

      show() {

        for(let num = 0; num < 3; num++) {

          push();

          translate(width / 2, height / 2);

              this.time += this.speed;

              this.xOffset = sin(this.time * 0.05) * 100 + 5000;

              this.yOffset = cos(this.time * 0.05) * 100 + 5000;

                for (let j = 0; j < this.iter; j++) {

                    beginShape();

                    for (let i = 0; i < this.res; i++) {

                        let n;

                        strokeWeight(j / this.iter * 16);

                        noFill();

                        if(num == 0) {

                          n = noise(this.xOffset + sin(i * TWO_PI / this.res) * this.intens * j + this.blueOffset, this.yOffset + cos(i * TWO_PI / this.res) * this.intens * j + this.blueOffset, this.time);

                          stroke(86, 152, 166); // blue

                        } else if(num == 1) {

                          n = noise(this.xOffset + sin(i * TWO_PI / this.res) * this.intens * j + this.pinkOffset, this.yOffset + cos(i * TWO_PI / this.res) * this.intens * j + this.pinkOffset, this.time);

                          stroke(155, 86,166); // pink

                        } else {

                          n = noise(this.xOffset + sin(i * TWO_PI / this.res) * this.intens * j, this.yOffset + cos(i * TWO_PI / this.res) * this.intens * j, this.time);

                          stroke(91, 87, 166); // purple

                        }

                        let x = sin(i * TWO_PI / this.res) * j * this.amp * n + 1;

                        let y = cos(i * TWO_PI / this.res) * j * this.amp * n + 1;

                        curveVertex(x, y);

                    }

                    endShape(CLOSE);

                }

          pop();

        }

      }

      move() {

        if(this.blueOffset > 0) {

          this.blueOffset -= 0.01;

        } else {

          this.blueOffset = 0;

        }

        if(this.pinkOffset > 0) {

          this.pinkOffset -= 0.01;

        } else {

          this.pinkOffset = 0;

        }

      }

      shock() {

        this.intens = random(0.01,0.03);

        this.blueOffset = random(0.05, 0.2);

        this.pinkOffset = random(0.05, 0.2);

      }

    }

​

    class Letter {

      constructor(key) {

        this.key = key;

        this.pos = createVector (width/2, height/2);

        this.rgb = 30;

        this.maxsize = random(width/2, width*2);

        this.easing = random(0.1, 0.2);

      }

      show() {

        noStroke();

        fill(this.rgb);

        textSize(this.maxsize);

        textAlign(CENTER);

        text(this.key, this.pos.x, (this.pos.y + this.maxsize/2));

      }

      move() {

          let dist = -(this.maxsize);

          this.maxsize = this.maxsize + dist * this.easing * 2;

          this.rgb = this.rgb + 8;

      }

      remove(arrayName) {

          if(this.maxsize < 10) {

            arrayName.splice(0, 1);

          }

      }

    }

​

class Cir {

  constructor(speed) {

    this.pos = createVector(width/2, height/2);

    this.rgb = 155;

    this.size = 10;

    this.easing = random(0.15, 0.3);

    this.speed = speed;

  }

  show() {

      noStroke();

      fill(this.rgb);

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

  }

  move() {

      let dist = this.size * this.easing * this.speed;

      this.size = this.size + dist;

      this.rgb = this.rgb - (4* this.speed);

  }

  remove(arrayName) {

    if(width < height) {

      if(this.size > (height * 1.5)) {

        arrayName.splice(0, 1);

      }

    } else {

      if(this.size > (width * 1.5)) {

        arrayName.splice(0, 1);

      }

    }

  }

}

​

​