再...再課9單... - 互動技術概論 - Week09 - Keyboard

為了要做一個鍵盤會根據使用者按的按鍵會亮。

首先先把鍵盤的圖放上來。

PS.鍵盤的圖片要用拉得進去Processing

程式碼：

PImage img;
void setup()
{
  size(800, 600);
  img = loadImage("keyboard.png");
}
void draw()
{
  image(img, 0, 600-266);
}

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

讓滑鼠移動的同時可以看到一個方塊跟著，比較明顯。

程式碼：

PImage img;
void setup()
{
  size(800, 600);
  img = loadImage("keyboard.png");
  rectMode(CENTER); //用中心點畫正方形。
}
void draw()
{
  background(#FFFFF2);
  image(img, 0, 600-266);
  fill(255,0,0, 128); //128是透明度
  rect(mouseX, mouseY, 28, 30, 5);
}
void mousePressed()
{
  println(mouseX, mouseY); 
  //定位, 印出滑鼠的座標
}

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

把所有按鍵的座標都用綠色標出來。

程式碼：

PImage img;
int [][] pos = {{93,490},{246,524},{178,524},{161,490},{151,457},{195,491},{229,491},{263,491},{323,456},{298,490},{333,491},{366,491},{315,525},{281,524},{358,457},{392,456},{82,456},{186,456},{128,491},{220,456},{288,457},{212,524},{119,456},{145,524},{253,456},{110,525}};
void setup()
{
  size(800, 600);
  img = loadImage("keyboard.png");
  rectMode(CENTER); //用中心點畫正方形。
}
void draw()
{
  background(#FFFFF2);
  image(img, 0, 600-266);
  fill(255,0,0, 128); //128是透明度，半透明紅色
  rect(mouseX, mouseY, 28, 30, 5);
  fill(0,255,0,  128); //半透明綠色
  for(int i=0; i<26; i++)
  {
    rect(pos[i][0], pos[i][1], 28, 30, 5);
  }
}
void mousePressed()
{
  println(mouseX, mouseY); 
  //定位, 印出滑鼠的座標
}
------------------------------------------------------------------
讓按下按鍵時，視窗中的鍵盤也會亮。

程式碼：

PImage img;
int [][] pos = {{93,490},{246,524},{178,524},{161,490},{151,457},{195,491},{229,491},{263,491},{323,456},{298,490},{333,491},
                {366,491},{315,525},{281,524},{358,457},{392,456},{82,456},{186,456},{128,491},{220,456},{288,457},{212,524},
                {119,456},{145,524},{253,456},{110,525}};
void setup()
{
  size(800, 600);
  img = loadImage("keyboard.png");
  rectMode(CENTER); //用中心點畫正方形。
}
void draw()
{
  background(#FFFFF2);
  image(img, 0, 600-266);
  fill(255,0,0, 128); //128是透明度，半透明紅色
  rect(mouseX, mouseY, 28, 30, 5);
  fill(0,255,0,  128); //半透明綠色
  for(int i=0; i<26; i++)
  {
    if(pressed[i]) rect(pos[i][0], pos[i][1], 28, 30, 5);
  }
}
boolean [] pressed = new boolean[26]; //Java的陣列宣告，都是0或是false
void keyPressed()
{
  if(key>='a' && key<='z') pressed[key-'a'] = true;
}
void keyReleased()
{
  if(key>='a' && key<='z') pressed[key-'a'] = false;
}
void mousePressed()
{
  println(mouseX, mouseY); 
  //定位, 印出滑鼠的座標
}
------------------------------------------------------------------
讓按下按鍵時，上方空白處會跑出字母，下方鍵盤會亮。

程式碼：

PImage img;
int [][] pos = {{93,490},{246,524},{178,524},{161,490},{151,457},{195,491},{229,491},{263,491},{323,456},{298,490},{333,491},
                {366,491},{315,525},{281,524},{358,457},{392,456},{82,456},{186,456},{128,491},{220,456},{288,457},{212,524},
                {119,456},{145,524},{253,456},{110,525}};
void setup()
{
  size(800, 600);
  img = loadImage("keyboard.png");
  rectMode(CENTER); //用中心點畫正方形。
}
void draw()
{
  background(#FFFFF2);
  image(img, 0, 600-266);
  fill(255,0,0, 128); //128是透明度，半透明紅色
  rect(mouseX, mouseY, 28, 30, 5);
  fill(0,255,0,  128); //半透明綠色
  for(int i=0; i<26; i++)
  {
    if(typing.charAt(0)-'a'==i) rect(pos[i][0], pos[i][1], 28, 30, 5);
    if(pressed[i]) rect(pos[i][0], pos[i][1], 28, 30, 5);
  }
  fill(0);
  textSize(50);
  text(typing, 50, 50);
  text(typing.charAt(0), 50, 100);
  //現在要打得字, 是typing.charAt(0);
}
String typing = "printf";
boolean [] pressed = new boolean[26]; //Java的陣列宣告，都是0或是false
void keyPressed()
{
  if(key>='a' && key<='z') pressed[key-'a'] = true;
}
void keyReleased()
{
  if(key>='a' && key<='z') pressed[key-'a'] = false;
}
void mousePressed()
{
  println(mouseX, mouseY); 
  //定位, 印出滑鼠的座標
}
----------------------------------------------------------------------

按照上面的字打後，需要打的會是紅色，已經打的會是黑色。

程式碼：

PImage img;
int [][] pos = {{93,490},{246,524},{178,524},{161,490},{151,457},{195,491},{229,491},{263,491},{323,456},{298,490},{333,491},
                {366,491},{315,525},{281,524},{358,457},{392,456},{82,456},{186,456},{128,491},{220,456},{288,457},{212,524},
                {119,456},{145,524},{253,456},{110,525}};
void setup()
{
  size(800, 600);
  img = loadImage("keyboard.png");
  rectMode(CENTER); //用中心點畫正方形。
}
void draw()
{
  background(#FFFFF2);
  image(img, 0, 600-266);
  fill(255,0,0, 128); //128是透明度，半透明紅色
  rect(mouseX, mouseY, 28, 30, 5);
  fill(0,255,0,  128); //半透明綠色
  for(int i=0; i<26; i++)
  {
    if(typing.charAt(ID)-'a'==i) rect(pos[i][0], pos[i][1], 28, 30, 5);
    if(pressed[i]) rect(pos[i][0], pos[i][1], 28, 30, 5);
  }
  textSize(50);
  fill(0); //黑色的字
  text(typing, 50, 50); //要打的字
  fill(255, 0, 0); //紅色的字
  text(typed + typing.charAt(ID),50,100); //要打的字，是typing.charAt(0)
  fill(0); //黑色秀出已經打好的字
  text(typed, 50, 100); //已經打好的字
}
String typing = "printfprintfprintf"; //要打的字。
String typed = ""; //已經打了0個字。
int ID = 0; //第幾個字要被輸入
boolean [] pressed = new boolean[26]; //Java的陣列宣告，都是0或是false
void keyPressed()
{
  if(key>='a' && key<='z') 
  {
      pressed[key-'a'] = true;
      typed += key;
      ID++;
  }
}
void keyReleased()
{
  if(key>='a' && key<='z') pressed[key-'a'] = false;
}
void mousePressed()
{
  println(mouseX, mouseY); 
  //定位, 印出滑鼠的座標
}
----------------------------------------------------------------------
當使用者打錯字時，背景會閃爍紅色。

程式碼：

PImage img;
int [][] pos = {{93,490},{246,524},{178,524},{161,490},{151,457},{195,491},{229,491},{263,491},{323,456},{298,490},{333,491},
                {366,491},{315,525},{281,524},{358,457},{392,456},{82,456},{186,456},{128,491},{220,456},{288,457},{212,524},
                {119,456},{145,524},{253,456},{110,525}};
void setup()
{
  size(800, 600);
  img = loadImage("keyboard.png");
  rectMode(CENTER); //用中心點畫正方形。
}
void draw()
{
  background(#FFFFF2);
  image(img, 0, 600-266);
  fill(255,0,0, 128); //128是透明度，半透明紅色
  rect(mouseX, mouseY, 28, 30, 5);
  fill(0,255,0,  128); //半透明綠色
  for(int i=0; i<26; i++)
  {
    if(typing.charAt(ID)-'a'==i) rect(pos[i][0], pos[i][1], 28, 30, 5);
    if(pressed[i]) rect(pos[i][0], pos[i][1], 28, 30, 5);
  }
  textSize(50);
  fill(0); //黑色的字
  text(typing, 50, 50); //要打的字
  fill(255, 0, 0); //紅色的字
  text(typed + typing.charAt(ID),50,100); //要打的字，是typing.charAt(0)
  fill(0); //黑色秀出已經打好的字
  text(typed, 50, 100); //已經打好的字
}
String typing = "printfprintfprintf"; //要打的字。
String typed = ""; //已經打了0個字。
int ID = 0; //第幾個字要被輸入
boolean [] pressed = new boolean[26]; //Java的陣列宣告，都是0或是false
void keyPressed()
{
  if(key>='a' && key<='z') 
  {
      pressed[key-'a'] = true;
      typed += key;
      ID++;
  }
  else
  {
    background(255,0,0);
  }
}
void keyReleased()
{
  if(key>='a' && key<='z') pressed[key-'a'] = false;
}
void mousePressed()
{
  println(mouseX, mouseY); 
  //定位, 印出滑鼠的座標
}
------------------------------------------------------------------------

為了避免讓字數超出陣列的大小，所以讓當打的字不大於需要輸入的字串時才跑出文字。

程式碼：

PImage img;
int [][] pos = {{93,490},{246,524},{178,524},{161,490},{151,457},{195,491},{229,491},{263,491},{323,456},{298,490},{333,491},
                {366,491},{315,525},{281,524},{358,457},{392,456},{82,456},{186,456},{128,491},{220,456},{288,457},{212,524},
                {119,456},{145,524},{253,456},{110,525}};
void setup()
{
  size(800, 600);
  img = loadImage("keyboard.png");
  rectMode(CENTER); //用中心點畫正方形。
}
void draw()
{
  background(#FFFFF2);
  image(img, 0, 600-266);
  fill(255,0,0, 128); //128是透明度，半透明紅色
  rect(mouseX, mouseY, 28, 30, 5);
  fill(0,255,0,  128); //半透明綠色
  for(int i=0; i<26; i++)
  {
    if(ID<typing.length() && typing.charAt(ID)-'a'==i) rect(pos[i][0], pos[i][1], 28, 30, 5);
    if(pressed[i]) rect(pos[i][0], pos[i][1], 28, 30, 5);
  }
  textSize(50);
  fill(0); //黑色的字
  text(typing, 50, 50); //要打的字
  fill(255, 0, 0); //紅色的字
  if(ID<typing.length()) text(typed + typing.charAt(ID),50,100); //要打的字，是typing.charAt(0)
  fill(0); //黑色秀出已經打好的字
  text(typed, 50, 100); //已經打好的字
}
String typing = "printfprintfprintf"; //要打的字。
String typed = ""; //已經打了0個字。
int ID = 0; //第幾個字要被輸入
boolean [] pressed = new boolean[26]; //Java的陣列宣告，都是0或是false
void keyPressed()
{
  if(key>='a' && key<='z') 
  {
      if(ID<typing.length() && key==typing.charAt(ID))
      {
        pressed[key-'a'] = true;
        typed += key;
        ID++;
      }  
  }
  else
  {
    background(255,0,0);
  }
}
void keyReleased()
{
  if(key>='a' && key<='z') pressed[key-'a'] = false;
}
void mousePressed()
{
  println(mouseX, mouseY); 
  //定位, 印出滑鼠的座標
}
-----------------------------------------------------------------------

因為打程式碼時不會只有文字，還會有特殊符號和空白鍵，所以另外加上這些的格子。

然後優化字母的大小寫。

程式碼：

PImage img;
int [][] pos = {{93,490},{246,524},{178,524},{161,490},{151,457},{195,491},{229,491},{263,491},{323,456},{298,490},{333,491},
                {366,491},{315,525},{281,524},{358,457},{392,456},{82,456},{186,456},{128,491},{220,456},{288,457},{212,524},
                {119,456},{145,524},{253,456},{110,525}};
void setup()
{
  size(800, 600);
  img = loadImage("keyboard.png");
  rectMode(CENTER); //用中心點畫正方形。
}
void draw()
{
  background(#FFFFF2);
  image(img, 0, 600-266);
  fill(255,0,0, 128); //128是透明度，半透明紅色
  rect(mouseX, mouseY, 28, 30, 5);
  fill(0,255,0,  128); //半透明綠色
  for(int i=0; i<26; i++)
  {
    if(ID<typing.length() && typing.charAt(ID)-'a'==i) rect(pos[i][0], pos[i][1], 28, 30, 5);
    if(pressed[i]) rect(pos[i][0], pos[i][1], 28, 30, 5);
  }
  textSize(50);
  fill(0); //黑色的字
  text(typing, 50, 50); //要打的字
  fill(255, 0, 0); //紅色的字
  if(ID<typing.length()) text(typed + typing.charAt(ID),50,100); //要打的字，是typing.charAt(0)
  fill(0); //黑色秀出已經打好的字
  text(typed, 50, 100); //已經打好的字
}
String typing = "printf is a function"; //要打的字。
String typed = ""; //已經打了0個字。
int ID = 0; //第幾個字要被輸入
boolean [] pressed = new boolean[26]; //Java的陣列宣告，都是0或是false
void keyPressed()
{
  if(ID<typing.length() && key==typing.charAt(ID))
  {
      if(key>='a' && key<='z') 
      {
        pressed[key-'a'] = true;
        typed += key;
        ID++;
      }  
      else if (key==' ')
      {
        typed += key;
        ID++;
      }
      else
      {
        background(255,0,0);
      }
  }
}
void keyReleased()
{
  if(key>='a' && key<='z') pressed[key-'a'] = false;
}
void mousePressed()
{
  println(mouseX, mouseY); 
  //定位, 印出滑鼠的座標
}

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