2023年11月9日 星期四

chotwo_week09

 Week09 互動式鍵盤



    week09_1_keyboard_PImage_image


▼ 圖片拉進程式素描本，秀鍵盤



    

    week09_2_keyboard_mouse_rect_x_y


▼半透明方框顯示滑鼠位置，印出

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);//半透明
  rect(mouseX,mouseY, 28,30, 5); //圓角
}
void mousePressed(){
  println(mouseX, mouseY); //定位，印出mouse座標
}

    week09_3_keyboard_pos_2d_array


▼ 將26個字母在畫面中的位置複製起來
貼到notepad++ 利用取代功能將多組數字變成二維陣列


▼ \r\n取代為空字元


▼ 如果陣列出錯可以用二分逼近法找到錯誤

PImage img;
int [][] pos={{91,490},{247,525},{178,525},{160,489},{151,456},{194,489},{230,488},{261,490},{322,455},{298,489},{331,489},{368,490},{314,524},{281,524},{357,453},{390,454},{85,456},{185,456},{127,489},{219,457},{288,457},{212,523},{117,456},{143,523},{253,457},{109,522}};
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,255,0, 128);
  for(int i=0; i<26;i++){
    rect(pos[i][0], pos[i][1],28,30,5); // 在pos(x,y)顯示綠色半透明

  }
}
void mousePressed(){
  println(mouseX, mouseY); //定位，印出mouse座標
}

    week09_4_keyboard_keyPressed_keyRelease_pressed 

 


▼ pressed['a'-'a']=true; --> pressed[0]=true;
if(pressed[i])被按下的key畫綠色半透明方框
放開按鍵就不畫


PImage img;
int [][] pos={{91,490},{247,525},{178,525},{160,489},{151,456},{194,489},{230,488},{261,490},{322,455},{298,489},{331,489},{368,490},{314,524},{281,524},{357,453},{390,454},{85,456},{185,456},{127,489},{219,457},{288,457},{212,523},{117,456},{143,523},{253,457},{109,522}};
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,255,0, 128);
  for(int i=0; i<26;i++){
    if(pressed[i])rect(pos[i][0], pos[i][1],28,30,5); // 在pos(x,y)顯示綠色半透明
  } //如有按下再印
}
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; //沒有按下
}


    week09_5_keyboard_String_typing 


▼ show要打的字typing、現在要打的字typing.CharAt(0) //第0個字元是p

PImage img;
int [][] pos={{91,490},{247,525},{178,525},{160,489},{151,456},{194,489},{230,488},{261,490},{322,455},{298,489},{331,489},{368,490},{314,524},{281,524},{357,453},{390,454},{85,456},{185,456},{127,489},{219,457},{288,457},{212,523},{117,456},{143,523},{253,457},{109,522}};
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,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); // 在pos(x,y)顯示綠色半透明
  } //如有按下再印
  fill(0); //黑字
  textSize(50); //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; //沒有按下
}


week09_6_keyboard_String_typing_typed 


▼ 顯示已經打完的字，一開始String typed=""; //紅色
ID現在在打第幾個字? charAt(0)-->charAt(ID)

PImage img;
int [][] pos={{91,490},{247,525},{178,525},{160,489},{151,456},{194,489},{230,488},{261,490},{322,455},{298,489},{331,489},{368,490},{314,524},{281,524},{357,453},{390,454},{85,456},{185,456},{127,489},{219,457},{288,457},{212,523},{117,456},{143,523},{253,457},{109,522}};
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,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); // 在pos(x,y)顯示綠色半透明
  } //如有按下再印
  fill(0); //黑字
  textSize(50); //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的陣列宣告都是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; //沒有按下
}


    week09_7_keyboard_if_wrong_nothing 



▼ 解決錯字印出問題，打錯畫面會閃爍紅色背景




PImage img;
int [][] pos={{91,490},{247,525},{178,525},{160,489},{151,456},{194,489},{230,488},{261,490},{322,455},{298,489},{331,489},{368,490},{314,524},{281,524},{357,453},{390,454},{85,456},{185,456},{127,489},{219,457},{288,457},{212,523},{117,456},{143,523},{253,457},{109,522}};
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,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); // 在pos(x,y)顯示綠色半透明
  } //如有按下再印
  fill(0); //黑字
  textSize(50); //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的陣列宣告都是0或false
void keyPressed(){
  if(key>='a'&&key<='z' && 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; //沒有按下
}

    week09_8_keyboard_if_ID_not_in _length


▼ 解決超過字串範圍問題

PImage img;
int [][] pos={{91,490},{247,525},{178,525},{160,489},{151,456},{194,489},{230,488},{261,490},{322,455},{298,489},{331,489},{368,490},{314,524},{281,524},{357,453},{390,454},{85,456},{185,456},{127,489},{219,457},{288,457},{212,523},{117,456},{143,523},{253,457},{109,522}};
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,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); // 在pos(x,y)顯示綠色半透明
  } //如有按下再印
  fill(0); //黑字
  textSize(50); //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 = "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; //沒有按下
}

    week09_9_keyboard_space_many_words


▼ 按下space會加入已經打好的typed，ID也會+1
if(key=='a'~'z') 和  if(長度和字元正確) 上下交換



PImage img;
int [][] pos={{91,490},{247,525},{178,525},{160,489},{151,456},{194,489},{230,488},{261,490},{322,455},{298,489},{331,489},{368,490},{314,524},{281,524},{357,453},{390,454},{85,456},{185,456},{127,489},{219,457},{288,457},{212,523},{117,456},{143,523},{253,457},{109,522}};
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,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); // 在pos(x,y)顯示綠色半透明
  } //如有按下再印
  fill(0); //黑字
  textSize(50); //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; //沒有按下
}












於






















標籤：
,


















沒有留言:















張貼留言























        

      









訂閱：
張貼留言 (Atom)