​

​

let font;

let fillColor = "white";

let myWord = "smell";

let colorWords = [

  "red",

  "pink", //if you switch to 1000.json, omit 

  "orange",

  "yellow",

  "green",

  "blue",

  "grey", //if you switch to 1000.json, omit 

  "purple", //if you switch to 1000.json, omit 

  "brown",

  "gold",

  "silver",

  "black",

  "white",

];

let startWords = [];

let seedWords = [];

let startWordsNum = 30; 

let ourStartWord = null;

let ourStartColor = null;

let currentColor = null;

​

let wordHistory = [];

let colorHistory = [];

let displayLines = [];

​

​

//------ w2v variables

​

let word2Vec;

let nearestWords = [];

let subtractedWords = [];

let addedWords = [];

let averagedWords = [];

let nearestWordFromSet;

let jsonFeed;

let tempArray = [];

​

//------ design variables

​

let wordSpacingWidth;

let wordSpacingHeight;

let availableWidth; 

let availableHeight;

const X_AXIS = 2;

const Y_AXIS = 1;

let topMargin = 64;

let sideMargin = 48 + 256 + 24;

let lineHeight = 24;

let textHeight = lineHeight - 8;

let rectStartX = 400 + sideMargin;

​

//------ project flow

​

let runningPhase1 = true; //getting the initial word

let runningPhase2 = false;

let runningPhase3 = false;

let runningPhase4 = false;

let firstColorSelection = false;

​

//--------------------------------------------------------------

// PREP FUNCTIONS WRITING

//--------------------------------------------------------------

​

function modelLoaded() {

  console.log("Model Loaded");

}

​

//--------------------------------------------------------------

// PREP FUNCTIONS - RUNNING

//--------------------------------------------------------------

​

function preload() {

  jsonFeed = loadJSON("https://raw.githubusercontent.com/cvalenzuela/ml5js-library/master/docs/assets/data/wordvecs/wordvecs5000.json"); //do not use 5000 without intervention

  word2Vec = ml5.word2vec("data/wordvecs5000.json", modelLoaded); //do not use 5000 without intervention

  font = loadFont("assets/Ovo-Regular.ttf");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight-20);

  availableWidth = width - 64

  availableHeight = height - 128

  wordSpacingWidth = availableWidth/(startWordsNum/4)

  wordSpacingHeight = availableHeight/(startWordsNum/2)

​

  errorMsg = createP("");

  colorMode(HSB, 360, 100, 100);

​

  textFont(font);

  textSize(18);

  textAlign(LEFT);

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

    word2Vec.getRandomWord()

      .then((randomWord) =>{

        startWords[i] = randomWord;

        return randomWord;

      })

      .then(() =>{

          let okToUse = checkForIntervention(startWords[i])

          seedWords.push(new SeedWord(startWords[i], i, okToUse));

      })

      .catch((error) => {

        console.log(error)

      })

  }

}

​

function draw() {

  background(255);

  if (runningPhase1){

    startWithAWord();

  } else if (runningPhase2) {

    if (wordHistory.length > 1){

      tempArray = [];

      runningPhase3 = true;

      runningPhase2 = false;

    }

    if (typeof colorHistory[0] == "string") {

      displayStartWordAndColor()

      pickANewColor(sideMargin, height - 100, 1 , 0); //x, y, colorIndex, wordIndex      

    } else {

      getStartWordAndColor();

    }

  } else if (runningPhase3){

    displayNewWordAndColor();

  } 

​

}

​

//--------------------------------------------------------------

// My Functions

//--------------------------------------------------------------

​

