20210406_Text

let url = 'https://coolors.co/app/0f2749-5dc3ef-2ca58d-84bc9c-f26522';

let cols;

​

const FONT_SIZE = 300;

const POINT_SPAN = 5;

let path;

let font;

let str = 'ABCabc';

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  cols = createCols(url);

  textSize(FONT_SIZE);

  opentype.load("FiraSansOT-Medium.otf",function(err,f){

    if(err)print("error");

    else

    {

      font = f;

      textFont(f);

      loop();

    } 

  });

}

​

function draw(){

  background('#E5DFDC');

  path = getGPoints(str);

  drawTypo(path);

}

​

//////////

​

function keyPressed() {

  if(keyCode >= 48 && keyCode <= 90)

  {

    str += key;

  }

  else if(keyCode == 32){str += " ";}

  else if(keyCode == 8){ str = str.slice(0, -1);}

  return false; // prevent default

}

​

//////////

​

function getGPoints(strData) {

  //print(strData);

  let w = textWidth(strData);

  let fontpath = font.getPath(strData, width-w, height/2+FONT_SIZE/3, FONT_SIZE);

  let gpath = new g.Path(fontpath.commands);

  gpath = g.resampleByLength(gpath,POINT_SPAN).commands;

  return gpath;

}

​

​

function drawTypo(pathData) {

  for(let i = 0; i < pathData.length; i++)

  {

    if(pathData[i].type == "Z")continue;

    let x = pathData[i].x;

    if(x < -FONT_SIZE)continue;

    let y = pathData[i].y;

    let angle = (frameCount+i)/10;

    let w = POINT_SPAN*(2 + sin(angle)*6);

    let h = POINT_SPAN*0.3;

    let col = cols[i%cols.length];

    drawPoint(x,y,w,h,angle,col);

  }

}

​

function drawPoint(x,y,w,h,angle,col = "#000000") {

  noStroke();

  fill(col);

  rectMode(CENTER);

  push();

  translate(x,y);

  //rotate(angle);

  rect(0,0,w,h);

  pop();

}

​

function createCols(_url) {

  let slash_index = _url.lastIndexOf('/');

  let pallate_str = _url.slice(slash_index + 1);

  let arr = pallate_str.split('-');

  for (let i = 0; i < arr.length; i++) {

    arr[i] = '#' + arr[i];

  }

  return arr;

}

​