KZNK Week09 KEYBOARD

   Week09-1 PImage   

開啟processing，輸入以下程式碼

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

命名week09_01_PImage

畫出鍵盤

  Week09-2 RECT X Y

開啟processing，輸入以下程式碼

命名week09_02_mouse_rect_xy

半透明紅色框來定位

  Week09-3 ARRAY

開啟processing，輸入以下程式碼

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); //半透明紅色
  rect(mouseX,mouseY,28,30,5);
  fill(0,200,0,128); //半透明綠色
  for(int i=0;i<26;i++){
    rect(pos[i][0],pos[i][1],28,30,5);
  }
}
void mousePressed(){
  print(mouseX, mouseY); //定位 印出mouse座標
}

命名week09_03_mouse_pos_2d_array

用09-2把A~Z的位置印出來，變成pos(position)陣列

  Week09-4

開啟processing，加入以下程式碼

boolean [] pressed= new boolean[26]; //JAVA的陣列宣告
void keyPressed(){
  if(key>='a'&&key<='z') pressed[key-'a']=true;
}
void keyReleased(){
  if(key>='a'&&key<='z') pressed[key-'a']=false;
}

命名week09_04_keyPresed_ketReleased

用boolean來判斷按下按鍵時綠框會亮

  Week09-5

開啟processing，輸入以下程式碼

命名week09_05_String_typing

讓目標字顯示在視窗上行 綠框顯示現在要打的字母 顯示在下行

  Week09-6

開啟processing，輸入以下程式碼

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); //半透明紅色
  rect(mouseX,mouseY,28,30,5);
  fill(0,200,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); //要打的字
  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的陣列宣告
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;
}

命名week09_06_String_typed

用紅色顯示下一個要打的字母  但目前無法判斷是否打字正確

  Week09-7

開啟processing，改變以下程式碼

void keyPressed(){
  if(key==typing.charAt(ID)) { //字母正確就往下
    pressed[key-'a']=true;
    typed+=key;
    ID++;
  }else{
    background(255,0,0); //畫面紅色閃一下背景
  }
}

命名week09_07_if_wrong_nothing

如果打錯就用紅色閃一下 

但超過字串會當機

  Week09-8

開啟processing，輸入以下程式碼

命名week09_08_length

讓ID小於打好字串的長度就不會當機了

  Week09-9

開啟processing，輸入以下程式碼

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); //半透明紅色
  rect(mouseX,mouseY,28,30,5);
  fill(0,200,0,128); //半透明綠色
  for(int i=0;i<26;i++){
    if(ID<typing.length() && 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); //要打的字
  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;
}

命名week09_09_space_manywords

可以用空白鍵