//Fire lighting on words- inspired by Ed Cavett 

​

//Initialize variables

let myFont;

let liner;

let input;

let fontSize = 50;

let font;

let letters = [];

let inputText = "";

let charArray=[];

let word;

let num_lines=30;

let msg=[];

let num_cols=10;

let letter_multiplier=5;

​

function preload() {

  myFont = loadFont("Roboto-Regular.ttf");//Load font 

}

​

function setup() {

  createCanvas(600,600);

  input = createInput();

  input.position(20, height + 20);

  input.size(360, 30);

  textAlign(CENTER, CENTER);

  input.changed(updateMsg);

​

  msg.push("Star-Catcher");

​

  liner = new LineMaker();//instantiating line maker

  strokeCap(SQUARE); //Style of line endings

  let messageText = createP('Please Press Enter to update the message in the center');

  messageText.position(400, height + 20);

  messageText.style('color', '#2D0808'); // Change text color to white

  messageText.style('font-family',myFont);//apply myFont to the text

}

​

function draw() {

  background(100);

  // Neon Text Animation

  liner.update();

// Word Decor

let charArray = input.value().split('');

word = input.value(); //implementing word decor

​

// Calculate text width

let text_Width = myFont.textBounds(word, 0, 0, fontSize).w;

​

// Calculate horizontal position for centering

let centerX = (width - text_Width)/2;

​

//NOT NEEDED ANYMORE - this was for a texttopoints implementaton of the background

/*// Text to Points

for (let i = 0; i < num_lines; i++) {

  let points = myFont.textToPoints(word, centerX, 50 + i * fontSize, fontSize, {

    sampleFactor: 0., //increase for more points

    simplifyThreshold: 0 //increase to remove collinear points

  });

​

  // Draw points

  push();

  stroke(255);

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

    point(points[i].x, points[i].y);

  }

  pop();

}*/

for(let j=0;j<num_cols;j++){

  for(let i=0;i<num_lines;i++){

    fill(200,200,200,20);

    text(word,centerX,i*fontSize);

  }

  translate(-text_Width,0);

}

//reset canvas

translate(text_Width*num_cols ,0);

for(let j=0;j<num_cols;j++){

  for(let i=0;i<num_lines;i++){

    fill(200,200,200,20);

    text(word,centerX,i*fontSize);

  }

  translate(text_Width,0);

}

//resets canvas to OG position

translate(-text_Width*num_cols,0);

​

// Create a Letter object for each character in charArray

if (charArray.length !== letters.length) {

  letters = []; // Clear the previous letters

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

    let letter1 = new Letter(charArray[i]);

    letters.push(letter1);

  }

}

​

// Update and display each letter

​

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

  letters[i].update();

  letters[i].display();

}

​

}

​

//Ed Cavett's line maker class

class LineMaker {

  constructor() {

    this.msgswitch = 0; //doesnt matter if its one word but it stores the current word basically 

    this.target = []; //array of vectors that store target x,y

    this.dart = [];//array of vectors that store current positions of darts

    this.moving = []; // is an array of booleans to check whether darts are moving or not

    this.lerpvel = [];//stores lerping velocities

    this.size = 12;//size of darts

    this.count = -1; //increments with frame , to check when to restart

    this.close = 0.01; //when to stop a dart 

    let m = msg[this.msgswitch];

    this.anchor = myFont.textToPoints(m, 0, 0, 10, { //holds array of points

      sampleFactor: 2,

      simplifyThreshold: 0.0,

    });

    let centertext = 0;  //used to center text horizontally on the canvas

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

      this.anchor[i].x *= this.size;

      this.anchor[i].y *= this.size;

      if (centertext < this.anchor[i].x) {

        centertext = this.anchor[i].x; //at the end centertext is max x value

      }

      this.moving.push(0);

    }

    let center = width/2-centertext/2;

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

      let setx = this.anchor[i].x + center;//horizontal position adjustment by adding center

      let sety = this.anchor[i].y + (height / 2);

​

      /// Bake the adjustments to the points array

      /// into the target array locations.

      this.target.push(createVector(setx, sety));

      this.dart.push(createVector(width/2, height-10));

      /// Set random or unique velocities for each

      /// dart to move toward target.

