function setup() {
    createCanvas(700, 700);
    angleMode(DEGREES);
    frameRate(60);
}


function draw() {
    background(23, 35, 55);
    var ang = map(sin(frameCount/30), -1, 1, 137.6, 130);;
    push();
    translate(width / 2, height / 2);
    scale(0.7);

    var c = map(sin(frameCount), -1, 1, 7, 20);//整个大小
    var speed = map(sin(frameCount), -1, 1, 1.4, 0.9);



    for (var n = 0; n < 500; n++) {
        var a = n * ang;
        var r = c * sqrt(n);

        var x = r * cos(a);
        var y = r * sin(a);


        push();
        translate(x, y);
        rotate(frameCount * speed);
        rectMode(CENTER);
        fill(map(r, 0, 360, 233, 74), map(r, 0, 360, 2, 224), map(r, 0, 360, 146, 242));
        var radius = map(sin(frameCount), -1, 1, 3000, 600 * sqrt(n));
        rect(0, 0, radius / 500, radius / 500);
        pop();
    }

    pop();
    TYPE("111", "22 Apr 2018");
}

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);
}
Run Pen

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