var num = 0;
function setup() {

    createCanvas(windowWidth, windowHeight);


}

function draw() {
    background(23, 35, 55);
    TYPE("109", "24 Mar 2018");

     
   translate(width/2, height/2);
   /* Make mouseX values between 100 and 200. */
   var maxX = map(sin(frameCount/30), -1, 1, 100, 120);
   /* Change i+=1 to i+=2 for a simpler effect */
   for(var i = 0; i < 360; i+=2){
     var x = sin(radians(i));
     var y = cos(radians(i));
    var outlong = map (sin(frameCount/30), -1, 1, -10, 170);
       var inlong = map (sin(frameCount/30), -1, 1, 170, -10);
     /* 
       Variable d is finding the distance from the stationary location (x and y) to the moving coords. The moving
       coords could of been put into their own variable but I like compact code so i chose a different way. Because the
       moving coords would have the same component as x and y but multiplied by different values, I chose to just
       multiply them in the variable d. 
       
       This is a little trick but look at the variable d. I multiply x and y by maxX which is the mouse movement, but
       I also multiply x and y by the moving values. 
     */
     var d = map(dist(x*maxX, y*maxX, x*(150+sin(i+num) * 50), y*(150+sin(i+num) * 50)), 0, 200, -10, 80);
        noFill();
       fill(map(sin(frameCount / 30), -1, 1, 74, 233), map(sin(frameCount / 30), -1, 1, 224, 2), map(sin(frameCount / 30), -1, 1, 242, 146), 150+100*abs(sin(0.1+num)));
     /* Same deal with the variable d. I also use d for size. */
     rect(x*(outlong+sin(i+num) * 30), y*(outlong+sin(i+num) * 30), d, d);
       rectMode(CENTER);
     rect(x*(inlong+sin(i-num) * 50), y*(inlong+sin(i-num) * 50), d, d);
   }
   num+=0.02;
}

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

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