function TYPE (DAY,DATES) {
    
    this.DAY =DAY;
    this.DATES = DATES;
    
    
    noStroke();
    fill(255, 90);
    textFont("Arial"); 
    textSize(20); //size
    textAlign(LEFT, CENTER);
    text('DAY '+ this.DAY, width - 125, 35);

    textSize(18); 
    text("#CODING365", 25, 35);
    
    textSize(14); 
    text("Created by", 25, height - 50);
    textSize(16); 
    text("Pem Zhipeng Xie", 25, height - 30);

    textSize(16); 
    text(this.DATES, width - 125, height - 30);
    
//    textSize(16); 
//    text("微博@Pem臭人鹏", width - 150, height - 50);
}

/* fill(74, 224, 242);*/

let firwork;
let bombs = [];


function setup() {
    createCanvas(windowWidth, windowHeight);
    noStroke();
}

function draw() {
    background(23, 35, 55);
    TYPE("084", "26 Feb 2018");
    if (mouseIsPressed) {
        bombs.push(new Bomb(mouseX + random(-10, 10), mouseY + random(-10, 10)));
        bombs.push(new Bomb(mouseX, mouseY));

        for (var i = 0; i < bombs.length; i++) {
            bombs[i].shake();
        }

    } else if (mouseIsPressed == false) {
        for (var i = 0; i < bombs.length; i++) {
            bombs[i].move();
        }
    }


    for (var i = bombs.length - 1; i >= 0; i--) {
        bombs[i].display();
        bombs[i].changeSize();
        //        bombs[i].bound();
        if (bombs[i].r <= 0) {
            bombs.splice(i, 1);
        }
    }
}


function mousePressed() {

}





class Bomb {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.r = random(5, 30);
        this.col = [color(74, 224, 242), color(233, 2, 146), color(226, 230, 54), color(150, 4, 191)];
        this.dir = createVector(0, 0);
        this.vel = createVector(0, 0);
        this.pos = createVector(this.x, this.y);
        this.speed = random(0.6, 1.2);
        this.ha = int(random(0, 4));
    }


    shake() {
        this.pos.x += random(-1, 1);
        this.pos.x += random(-1, 1);
    }


    move() {
        this.angle = noise(this.pos.x / 600, this.pos.y / 600) * PI * 2 * 600;
        this.dir.x = cos(this.angle);
        this.dir.y = sin(this.angle);


        this.vel = this.dir.copy();
        this.vel.mult(this.speed);
        this.pos.add(this.vel);
    }


    display() {
        //        stroke(10, 240, 224);
        //        strokeWeight(2);
        fill(this.col[this.ha]);
        ellipse(this.pos.x, this.pos.y, this.r, this.r);
    }


    changeSize(x, y) {
        this.r -= 0.05;
        //        let d = dist(this.x, this.y, mouseX, mouseY);
        //        if (d <= 30) {
        //            this.r = map(d, 0, 30, 20, 1);
        //        }
    }


    disappear() {
        if (this.r <= 0) {
            return true;
        }
    }


    //    
       bound() {
           if (this.x < 0 + this.r || this.x > width - this.r) {
               this.dir.x *= -2.00;
    
           }
           if (this.y < 0 + this.r || this.y > height - this.r) {
    
               this.dir.y *= -2.00;
           }
       }
}










External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js
  2. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.js
  3. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.js