Type words to start an animation?

Processing Project Guidance
1

Hi all, Im trying to find a tutorial that might explain how to allow a user to type in a word and begin an animation for an interactive map of my shop’s inventory. For example, if a person types in “screwdrivers” it would create a circle around the location on the map of the shop.

Are there any tutorials out there that could get me started?

Thanks!

2

Lots of examples in the forum

see User Type Input - #2 by MiguelSanches

Example

// Sketch to show customers in a store the positions of items/products. 

// Sketch can be improved a lot 

// const
final int NONE = -1; //undefined 

//sets up input
String inputText = "";

// for blink 
boolean cursorBlinkingOn=false; 

// current radius (grwoing)
float radius=0; 

// number of typed item 
int currentItem=NONE;

// list of items 
final int max = 100; // const 

String[] items = new String[max]; // could be a class  
int[] x  = new int [max]; 
int[] y  = new int [max];
int[] col  = new int [max];

// to retrieve index from the String screwdrivers
HashMap<String, Integer> list = new HashMap<String, Integer>();  

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

void setup() {
  size(1200, 600);
  background(255);

  // pre init
  for (int i=0; i<items.length; i++) {
    items[0] = "";
  }

  // setup items / could be read from a file 
  int i=0;
  items[i] = "screwdrivers";  
  x[i]=210;
  y[i]=250;
  col[i] = color(255, 0, 0);
  list.put(items[i], i); 

  i++;
  items[i] = "hammer";  
  x[i]=600+120;
  y[i]=60+70;
  col[i] = color(0, 255, 0);
  list.put(items[i], i);
}

void draw() {
  background(255);

  // show scene / ground floor plan 
  scene(); 

  // show item when there has been one typed in  
  showCurrentItem(); 

  // show help and current word that is typed in 
  textSize(20);
  fill(0);
  text("Enter shop item (Use Backspaace, ESC to delete, Enter to submit, # for 'screwdrivers', try hammer): " 
    + inputText 
    + blinkingCursor(), 
    10, height-22);
}

// --------------------------------------------------------------------
//key inputs

void keyPressed() {
  // eval 

  smallReset();

  if (key == ENTER || key == RETURN) {
    submit();
  } else if (key == '#') {
    inputText="screwdrivers";// test
  } else if (key == BACKSPACE) {
    inputText = inputText.substring(0, max(0, inputText.length()-1));
  } else if (key == ESC) {
    key=0;//kill Esc
    inputText = "";//delete word
  } else {
    if (! (key == CODED)) {
      inputText = inputText + key;
    }
  }
}

// --------------------------------------------------------------------
// Tools 

void smallReset() {
  radius=0; 
  currentItem=NONE;
}

void showCurrentItem() {
  if (currentItem==NONE) 
    return; // leave 

  // show ellipse 
  fill(col[currentItem]); 
  ellipse(x[currentItem], y[currentItem], radius, radius); 
  if (radius<=40 && frameCount%4==0) {
    radius++; // grow
  } 

  // show text when animation is almost finished  
  if (radius>=30) {
    fill(col[currentItem]); 
    text(items[currentItem], 
      x[currentItem]+22, y[currentItem]+22);
  }
}

void submit() {
  // submit input 
  int result; 
  if (list.get(inputText)!=null) {
    //found
    result = (int)list.get(inputText);
    currentItem=result;
  } else {
    currentItem=NONE; 
    return;
  }
}

void scene() {
  fill(111); 
  rect(201, 200, 70, 170); 
  rect(601, 60, 240, 70);
}

String blinkingCursor() {
  if (frameCount%17==0) 
    cursorBlinkingOn = 
      ! cursorBlinkingOn; // toggle 

  if (cursorBlinkingOn)
    return "|"; 
  else return "";
}
//

NEW VERSION

  • can read now from a String list (that you can replace with load Google Sheet or whatever, using the loadStrings line instead of the array thereafter)
  • not case-sensitive anymore, all goes upper-case internally
  • The input (when longer 1) will be searched in the list and suggestions are given upper right corner

To point 1: when reading the String list, the name of the item is retrieved and the Cabinet location also. The item is just copied. BUT the Cabinet location is translated into a screen position. This you have to do manually in the code. So for all Cabinet locations you have to write down the respective position in the switch-statement.


// https://discourse.processing.org/t/type-words-to-start-an-animation/38273/2

// Sketch to show customers in a store positions of items/products. 

// Sketch can be improved a lot 

// const
final int NONE = -1; //undefined 

//sets up input
String inputText = "";

// for blink 
boolean cursorBlinkingOn=false; 

// current radius (grwoing)
float radius=0; 

// number of typed item 
int currentItem=NONE;

// list of items 
final int max = 100; // const 

String[] items = new String[max]; // could be a class  
int[] x  = new int [max]; 
int[] y  = new int [max];
int[] col  = new int [max];

// to retrieve index from the String screwdrivers
HashMap<String, Integer> list = new HashMap<String, Integer>();  