function displayNewWordAndColor(){

     //display text and color

  fill(255, 20, 0, 5);

  noStroke();

  text("A word.", sideMargin, topMargin); 

  text((wordHistory[0] + " (close to " + colorHistory[0]) + ")", sideMargin, topMargin + (lineHeight))

  let newText = `${wordHistory[0]} + ${colorHistory[1]} = ${wordHistory[1]}`

  text(newText, sideMargin, topMargin + (lineHeight * 2))

  //Rect - line 1

    push()

    strokeWeight(.5);

    let fillC = colorHistory[0];

    fill(fillC);

    let wordWidth = wordHistory[0]

    wordWidth = textWidth(wordWidth)

    rect(rectStartX, topMargin + (textHeight/2), wordWidth, textHeight);

    pop()

  //Get colorHistory[2]

  getColorFromWord(wordHistory[1], 2)

  //console.log(colorHistory)

  if (colorHistory.length == 3){

      //Rect - line 2

    strokeWeight(.5);

  let lineLength = textWidth(newText);

  setGradient(rectStartX, topMargin + (2*textHeight), lineLength/2, textHeight, colorHistory[0], colorHistory[1], X_AXIS)

  setGradient(rectStartX + lineLength/2, topMargin + (2*textHeight), lineLength/2, textHeight, colorHistory[1], colorHistory[2], X_AXIS)

  fill(255, 20, 0, 5);

  noStroke();  

  let newText2 = `${wordHistory[1]} (close to ${colorHistory[2]})`

  text(newText2, sideMargin, topMargin + (lineHeight * 3));

    //Rect - line 1

    push()

    strokeWeight(.5);

    //console.log("colorHistory:", colorHistory)

    let fillC2 = colorHistory[2];

    fill(fillC2);

    let wordWidth2 = wordHistory[1]

    wordWidth2 = textWidth(wordWidth2)

    rect(rectStartX, topMargin + (3.5*textHeight), wordWidth2, textHeight);

    pop()

    //RESTART BUTTON HERE

    let btnX = rectStartX;

    let btnY = height - 100;

    let btnW = 118;

    let btnH = 32;

    if (mouseX > btnX && mouseX < btnX + btnW 

       && mouseY > btnY && mouseY < btnY + btnH){

        fill("#FF72A6")

        stroke("black");

        rect(btnX, btnY, btnW, btnH, 4);

        fill("black");

        noStroke();

        text("New Poem", btnX+16, btnY + 21);

        if (mouseIsPressed){

          runningPhase3 = false;

          runningPhase1 = true;

        } else {

          runningPhase3 = runningPhase3;

          runningPhase1 = runningPhase1;

        }

    } else {

        noFill();

        stroke("black");

        rect(btnX, btnY, btnW, btnH, 4);

        fill("black");

        noStroke();

        text("New Poem", btnX+16, btnY + 21);

    }

  }

}

​

function pickANewWord(wordArray, wordIndex, x, y){

 // console.log("picking")

  y = y - 32

  push();

  textSize(16);

  let newWordPicked = null;

  let totalWidth = sideMargin;

​

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

    let isOkToUse = true;

    if (int(wordArray[i].word) >= 0){ //HERE

      isOkToUse = false;

    }

​

    let wordWidth = textWidth(wordArray[i].word)  

    if (isOkToUse){

      if (   mouseX > totalWidth - 4 

          && mouseX < totalWidth -4 + wordWidth + 8

          && mouseY > y - textHeight

          && mouseY < y + textHeight){

​

        let fillColor = colorHistory[colorHistory.length-1];

        fill(fillColor); 

        if (fillColor == "white" || fillColor == "yellow" || fillColor == "black"){

          stroke("black");

          strokeWeight(0.25);

        }

        if (mouseIsPressed){

            newWordPicked = wordArray[i].word;

            wordHistory[wordIndex + 1] = newWordPicked;      

        }

​

      } else {

        noStroke();

        fill("black");

      }

    } else {

      noStroke();

      fill("black");

    }

      text(wordArray[i].word, totalWidth, y);

      totalWidth = totalWidth + wordWidth + 25

  }

  pop();

​

}

​

