​

Smart Tiles Demo by Brandon Roots

ITP Fall 2020

​

-------------------------------------------------------

This sketch makes use of p5.Speech

Web Audio Speech Synthesis and Speech Recognition Implementation for p5.js (http://p5js.org)

​

R. Luke DuBois (dubois@nyu.edu) 

ABILITY Project / Brooklyn Experimental Media Center 

NYU

​

-------------------------------------------------------

​

*/

​

let myFont;

let w;

let h;

let t1 = [240,' '];

let t2 = [240,' '];

let t3 = [240,' '];

let emic = new p5.Speech(); // speech synthesis object

let message = 'Click on the tile board to start';

let redButton;

let whiteButton;

let gameMode = false;

let gameWord;

let wordList = ['ANT','CAT','DOG','COW','FLY','APE','OWL','FOX','ELK','YAK','BAT','PIG','COY','EMU','RAT','DOE','HEN','KID','RAM'];

​

let alphabet = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',' ',' ',' '];

let asciiCode = ['65','66','67','68','69','70','71','72','73','74','75','76','77','78','79','80','81','82','83','84','85','86','87','88','89','90','8','32','127']

​

function preload() {

  myFont = loadFont('Pixeled.ttf');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  w = windowWidth;

  h = windowHeight;

  redButton = {

    x: w/3.4,

    y: (h/2)-(w/17),

    r: w/40,

    c: '#ED225D'

  }

  whiteButton = {

    x: w/1.42,

    y: (h/2)+(w/17),

    r: w/40,

    c: '#fff'

  }

  emic.speak(message); // say hello

  //emic.speak('Let\'s play a game! I am thinking of a three letter word. Take a guess!'); // start game

}

​

function draw() {

  background(220);

  displayMessage();

  smartTiles();

  title();

  userInput();

}

​

function userInput() {

  // Tile 1

  if(mouseY > (h/2)-(w/12) && mouseY < (h/2)+(w/12) && mouseX > w*'.35' && mouseX < w*'.43'){

    t1[0] = 253;

    //console.log("Mouse in range.");

  } else {

    if(t1[1] == ' '){

      t1[0] = 240;

    } else {

      t1[0] = 250;

    }

  }

  // Tile 2

  if(mouseY > (h/2)-(w/12) && mouseY < (h/2)+(w/12) && mouseX > w*'.46' && mouseX < w*'.54'){

    t2[0] = 253;

    //console.log("Mouse in range.");

  } else {

    if(t2[1] == ' '){

      t2[0] = 240;

    } else {

      t2[0] = 250;

    }

  }

  // Tile 3

  if(mouseY > (h/2)-(w/12) && mouseY < (h/2)+(w/12) && mouseX > w*'.57' && mouseX < w*'.65'){

    t3[0] = 253;

    //console.log("Mouse in range.");

  } else {

    if(t3[1] == ' '){

      t3[0] = 240;

    } else {

      t3[0] = 250;

    }

  }

  // Red button

  myDist = dist(redButton.x, redButton.y, mouseX, mouseY)

  //if myDist is greater than the radius, the mouse is outside the circle

  if (myDist < redButton.r) {

    redButton.c = '#bf063d';

  } else {

    redButton.c = '#ED225D';

  }

  // White button

  myDist = dist(whiteButton.x, whiteButton.y, mouseX, mouseY)

  //if myDist is greater than the radius, the mouse is outside the circle

  if (myDist < whiteButton.r) {

    whiteButton.c = 200;

  } else {

    whiteButton.c = '#FFF';

  }

}

​

function smartTiles() {

  push();

  translate(w/4, (h/2)-(w/8));

  //base

  strokeWeight(15);

  stroke(240);

  fill(250);

  rect(0, 0, w/2, w/4, 20);

  strokeWeight(5);

  stroke(230);

  noFill();

  rect(w/12, -5, w/3, w/4+10);

  strokeWeight(5);

  stroke(220);

  // Tile 1

  fill(t1[0]);

  rect(w/10, w/25, w/12, w/6, 10);

  // Tile 1 Letter

  fill(210);

  textFont(myFont);

  textSize(w/20);

  textAlign(CENTER);

  text(t1[1], w/6.8, w/6.5);

  // Tile 2

  fill(t2[0]);

  rect(w/4.8, w/25, w/12, w/6, 10);

  // Tile 2 Letter

  fill(210);

  textFont(myFont);

  textSize(w/20);

  text(t2[1], w/3.93, w/6.5);

  // Tile 3

  fill(t3[0]);

  rect(w/3.17, w/25, w/12, w/6, 10);

  // Tile 3 Letter

  fill(210);

  textFont(myFont);

  textSize(w/20);

  text(t3[1], w/2.76, w/6.5);

  pop();

  // red button

  strokeWeight(5);

  stroke(230);

  fill(redButton.c);

  ellipseMode(CENTER);

  ellipse(redButton.x, redButton.y, redButton.r*2);

  // white button

  strokeWeight(5);

  stroke(230);

  fill(whiteButton.c);

  ellipse(whiteButton.x, whiteButton.y, whiteButton.r*2);

  //any tiles

}

​

function title(){

  push();

  fill('#ED225D');

  textFont(myFont);

  textSize(h*'.04');

  text('SMART TILES', 30, 50);

  fill(180);

  textAlign(RIGHT);

  textSize(h*'.02');

  text('BY BRANDON ROOTS / ITP FALL 2020', w-30, h-30);

  pop();

}

​

function keyPressed(){

  let key = keyCode;

  //console.log(keyCode);

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

    if(key == (asciiCode[i])){

      // check which tile space and replace

      //Tile 1

      if(mouseY > (h/2)-(w/12) && mouseY < (h/2)+(w/12) && mouseX > w*'.35' && mouseX < w*'.43'){

        t1[1] = alphabet[i];

        t1[0] = 250;

        emic.speak(alphabet[i]); // say letter

        console.log(alphabet[i]);

        message = alphabet[i];

      }

      //Tile 2

      if(mouseY > (h/2)-(w/12) && mouseY < (h/2)+(w/12) && mouseX > w*'.46' && mouseX < w*'.54'){

        t2[1] = alphabet[i];

        t2[0] = 250;

        emic.speak(alphabet[i]); // say letter

        console.log(alphabet[i]);

        message = alphabet[i];

      }

      //Tile 3  

      if(mouseY > (h/2)-(w/12) && mouseY < (h/2)+(w/12) && mouseX > w*'.57' && mouseX < w*'.65'){

        t3[1] = alphabet[i];

        t3[0] = 250;

        emic.speak(alphabet[i]); // say letter

        console.log(alphabet[i]);

        message = alphabet[i];

      } else {

        if(message == 'Perfect! Now type a letter'){

          message = 'Great! Point to a tile slot while you type';

          emic.speak(message);

        }        

      }

    }

  }

}

