let whenStroke = [];

let thenStroke = [];

let thanStroke = [];

let thatStroke = [];

​

let whatValue;

let whenValue;

let thenValue;

let thanValue;

let thatValue;

​

function setup() {

  createCanvas(400, 400);

  stroke(100);

  fill(100);

  // frameRate(.25);

  // ellipseMode(CORNER);

  textAlign(CENTER);

}

​

function draw() {

  background(255,220);

  a=Math.floor(random(width));

    b=Math.floor(random(200));

    c=Math.floor(random(width));

    d=Math.floor(random(width));

    e=Math.floor(random(width));

    f=Math.floor(random(width));

    g=Math.floor(random(200));

    h=200;

    i=Math.floor(random(width));

    j=Math.floor(random(width));

    k=Math.floor(random(width));

    l=Math.floor(random(width));

    m=Math.floor(random(width));

    n=Math.floor(random(width));

    o=Math.floor(random(width));

    p=Math.floor(random(width));

    q=Math.floor(random(width));

    r=Math.floor(random(200));

    s=Math.floor(random(width));

    t=Math.floor(random(width));

    u=Math.floor(random(width));

    v=Math.floor(random(width));

    w=Math.floor(random(width));

    x=Math.floor(random(width));

    y=Math.floor(random(width));

    z=Math.floor(random(width));

  stroke(r,g,b);

​

  //what

  whatStroke = [0,1];

  whatValue = Math.floor(random(2));

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

    strokeWeight(whatStroke[whatValue]);

  }

  //w-h

  line(75,h+w/2-10,150,h);

  //h-a

  line(150,h,225,h-a/2+10);

  //a-t

  line(225,h-a/2+10,300,h-t/2+10);

  //when

  whenStroke = [0,1];

  whenValue = Math.floor(random(2));

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

    strokeWeight(whenStroke[whenValue]);

  }

  //w-h

  line(75,h+w/2-10,150,h);

  //h-e

  line(150,h,225,h+e/2-10);

  //e-n

  line(225,h+e/2-10,300,h+n/2-10);

  //then

  thenStroke = [0,1];

  thenValue = Math.floor(random(2));

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

    strokeWeight(thenStroke[thenValue]);

  }

  //t-h

  line(75,h-t/2+10,150,h);

  //h-e

  line(150,h,225,h+e/2-10);

  //e-n

  line(225,h+e/2-10,300,h+n/2-10);

​

  //than

  thanStroke = [0,1];

  thanValue = Math.floor(random(2));

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

    strokeWeight(thanStroke[thanValue]);

  }

  //t-h

  line(75,h-t/2+10,150,h);

  //h-a

  line(150,h,225,h-a/2+10);

  //a-n

  line(225,h-a/2+10,300,h+n/2-10); 

  //that

  thatStroke = [0,1];

  thatValue = Math.floor(random(2));

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

    strokeWeight(thatStroke[thatValue]);

  }

  //t-h

  line(75,h-t/2+10,150,h);

  //h-a

  line(150,h,225,h-a/2+10);

  //a-t

  line(225,h-a/2+10,300,h-t/2+10);

  fill(r,g,b);

  ellipse(75,h+w/2-10,15,15);

  fill(255)

  text('W',75,h+w/2-5);

  fill(r,g,b);

  ellipse(75,h-t/2+5,15,15);

  fill(255)

  text('T',75,h-t/2+10);

  fill(r,g,b);

  ellipse(150,h-5,15,15);

  fill(255)

  text('H',150,h);

  fill(r,g,b);

  ellipse(225,h+e/2-10,15,15);

  fill(255)

  text('E',225,h+e/2-5);

  fill(r,g,b);

  ellipse(225,h-a/2+5,15,15);

  fill(255)

  text('A',225,h-a/2+10);

  fill(r,g,b);

  ellipse(300,h+n/2-10,15,15);

  fill(255)

  text('N',300,h+n/2-5);

  fill(r,g,b);

  ellipse(300,h-t/2+5,15,15);

  fill(255)

  text('T',300,h-t/2+10);

  fill(r,g,b);

  stroke(255);

​

  if (whatValue == 1) {

    text('WHAT',75,height);

  }

  if (whenValue == 1) {

    text('WHEN',225,height);

  }

  if (thenValue == 1) {

    text('THEN',225,10);

  }

  if (thanValue == 1) {

    text('THAN',300,10);

  }

  if (thatValue == 1) {

    text('THAT',75,10);

  }

    frameRate(.5);

  // stroke(w,h,o);

  // line(w,h,a,t);

  // noStroke();

  // fill(w,h,o);

  // text('W-T',w,h);

  // stroke(w,h,y);

  // line(w,h,e,n);

  // noStroke();

  // fill(w,h,y);

  // text('H',t,h);

  // stroke(h,o,w);

  // line(t,h,e,n);

  // noStroke();

  // fill(h,o,w);

  // text('E-A',e,n)

  // stroke(n,o,t);

  // line(t,h,a,t);

  // noStroke();

  // fill(h,o,w);

  // text('T-N',a,t);

}