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 ratio; 
var ratio2;

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

}

function draw() {
   background(23, 35, 55,90);
    
    noStroke();
    fill(255,90);
    textFont("Arial");//font
    textSize(20);//size
    textAlign(LEFT,CENTER);
    text('DAY 041',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("22 NOV 2017",width-125,height-30);
    
   ratio = map(sin(frameCount/320),-1, 1,0,4*PI);
    ratio2 =map(sin(frameCount/60),-1, 1,0,0.666);
    ratio3 = map(-sin(frameCount/20),-1, 1,0.1,1);
//    translate(width/10, height/10);
//   
//  rotate  
    
    
    translate(width/2,height/2);
//    rotate(-frameCount);
    fill(255,80);
    //ellipse(0,0,120*ratio3,120*ratio3);
    push()
    for (i=0; i<10; i++){
        
        recursion(350);
        rotate(PI/5);
    }
    pop(); 
}


function recursion (r){
        if (r >349){
            noFill();
//          noStroke();
//            fill(255);
        } 
        else{
           stroke(74, 224, 242);// stroke(233, 2, 146);
            fill(255);  
        }
      
        r= r*ratio2;
   
        push();
//     blendMode(REPLACE);
        strokeWeight(1);
        rect(r,r,r/9,r/9);
        pop();
        
       
//branch
    if(r>50){
             
        push();
        translate(r,r);
        rotate(ratio);
        recursion (1.1*r);    
        pop();
    
        push();
        translate(10,10);
        rotate(-ratio);
        recursion (0.9*r);    
        pop();
        
      }  
  
 
}

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