function pickANewColor(x, y, colorIndex, wordIndex){

  let newColorPicked = null;

​

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

    fill(colorWords[i]);

    let colorWidth = 20

    let colorX = x + (i * colorWidth) + (i*5)

    rect(colorX, y, colorWidth, colorWidth);

    if (mouseX > colorX && mouseX < colorX + colorWidth && mouseY > y && mouseY < y + colorWidth){

      rect(colorX-2, y-2, colorWidth+4, colorWidth+4);

      if (mouseIsPressed){

        addedWords = [];

        newColorPicked = colorWords[i];

        currentColor = newColorPicked;

      }

    }   

  }

  if (newColorPicked){

    colorHistory[colorIndex] = newColorPicked;

    myArray = [colorHistory[colorIndex], wordHistory[wordIndex]]

​

    findAddedWords(myArray)

    .then((results) => {

      for (let result of results){

        //allows intervened words to space appropriately

        if (typeof result.word == "string"){

          addedWords.push(result);

        } else {

          result.word = str(result.word);

          addedWords.push(result)

        }

      }      

    })

    .catch((err) => console.error(err));

​

    return;

  }

​

  if (colorHistory.length > colorIndex){

    pickANewWord(addedWords, wordIndex, x, y)

  }

}

​

function setGradient(x, y, w, h, c1, c2, axis) {

  colorMode(RGB);

  noFill();

  c1 = color(c1);

  c2 = color(c2);

  if (axis === Y_AXIS) {

    // Top to bottom gradient

    for (let i = y; i <= y + h; i++) {

      let inter = map(i, y, y + h, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(x, i, x + w, i);

    }

  } else if (axis === X_AXIS) {

    // Left to right gradient

    for (let i = x; i <= x + w; i++) {

      let inter = map(i, x, x + w, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(i, y, i, y + h);

    }

  }

  colorMode(HSB, 360, 100, 100);

}

​

function getColorFromWord(word, index){

  if (index === 0) {

    if (tempArray[tempArray.length-1] === "stop"){

      colorHistory[index] = tempArray[tempArray.length-2];

    } else {

      findNearestWordFromSet(word, colorWords);

    }

  } else {

    if (tempArray[tempArray.length-1] == "stop"){

      colorHistory[index] = tempArray[tempArray.length-2];

    } else {

      findNearestWordFromSet(word, colorWords);      

    }

  }

​

}

​

function displayStartWordAndColor(){

    //display text and color

  fill(255, 20, 0, 5);

  text("It started with a word.", sideMargin, topMargin); 

  text((wordHistory[0] + " which is close to " + colorHistory[0]), sideMargin, topMargin + (lineHeight))

  if (typeof colorHistory[0] == "string") {

    push()

    noStroke();

    let fillC = colorHistory[0];

    fill(fillC);

    let wordWidth = wordHistory[0]

    wordWidth = textWidth(wordWidth)

    rect(rectStartX, topMargin + (textHeight/2), wordWidth, textHeight);

    pop()

}

}

​

function getStartWordAndColor(){

  fill(255, 20, 0, 5);

  text("It starts with a word.", sideMargin, topMargin); 

  getColorFromWord(wordHistory[0], 0) 

  }

​

function startWithAWord(){

  let fadeIn = 100;

  if (fadeIn != 0){

    fadeIn = 100 - (frameCount/10)

  }

  fill(255, 20, fadeIn, 5);

  text("It starts with a word.", sideMargin, 64);

  let introText = "Be patient."

  if (seedWords.length > 10){

    introText = ""

  }

  text(introText, sideMargin, 64 + lineHeight);

  // if(!modelLoaded){

  //   text("Be patient.", 48, 64 + lineHeight);

  // }

  if (fadeIn < 95){

     introText = " "

​

    for (let seedWord of seedWords){

      seedWord.update();

      seedWord.hover();

      seedWord.show();

      if (seedWord.isSelected){

        ourStartWord = seedWord

        wordHistory.push(ourStartWord.word);

      }

​

    }

  }

  if (ourStartWord){

    runningPhase1 = false;

    runningPhase2 = true;

    seedWords = [];

    frameCount = 0;

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

​

​