ABD_lines Text

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

let cols;

​

const FONT_SIZE = 200;

const POINT_SPAN = 5;

let path;

let font;

let str = 'ART BASE\n.digital';

​

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('#FFFFFF');

  path = getGPoints(str);

  drawTypo(path);

}

​

//////////

​

function getGPoints(strData) {

  let lines = strData.split('\n');

  let w = Math.max(...lines.map(line => textWidth(line)));

  let gpath = [];

  let yOffset = -(lines.length - 1) * FONT_SIZE / 2;

  lines.forEach((line, idx) => {

    let fontpath = font.getPath(line, width-w, height/2 + yOffset + FONT_SIZE*idx, FONT_SIZE);

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

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

    gpath.push(...linePath);

  });

  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)/20;

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

  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;

}

​