2020.js

2020.js

  class Line{
    constructor(){
      this.angle = Math.random()*2*Math.PI;
      this.offset = Math.random();
      this.start1 = 1200;
      this.start2 = this.start1 + 500*Math.random();
    }
    draw(progress,context){
      let pr = (1 - progress + this.offset)%1;
      pr = easeInOutQuint(pr);
      let opacity  = 1;
      if(pr<0.5){opacity = pr/0.5;}
      context.strokeStyle = 'rgba(255,255,255,'+opacity+')';
      context.save()
      context.rotate(this.angle);
      context.beginPath();
      context.moveTo(0,this.start1*pr)
      context.lineTo(0,this.start2*pr)
      context.stroke();
      context.restore()
    }
  }
  let lines = [];
  for (let i = 0; i < 1200; i++) {
    lines.push(new Line());
  }

  console.log(lines);

  let r = 7;
  class Symbol{
    constructor(x,y){
      // this.x = Math.random()*width - width/2;
      // this.y = Math.random()*height - height/2;
      this.x = x;
      this.y = y;
      this.offset = Math.random();

      // this.coords = [
      //   [this.x + r*(Math.random() - 0.5),this.y + r*(Math.random() - 0.5)],
      //   [this.x + r*(Math.random() - 0.5),this.y + r*(Math.random() - 0.5)],
      //   [this.x + r*(Math.random() - 0.5),this.y + r*(Math.random() - 0.5)]
      // ]
      this.coords = []
      let number = 3 + Math.floor(3*Math.random());
      for (let i = 0; i < number; i++) {

        let theta = i*Math.PI*2/number + this.offset*Math.PI;
        let cx = this.x + r*Math.sin(theta) + (Math.random() - 0.5)*r/3
        let cy = this.y + r*Math.cos(theta) + (Math.random() - 0.5)*r/3
        this.coords.push([cx,cy])
      }
    }

    draw(progress,context){
      let pr = (1 - progress + this.offset)%1;

      let realprogress;
      let opacity;
      
      if(pr>0.8){
        realprogress = 1;
        opacity =  (1-pr)/0.2
      } else{
        realprogress = pr/0.8;
        // easing should go here
        realprogress = easeInOutQuint(realprogress);
        opacity = realprogress;
      }
      context.fillStyle = '#fff';
      context.strokeStyle = 'rgba(255,255,255,'+opacity+')';
      context.beginPath();

      context.moveTo(realprogress*this.coords[0][0],realprogress*this.coords[0][1]);
      this.coords.forEach(c=>{
        context.lineTo(realprogress*c[0],realprogress*c[1]);
      })
      
      // context.lineTo(realprogress*this.coords[2][0],realprogress*this.coords[2][1]);
      context.closePath()
      // context.arc(this.x*pr,this.y*pr,4,0,2*Math.PI);
      context.stroke()



    }
  }

  let symbols = []
  // for (let i = 0; i < 300; i++) {
  //   symbols.push(new Symbol());
  // }


  let pres = 200;
  let image = Array.from(Array(pres), () => new Array(pres))
  let canv = document.createElement('canvas');
  let ctx = canv.getContext('2d');
  
  canv.width = pres;
  canv.height = pres;
  let text = [];
  var img = new Image();
  img.onload = function () {
      ctx.drawImage(img, 0, 0, pres, pres);

      // ctx.drawImage(img, 0, 0);
      var imageData = ctx.getImageData(0, 0, pres,pres);
      // console.log(imageData.data.length);
      for (let i = 0; i < imageData.data.length; i=i+4) {
        var x = (i / 4) % pres;
        var y = Math.floor((i / 4) / pres);
        image[x][y] = imageData.data[i] ;
        // image[x][y] = imageData.data[i+2] 
        let scale = 5.5
        if(imageData.data[i]<10){
          text.push({x: x - pres/2,y: y - pres/2})
          if(Math.random()>0.7) symbols.push(new Symbol( scale*(x - pres/2),scale*(y - pres/2)));
          // symbols.push(new Symbol( 4*(x - pres/2),4*(y - pres/2)));
        }
      }

      console.log(image,text);










      
  }
  img.src = "20204.png";
  document.body.appendChild(canv)





  const render = ({ context, width, height, playhead }) => {

    playhead = 1 - (playhead*3)%1;
    // Fill the canvas with pink
    context.fillStyle = "#000";
    context.strokeStyle = "#fff";
    context.clearRect(0, 0, width, height);
    context.fillRect(0, 0, width, height);
    
    context.fillStyle = "rgba(255,255,255,1)";


    context.save()
    context.translate(width/2,height/2);
    lines.forEach(line=>{
      line.draw(playhead,context);
    })
    symbols.forEach(symbol=>{
      symbol.draw(playhead,context);
    })
    context.restore()
    
  };
  // return render;
  return createMotionBlur(render, {
    samplesPerFrame : 4,
    shutterAngle : 1
  });
};

canvasSketch(sketch, settings);