​

function displayMessage(){

  push();

  fill('#ED225D');

  textFont(myFont);

  textSize(w*'.015');

  textAlign(CENTER);

  text(message, w*'.5', h-80);

  pop();

}

​

function mousePressed() {

  if(message == 'Click on the tile board to start'){

    message = 'Perfect! Now type a letter';

    emic.speak(message);

    return

  }

  // Red button

  myDist = dist(redButton.x, redButton.y, mouseX, mouseY)

  //if myDist is greater than the radius, the mouse is outside the circle

  if (myDist < redButton.r) {

    gameFunction(true);

    t1[1] = ' ';

    t2[1] = ' ';

    t3[1] = ' ';

  }

  // White button

  myDist = dist(whiteButton.x, whiteButton.y, mouseX, mouseY)

  //if myDist is greater than the radius, the mouse is outside the circle

  if (myDist < whiteButton.r) {

    let wordEntered = t1[1] + t2[1] + t3[1]

    message = wordEntered;

    // set message if no tiles on board

    if(message == null || message.trim() === ''){

      message = 'No tiles are on the board';

    }

    // Check answer

    if(gameMode == true){

      if(gameWord == wordEntered){

        message = 'Yes! I was thinking of ' + gameWord;

      } else {

        message = 'It is not ' + wordEntered;

      }

    }

    lowercase = message.toLowerCase();

    emic.speak(lowercase);

  } 

}

function gameFunction(start){

  if(gameMode == false){

    // start game

    message = 'Lets play a game!';

    emic.speak('Lets play a game! I am thinking of an animal. Take a guess!');

    gameWord = wordList[floor(random(0, wordList.length))];

    console.log(gameWord);

    gameMode = true;

    return;

  }

  if(gameMode == true && start == true){

    gameMode = false;

    gameWord = '';

    message = 'Thanks for playing!';

    emic.speak('Ok, lets do something else. Thanks for playing!');

  }

}