ArrayList<String> listSuggestions= new ArrayList(); 

//String[] listFromFile = loadStrings(...);// from Google Sheet 
String[] listFromFile = {
  "screwdrivers,Cabinet 1", 
  "screws,Cabinet 2", 
  "hammer,Cabinet 3"
};

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

void setup() {
  size(1200, 600);
  background(255);

  // pre init
  for (int i=0; i<items.length; i++) {
    items[i] = "";
  }

  int i=0; 
  for (String currentLine : listFromFile) {
    String[] singlePartsOfLine=split(currentLine, ",");
    items[i] = singlePartsOfLine[0].trim().toUpperCase(); 
    col[i] = color(255, 0, 0);
    list.put(items[i], i); 
    // get x,y
    //float x1=10, y1=10;
    switch(singlePartsOfLine[1].trim()) {
    case "Cabinet 1":
      x[i]=210;
      y[i]=250;
      println("OK");
      break; 
    case "Cabinet 2":
      x[i]=600+120;
      y[i]=60+70;
      break; 
    case "Cabinet 3":
      x[i]=600+120+110;
      y[i]=60+70;
      break; 
    default:
      println("Cabinet not found "
        + singlePartsOfLine[1]); 
      break;
    }//switch
    i++;
  }//for

  /*
  // setup items / could be read from a file 
   int itemNo=0;
   items[itemNo] = "screwdrivers".toUpperCase();  
   x[itemNo]=210;
   y[itemNo]=250;
   col[itemNo] = color(255, 0, 0);
   list.put(items[itemNo], itemNo); 
   
   itemNo++;
   items[itemNo] = "hammer".toUpperCase();  
   x[itemNo]=600+120;
   y[itemNo]=60+70;
   col[itemNo] = color(0, 255, 0);
   list.put(items[itemNo], itemNo);
   
   itemNo++;
   items[itemNo] = "screws".toUpperCase();  
   x[itemNo]=600+120+110;
   y[itemNo]=60+70;
   col[itemNo] = color(0, 255, 0);
   list.put(items[itemNo], itemNo);
   // more items HERE
   */

  // all upper case 
  for (int i2=0; i2<items.length; i2++) {
    items[i2] = items[i2].toUpperCase();
  }
}

void draw() {
  background(255);

  // show scene / ground floor plan 
  scene(); 

  // show item when there has been one typed in  
  showCurrentItem(); 

  // show help and current word that is typed in 
  textSize(20);
  fill(0);
  text("Enter shop item (Use Backspaace, ESC to delete, Enter to submit, # for 'screwdrivers', try hammer): " 
    + inputText 
    + blinkingCursor(), 
    10, height-22);

  //show suggestions
  int i3=0; 
  textSize(12);
  fill(0);
  for (String s1 : listSuggestions) {
    text( s1, width-190, i3*20+22); 
    i3++;
  }
}

// --------------------------------------------------------------------
//key inputs

void keyPressed() {
  // eval 

  smallReset();

  if (key == ENTER || key == RETURN) {
    submit();
  } else if (key == '#') {
    inputText="screwdrivers";// test
  } else if (key == BACKSPACE) {
    inputText = inputText.substring(0, max(0, inputText.length()-1));
  } else if (key == ESC) {
    key=0;//kill Esc
    inputText = "";//delete word
  } else {
    if (! (key == CODED)) {
      inputText = inputText + key;
    }
  }

  listSuggestions.clear();
  if (inputText.length()>=1) {
    for (int i=0; i<items.length; i++) {
      if ( items[i].contains(inputText.toUpperCase())) {
        listSuggestions.add(items[i]);
        if (listSuggestions.size()>19) {
          break; // leave
        }
      }
    }
  }
}

// --------------------------------------------------------------------
// Tools 

void smallReset() {
  radius=0; 
  currentItem=NONE;
}

void showCurrentItem() {
  if (currentItem==NONE) 
    return; // leave 

  // show ellipse 
  fill(col[currentItem]); 
  ellipse(x[currentItem], y[currentItem], radius, radius); 
  if (radius<=40 && frameCount%4==0) {
    radius++; // grow
  } 

  // show text when animation is almost finished  
  if (radius>=30) {
    fill(col[currentItem]); 
    text(items[currentItem], 
      x[currentItem]+22, y[currentItem]+22);
  }
}

void submit() {
  // submit input 
  int result; 
  if (list.get(inputText.toUpperCase())!=null) {
    //found
    result = (int)list.get(inputText.toUpperCase());
    currentItem=result;
  } else {
    currentItem=NONE; 
    return;
  }
}

void scene() {
  fill(111); 
  rect(201, 200, 70, 170); 
  rect(601, 60, 240, 70);
}

String blinkingCursor() {
  if (frameCount%17==0) 
    cursorBlinkingOn = 
      ! cursorBlinkingOn; // toggle 

  if (cursorBlinkingOn)
    return "|"; 
  else return "";
}
//
1 Like