indextitle.js

/*global abs,angleMode,append,background,beginShape,bezier,box,camera,ceil,CENTER,color,cone,cos,createCanvas,createCanvas,createGraphics,curveVertex,cylinder,DEGREES,displayHeight,displayWidth,dist,div,DOWN_ARROW,ellipse,endShape,fill,floor,frameCount,frameRate,height,image,key,keyCode,keyIsDown,keyIsPressed,keyIsPressed,keyPressed,LEFT,LEFT_ARROW,lerpColor,line,loadImage,loadJSON,loadSound,map,mouseIsPressed,mouseX,mouseY,noFill,noLoop,normalMaterial,noStroke,p5,plane,point,pointLight,pop,push,push,RADIANS,radians,random,rect,resizeCanvas,resizeCanvas,RIGHT,RIGHT_ARROW,rotate,rotateX,rotateY,rotateZ,round,round,scale,shuffle,sin,sphere,stroke,strokeWeight,text,textAlign,textFont,textSize,texture,textWidth,torus,translate,triangle,UP_ARROW,WEBGL,width,windowHeight,windowHeight,windowWidth,world */

// create global variables up here
var sourceText = "yes, and?";
var author = "emma winston";
var event = "nanogenmo 2019"
var website = "emmawinston.me"
var words = sourceText.split(" ");
let xpos = 10;
let ypos = 0;

function setup() {
  
  var canvas = createCanvas(1200, 1700);
  canvas.parent('main');
  background(255);
  frameRate(1000);
  
}

function draw() {
  textFont("Courier");
  textSize(12);
  textAlign(CENTER, CENTER);
  
  
  for (let i=0; i< 20000; i++) {
    xpos = ((i % 60) * 20) + 10;
    
    for (var j=0; j < words.length; j++) {
      fill(0 + (j * 10));
      text(words[j], xpos, ypos);
    }
    
    if (i % 56 == 0) {
      ypos += 6.4;
    }
  }
  
  stroke(255);
  fill(255);
  rectMode(CENTER);
  rect(600, 850, 250, 250);
  fill(0);
  textAlign(CENTER, CENTER);
  textSize(24);
  text(sourceText, width/2, height/2 - 40);
  textSize(16);
  text(author, width/2, height/2 - 10);
  text(event, width/2, height/2 + 10);
  text(website, width/2, height/2 + 30);
}