      this.lerpvel.push(random(0.5, 0.9));

    }

  }

  update() { //makes the darts move to the end destination

    this.count += 1; //increments time 

    let last = this.anchor.length - 1;

    let endDist = dist(this.target[last].x, this.target[last].y, this.dart[last].x, this.dart[last].y);

    if (this.count > this.anchor.length && endDist < this.close) {

      this.count = last;

      this.restart(); //sets it up for the next msg

    }

    this.moving[this.count] = 1;

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

      let tarx = this.target[i].x;

      let tary = this.target[i].y;

      this.throw(i, tarx, tary);

    }

  }

  throw(i, tarx, tary) {

    let dx = this.dart[i].x;

    let dy = this.dart[i].y;

    let tx = tarx;

    let ty = tary;

    let d = dist(dx, dy, tx, ty);

    /// Advance the dart so long as it is

    /// n distance away from the target.

    if (d > this.close && this.moving[i]) {

      this.dart[i].x = lerp(this.dart[i].x, this.target[i].x, this.lerpvel[i]);

      this.dart[i].y = lerp(this.dart[i].y, this.target[i].y, this.lerpvel[i]);

    }

    push();

    strokeWeight(3);

    if (i > 0) {

      let distBetween = dist(this.dart[i].x, this.dart[i].y, this.dart[i-1].x, this.dart[i-1].y);

      if (distBetween < this.size * 3) {

        stroke(0,255);

        strokeWeight(3);

        //implements noise for adding the fire effect 

        if (this.moving[this.anchor.length - floor(this.anchor.length / 4)]) {

          if (noise(i*0.02, frameCount*0.05) < 0.5) {

            stroke(255,random(100,200),0);

            strokeWeight(6);        

          }

        }

        line(this.dart[i].x, this.dart[i].y, this.dart[i-1].x, this.dart[i-1].y);

      }

      if (distBetween > this.size * 4) {

        stroke(255,255,0,255);

        strokeWeight(3);

        point(this.dart[i].x, this.dart[i].y);

      } 

    }

    pop();

  }

  restart() { //resets animation to initial state 

    //initializes all arrays again to empty them 

    this.target = [];

    this.dart = [];

    this.moving = [];

    this.lerpvel = [];

    this.count = 0;

    this.msgswitch += 1; //increments msg in sentence

    if (this.msgswitch > msg.length - 1) {

      this.msgswitch = 0;

    }

    let m = msg[this.msgswitch];

    this.anchor = myFont.textToPoints(m, 0, 0, 10, { //texttopoints for each word 

      sampleFactor: 2,

      simplifyThreshold: 0.0,

    });   

    let centertext = 0;  //used for centering text  

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

      this.anchor[i].x *= this.size;

      this.anchor[i].y *= this.size;

      if (centertext < this.anchor[i].x) {

        centertext = this.anchor[i].x;

      }

      this.moving.push(0);

    }

    let center = width/2-centertext/2;

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

      let setx = this.anchor[i].x + center;//centers with respect to width

      let sety = this.anchor[i].y + (height / 2); //centers wrt height 

      this.target.push(createVector(setx, sety)); //Adds to the vector arrays 

      this.dart.push(createVector(width/2, height-10));

      this.lerpvel.push(random(0.1, 0.32));

    }

  }

}

​

function updateMsg() {

  // Update msg array with user input

  msg = input.value().split(' ');

}

​

class Letter {

  constructor(char) {

    this.char = char;

    this.x = random(width);

    this.y = random(height);

    this.angle = atan2(this.y - height / 2, this.x - width / 2); // Angle from center

    this.radius = 300;

  }

​

   update() {

    let angularSpeed = 0.05;

    // Increase or decrease radius based on current value

    if (this.radius >= 350) {

      this.radiusDecreasing = true;

    } else if (this.radius <= 150) {

      this.radiusDecreasing = false;

    }

    // Increment or decrement radius

    if (this.radiusDecreasing) {

      this.radius -= 1;

    } else {

      this.radius += 1;

    }

    // Update angle

    this.angle += angularSpeed;

    this.x = width / 2 + cos(this.angle) * this.radius;

    this.y = height / 2 + sin(this.angle) * this.radius;

  }

​

  display() { //to display each letter 

    textSize(fontSize);

    fill(255,150,0);

    text(this.char, this.x, this.y);

  }

}

​