topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

#javascript-processing-example-basic-inputs-keyboardfunctions.htm / htm


  <!DOCTYPE html>
  <html><head>
  <script src="javascript-processing-example-processing.js"></script>
  <script src="javascript-processing-example-init.js"></script>
  <link rel="stylesheet" href="javascript-processing-example-style.css">
  </head><body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
  <h2>KeyboardFunctions</h2>
  
  <p>Modified from code by Martin. 
  Original 'Color Typewriter' concept by John Maeda. 
  
  Click on the window to give it focus and press the letter keys to type colors. 
  The keyboard function keyPressed() is called whenever
  a key is pressed. keyReleased() is another keyboard
  function that is called when a key is released.</p>
  
  <p><a href="http://processing.org/learning/basics/keyboardfunctions.html"><b>Original Processing.org Example:</b> KeyboardFunctions</a><br>
  <script type="application/processing">
  int max_height = 20;
  int min_height = 10;
  int letter_height = max_height; // Height of the letters
  int letter_width = 10;          // Width of the letter
  
  int x = -letter_width;          // X position of the letters
  int y = 0;                      // Y position of the letters
  
  boolean newletter;              
  
  int numChars = 26;      // There are 26 characters in the alphabet
  color[] colors = new color[numChars];
  
  void setup()
  {
    size(200, 200);
    noStroke();
    colorMode(RGB, numChars);
    background(numChars/2);
    // Set a gray value for each key
    for(int i=0; i<numChars; i++) {
      colors[i] = color(i, i, i);    
    }
  }
  
  void draw()
  {
    if(newletter == true) {
      // Draw the "letter"
      int y_pos;
      if (letter_height == max_height) {
        y_pos = y;
        rect( x, y_pos, letter_width, letter_height );
      } else {
        y_pos = y + min_height;
        rect( x, y_pos, letter_width, letter_height );
        fill(numChars/2);
        rect( x, y_pos-min_height, letter_width, letter_height );
      }
      newletter = false;
    }
  }
  
  void keyPressed()
  {
    // if the key is between 'A'(65) and 'z'(122)
    if( key >= 'A' && key <= 'z') {
      int keyIndex;
      if(key <= 'Z') {
        keyIndex = key-'A';
        letter_height = max_height;
        fill(colors[key-'A']);
      } else {
        keyIndex = key-'a';
        letter_height = min_height;
        fill(colors[key-'a']);
      }
    } else {
      fill(0);
      letter_height = 10;
    }
  
    newletter = true;
  
    // Update the "letter" position
    x = ( x + letter_width ); 
  
    // Wrap horizontally
    if (x > width - letter_width) {
      x = 0;
      y+= max_height;
    }
  
    // Wrap vertically
    if( y > height - letter_height) {
      y = 0;      // reset y to 0
    }
  }
  </script><canvas width="200" height="200"></canvas></p>
  <div style="overflow: hidden; height: 0px; width: 0px;"><img src="javascript-processing-example-brugges.jpg" id="brugges.jpg"></div>
  
  <pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
  // unless otherwise stated.</b>
  int max_height = 20;
  int min_height = 10;
  int letter_height = max_height; // Height of the letters
  int letter_width = 10;          // Width of the letter
  
  int x = -letter_width;          // X position of the letters
  int y = 0;                      // Y position of the letters
  
  boolean newletter;              
  
  int numChars = 26;      // There are 26 characters in the alphabet
  color[] colors = new color[numChars];
  
  void setup()
  {
    size(200, 200);
    noStroke();
    colorMode(RGB, numChars);
    background(numChars/2);
    // Set a gray value for each key
    for(int i=0; i&lt;numChars; i++) {
      colors[i] = color(i, i, i);    
    }
  }
  
  void draw()
  {
    if(newletter == true) {
      // Draw the "letter"
      int y_pos;
      if (letter_height == max_height) {
        y_pos = y;
        rect( x, y_pos, letter_width, letter_height );
      } else {
        y_pos = y + min_height;
        rect( x, y_pos, letter_width, letter_height );
        fill(numChars/2);
        rect( x, y_pos-min_height, letter_width, letter_height );
      }
      newletter = false;
    }
  }
  
  void keyPressed()
  {
    // if the key is between 'A'(65) and 'z'(122)
    if( key &gt;= 'A' &amp;&amp; key &lt;= 'z') {
      int keyIndex;
      if(key &lt;= 'Z') {
        keyIndex = key-'A';
        letter_height = max_height;
        fill(colors[key-'A']);
      } else {
        keyIndex = key-'a';
        letter_height = min_height;
        fill(colors[key-'a']);
      }
    } else {
      fill(0);
      letter_height = 10;
    }
  
    newletter = true;
  
    // Update the "letter" position
    x = ( x + letter_width ); 
  
    // Wrap horizontally
    if (x &gt; width - letter_width) {
      x = 0;
      y+= max_height;
    }
  
    // Wrap vertically
    if( y &gt; height - letter_height) {
      y = 0;      // reset y to 0
    }
  }</pre>
  
  </body></html>

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.