Untitled

let pts;
let caslon;
let fontsize=800;

function preload(){
  caslon = loadFont('CormorantM.ttf');
}

function setup() {
  createCanvas(600, 600);
  
  pts = caslon.textToPoints('a', 0, 0, fontsize,{  //fontsize
    sampleFactor: 1,
    simplifyThreshold: 0
  });
  
  background('#30336a');
   
 
  
  // for(let i =0; i<pts.length; 
  
}

function draw() {
  
  blendMode(NORMAL);
   let gradient = drawingContext.createLinearGradient(width/2-200, 0, width/2+200, height/2+200); //gradient direction
  
  gradient.addColorStop(0, color('#2d2762')); 
  gradient.addColorStop(1, color('#1a1941')); 
  drawingContext.fillStyle = gradient;
  noStroke();
  rect (0,0,width, height);
  
  //basic points:
	// translate(20, 140);
	// fill(255,0,0);
	// noStroke();
	// for(let i =0; i< pts.length; i++){
	// fill(i % 255);
	// ellipse(pts[i].x, pts[i].y, 2,2); 
	// }
  
  //blendMode(SCREEN);
  
  translate(130, height/2+150); // starting of bottom left corner
  
  beginShape(POINTS);
  strokeWeight(3);
  stroke(246,233,130,200);
  for(let i =0; i< pts.length; i++){
    
   let theta = frameCount*0.03 + pts[i].y*1 + tan(pts[i].x)*0.1 ;
    
    let swirl = tan(theta/0.4);
  
    
   vertex(pts[i].x - swirl*5 , //dist bw waves 
          pts[i].y  + cos(frameCount*0.01 )*10 );
                                  
    // vertex(pts[i].x + tan(frameCount*0.04 + pts[i].y), pts[i].y )

  }
  endShape();
  
  
  //layered lines rotate - edges
  
	// translate(0, 100);
	// noFill();
	// let rotX = sin(frameCount/20) * 15;
	// let rotY = cos(frameCount/20) * 15;
	// for(let i =0; i< pts.length; i++){      
	// line(pts[i].x, pts[i].y, pts[i].x - rotX, pts[i].y - rotY);
	// }
  
  //layered lines rotate - base pieces:
   
   
  
  for (r=0; r < 3;r=r+1) {
    for (i=0; i<3; i++) {
    textFont(caslon);
    textSize(fontsize);
    strokeWeight(2);
     
    stroke(124*i,77,129*r,30);
    text('a', 210, r*305-305);
      
      }
  }
        
  
  
  
  
  push();
    rotate(3.14159)
  for (r=0; r < 3;r=r+1) {
    for (i=0; i<3; i++) {
    textFont(caslon);
    textSize(fontsize);
    strokeWeight(2);
     
    stroke(124*i,77,129*r,30);
    text('a', -130, r*305);
      
      }
  }
  
  pop();
  
  //chaos spinning lines:
  // translate(0, 100);
  // for(let i =0; i< pts.length; i++){
  //  line(pts[i].x, pts[i].y, pts[i].x + random(-15,15), pts[i].y + random(-15,15));
  // }
  
}