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

 var circle;
var circle2;
var rot=0;
var col;
var freq = 0.02; 
var cont = 0;
var r;

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

function draw() {
  
    background(23, 35, 55);

    noStroke();
    fill(255, 90);
    textFont("Arial"); //font
    textSize(20); //size
    textAlign(LEFT, CENTER);
    text('DAY 056', width - 95, 35);

    textSize(18); //size
    text("#CODING365", 25, 35);

    textSize(14); //size
    text("Created by", 25, height - 50);
    textSize(16); //size
    text("Pem Zhipeng Xie", 25, height - 30);

    textSize(16); //size
    text("18 DEC 2017", width - 125, height - 30);
    
    
  translate(width/2, height/2);
  rotate(radians(rot));

 ellipseMode(RADIUS);
  for (var i=0; i<400; i ++) {
    circle= 100+sin(millis()/10000*freq*i)*i;
    circle2= 200*sin(millis()/10000*freq*i);
    col=map(circle,-200,200,224,200);
    r=map(circle,-200,200,4,2);
    fill(74, col, 242);//74, 224, 242
    noStroke();
    ellipse(cos(i)*circle, sin(i)*circle,r,r); 
//      rotate(sin(radians(i*framCOunt)));
    rot=rot+0.0005;
  }
}

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