2023互動技術: WW-Week09_keyboard

第一節課

演講改成下禮拜，期中順延

今天想寫的程式: 大一的新生找不到鍵盤，所以想做一個打字的遊戲，有鍵盤圖片，按對應的鍵，可以看到螢幕上也顯示鍵盤位置

第一個小程式week09_1_keyboard_PImage_image

先將圖片拉進去Processing

PImage img;
void setup(){
  size(800,600);
  img =loadImage("keyboard.png");///讀進圖片
}
void draw(){
  image(img, 0, 600-266);//Y往下移動266是圖片的高度
}

第二個小程式week09_2_keyboard_mouse_recy_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);///依滑鼠座標印出方塊，5設定圓滑的角
}
void mousePressed(){
  print(mouseX,mouseY);//定位、印出mousey座標
}

第三個小程式week09_3_keyboard_2D_array

印出所有字母的座標位置，並整理成陣列(ctrl+h取代空白，變逗號；把跳行，變陣列},{)，整理完後加入程式在陣列位置，畫出綠色半透明方塊在座標位置

PImage img;
int [][] pos ={{83,456},{116,456},{152,457},{188,457},{220,456},{253,456},{289,456},{323,457},{358,457},{393,456},{93,489},{127,491},{162,491},{196,491},{230,490},{264,490},{300,490},{334,490},{367,490},{110,523},{143,524},{179,524},{213,524},{247,524},{280,524},{316,524}};
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);///依滑鼠座標印出方塊，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);//定位、印出mousey座標
}
第二節課

第四個小程式week09_4_keyboard_keyPressed_keyReleased_pressed

當按下鍵盤的字母時，會螢幕上的鍵盤位置會亮起來(再設一個陣列)

PImage img;
int [][] pos ={{92,489},{245,525},{178,523},{163,490},{153,457},{195,491},{230,491},{263,491},{324,457},{297,490},{330,490},{365,490},{314,525},{280,524},{356,457},{392,456},{83,456},{186,457},{128,491},{221,457},{288,457},{212,523},{119,456},{143,523},{255,457},{109,524}};
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);///依滑鼠座標印出方塊，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;
}

第五個小程式week09_5_keyboard_string_typing

上面顯示的字會在鍵盤位置亮起來，提醒鍵盤位置

PImage img;
int [][] pos ={{92,489},{245,525},{178,523},{163,490},{153,457},{195,491},{230,491},{263,491},{324,457},{297,490},{330,490},{365,490},{314,525},{280,524},{356,457},{392,456},{83,456},{186,457},{128,491},{221,457},{288,457},{212,523},{119,456},{143,523},{255,457},{109,524}};
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);///依滑鼠座標印出方塊，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;
}

第六個小程式week09_6_keyboard_string_typing_typed

現在可以顯示出要打的字母，並且在螢幕鍵盤亮起來鍵盤位置

紅色是現在要打的，打完再變黑色ID用來算第幾個要被打

PImage img;
int [][] pos ={{92,489},{245,525},{178,523},{163,490},{153,457},{195,491},{230,491},{263,491},{324,457},{297,490},{330,490},{365,490},{314,525},{280,524},{356,457},{392,456},{83,456},{186,457},{128,491},{221,457},{288,457},{212,523},{119,456},{143,523},{255,457},{109,524}};
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);///依滑鼠座標印出方塊，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 ="printfprintfptintf";//目標打出的字
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

***發現兩個問題:

1.打錯的時候後還是會往下一直印，錯的話應該不繼續(當打出來的字跟顯示的一樣才繼續)

PImage img;
int [][] pos ={{92,489},{245,525},{178,523},{163,490},{153,457},{195,491},{230,491},{263,491},{324,457},{297,490},{330,490},{365,490},{314,525},{280,524},{356,457},{392,456},{83,456},{186,457},{128,491},{221,457},{288,457},{212,523},{119,456},{143,523},{255,457},{109,524}};
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);///依滑鼠座標印出方塊，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 ="printfprintfptintf";//目標打出的字
String typed = "";//一開始打了0個字,打一個就跳下一個 
int ID = 0;///第幾個字母要被打
boolean []pressed =new boolean[26];//Java的陣列宣告,都是0或false
void keyPressed(){
  if(key>='a' && key<='z'){
    if(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_lenght

2.發現打到跟要打的一樣長度時，右下角出現紅色程式會當掉，所以ID不能一直往下加加加會當掉，陣列不能超過範圍，設一個安全門(如果ID沒有超過typing長度)

PImage img;
int [][] pos ={{92,489},{245,525},{178,523},{163,490},{153,457},{195,491},{230,491},{263,491},{324,457},{297,490},{330,490},{365,490},{314,525},{280,524},{356,457},{392,456},{83,456},{186,457},{128,491},{221,457},{288,457},{212,523},{119,456},{143,523},{255,457},{109,524}};
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);///依滑鼠座標印出方塊，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 ="printfprintfptintf";//目標打出的字
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的功能

PImage img;
int [][] pos ={{92,489},{245,525},{178,523},{163,490},{153,457},{195,491},{230,491},{263,491},{324,457},{297,490},{330,490},{365,490},{314,525},{280,524},{356,457},{392,456},{83,456},{186,457},{128,491},{221,457},{288,457},{212,523},{119,456},{143,523},{255,457},{109,524}};
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);///依滑鼠座標印出方塊，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 ="print 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'){///交換上下行if
      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;
}

2023互動技術

2023年11月9日星期四

WW-Week09_keyboard_typing

沒有留言:

張貼留言

2023年11月9日 星期四

WW-Week09_keyboard_typing

沒有留言:

張貼留言

2023年11月9日星期四