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

    /* https://www.openprocessing.org/sketch/160305 */

var amount = 40;
var num= 0;


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

}

function draw() {
    background(23, 35, 55,90);
    TYPE("074", "05 Jan 2018");
    
 
//  rect(-1, -1, width+1, height+1);

  var maxX = map(sin(millis()/1000)*width, -width, width, 100, 200);

  translate(width/2, height/2);
    stroke(74, 224, 242, 100);
// stroke(255);
  for (var i = 0; i < 360; i+=amount) {
    var x = sin(radians(i+num)) * maxX;
    var y = cos(radians(i+num)) * maxX;

    var x2 = sin(radians(i+amount-num)) * maxX;
    var y2 = cos(radians(i+amount-num)) * maxX;
    noFill();
    quad(x, y, x+x2, y+y2, x2+x, y2+y, x2, y2);
    quad(x, y, x+x2, y+y2, x2+x, y2+y, x2, y2);
      fill(255);
    fill(233, 2, 146);
    ellipse(x, y, 10, 10);
    ellipse(x2, y2, 10, 10);
     ellipse( x2+x, y2+y,10,10);
      
        
//    beginShape();
    line(x, y,x+x2, y+y2);
    line(x, y,x2, y2);
    line(x2+x, y2+y,x2, y2);
    line(x+x2, y+y2,x2, y2);
//    endShape();
    
  
    
  }

  num += 1;
}

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