function preload() {

  matypo = loadFont('SpaceGrotesk-Bold.otf');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  smooth();

  frameRate(24);

  rectMode(CENTER);

  inp = select("#textfield");

  domSliders();

​

}

​

function draw() {

  clear();

  let bgCol = bkgdColorPicker.value();

  let strokeCol = strokeColorPicker.value();

  let strokeW = strokeWeightSlider.value();

  let inpText = inp.value();

  let runLength = inpText.length;

  let offset = offSlider.value();

  let typeSize = typeSizeSlider.value();

  let rows = rowSlider.value();

  let cols = 1;

​

  let waveLength = waveLengthSlider.value();

  let stringWave = stringWaveSlider.value();

  let waveSpeed = waveSpeedSlider.value()/100;

  let slope = slopeSlider.value();

  let waveSize = waveSizeSlider.value();

  background(bgCol);

  fill(0);

  noStroke();

  textSize(9);

  textFont(matypo);

  textAlign(LEFT);

  text("TYPE: Size " + typeSize, 25, 110);

  text("TYPE: Leading " + stringWave, 25, 200);

  text("GRID: Count " + rows, 25, 140);

  text("GRID: Offset " + offset, 25, 170);  

  text("WAVE: Length " + waveLength, 25, 250);

  text("WAVE: Speed " + waveSpeedSlider.value(), 25, 280);

  text("WAVE: Size " + waveSize, 25, 310);

  text("WAVE: StrokeWght " + slope, 25, 340); 

  text("WAVE: Slope " + slope, 25, 370); 

  textSize(typeSize);

  textFont(matypo);

  textAlign(CENTER);

  textLeading(typeSize*stringWave);

  typeY = typeSize*0.7;

  typeX = typeY*0.742;

  typeL = inpText.length;

  push();

  translate(width / 2, height / 2);

  translate(-offset*rows,0);

  // shearY(PI/5)

  for(var i = 0; i<rows; i++){

      fill(bgCol);

      stroke(strokeCol);

      strokeWeight(strokeW);

      push();

​

      let bindWave = map(sinEngine(i,waveLength,0,0,waveSpeed,slope),-1,1,-waveSize,waveSize);

      let offsetWave = map(sinEngine(i,waveLength,0,0,waveSpeed,slope),-1,1,offset,-offset);

        translate(i*offset,bindWave);

        // fill(strkColor);

        let c1 = inpText;

        text(c1,0,0);

      pop();

  }

  pop();

}

​

function sinEngine(aCount,aLength, bCount,bLength, Speed, slopeN) {

  var sinus = sin((frameCount*Speed + aCount*aLength + bCount*bLength));

  var sign = (sinus >= 0 ? 1: -1);

  var sinerSquare = sign * (1-pow(1-abs(sinus),slopeN));

  return sinerSquare;

}