2023年11月9日 星期四

jason1230 week09

1-1


今天要做一個鍵盤,輸入按鍵螢幕上也會互動
先把鍵盤的圖片匯進來,再調整位置

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

1-2

用中心點來畫四邊形,點擊之後會出現相對座標



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座標
}

1-3

點擊鍵盤,選取座標的位置會出現綠色方框


PImage img;
int [][] pos={{83,455},{115,457},{153,456},{183,457},{217,456},{255,459},{283,456},{323,456},{356,457},{389,455},{95,492},{128,489},{160,491},{195,489},{229,491},{263,491},{297,491},{328,491},{370,490},{105,527},{145,523},{174,522},{209,527},{245,523},{279,525},{313,523}};
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);
  }
}
void mousePressed(){
  println(mouseX,mouseY);//定位、印出mouse座標
}

2-1

點擊鍵盤,會對應輸入的鍵
PImage img;
int [][] pos={{88,491},{246,526},{178,526},{159,491},{152,456},{196,489},{228,488},{262,490},{320,457},{297,489},{331,487},{364,488},{311,523},{280,526},{353,456},{392,458},{83,457},{187,456},{126,490},{220,458},{288,456},{211,525},{116,455},{141,524},{254,459},{111,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);
  }
}
boolean[]pressed=new boolean[26];
void keyPressed(){
  if(key>='a'&&key<='z')pressed[key-'a']=true;
}
void keyReleased(){
  if(key>='a'&&key<='z')pressed[key-'a']=false;
}

2-2

如果印出一串字,會對應它相關的單字例如printf會有p出現
PImage img;
int [][] pos={{88,491},{246,526},{178,526},{159,491},{152,456},{196,489},{228,488},{262,490},{320,457},{297,489},{331,487},{364,488},{311,523},{280,526},{353,456},{392,458},{83,457},{187,456},{126,490},{220,458},{288,456},{211,525},{116,455},{141,524},{254,459},{111,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);
  }
  fill(0);
  textSize(50);
  text(typing,50,50);
  text(typing.charAt(0),50,100);//現在要打得字,是typing.charAt();
}
String typing="printf";
boolean[]pressed=new boolean[26];
void keyPressed(){
  if(key>='a'&&key<='z')pressed[key-'a']=true;
}
void keyReleased(){
  if(key>='a'&&key<='z')pressed[key-'a']=false;
}

2-3

打字輸入對應的字,每輸入一個迴圈就會+1
PImage img;
int [][] pos={{88,491},{246,526},{178,526},{159,491},{152,456},{196,489},{228,488},{262,490},{320,457},{297,489},{331,487},{364,488},{311,523},{280,526},{353,456},{392,458},{83,457},{187,456},{126,490},{220,458},{288,456},{211,525},{116,455},{141,524},{254,459},{111,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);
  }
  fill(0);
  textSize(50);
  text(typing,50,50);
  fill(255,0,0);
  text(typed+typing.charAt(ID),50,100);//現在要打得字,是typing.charAt();
  fill(0);
  text(typed,50,100);
}
String typing="printfprintfprintf";
String typed="";
int ID=0;
boolean[]pressed=new boolean[26];
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;
}

3-1

因為前面只處理輸入並沒有去判斷如果打錯字會發生什麼情況所以現在新增如果輸入錯誤螢幕就會閃紅光

PImage img;
int [][] pos={{88,491},{246,526},{178,526},{159,491},{152,456},{196,489},{228,488},{262,490},{320,457},{297,489},{331,487},{364,488},{311,523},{280,526},{353,456},{392,458},{83,457},{187,456},{126,490},{220,458},{288,456},{211,525},{116,455},{141,524},{254,459},{111,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);
  }
  fill(0);
  textSize(50);
  text(typing,50,50);
  fill(255,0,0);
  text(typed+typing.charAt(ID),50,100);//現在要打得字,是typing.charAt();
  fill(0);
  text(typed,50,100);
}
String typing="printfprintfprintf";
String typed="";
int ID=0;
boolean[]pressed=new boolean[26];
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;
}

3-2

原本打到最後會出現問題是因為長度出現問題設typing.length()


PImage img;
int [][] pos={{88,491},{246,526},{178,526},{159,491},{152,456},{196,489},{228,488},{262,490},{320,457},{297,489},{331,487},{364,488},{311,523},{280,526},{353,456},{392,458},{83,457},{187,456},{126,490},{220,458},{288,456},{211,525},{116,455},{141,524},{254,459},{111,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(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();
  fill(0);
  text(typed,50,100);
}
String typing="printfprintfprintf";
String typed="";
int ID=0;
boolean[]pressed=new boolean[26];
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;
}

3-3

把原本錯誤出現紅色閃光改成即使按錯也不會出現閃爍也不會出現字,而是只有輸入正確的字才能繼續輸入

PImage img;
int [][] pos={{88,491},{246,526},{178,526},{159,491},{152,456},{196,489},{228,488},{262,490},{320,457},{297,489},{331,487},{364,488},{311,523},{280,526},{353,456},{392,458},{83,457},{187,456},{126,490},{220,458},{288,456},{211,525},{116,455},{141,524},{254,459},{111,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(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();
  fill(0);
  text(typed,50,100);
}
String typing="printf is a function";
String typed="";
int ID=0;
boolean[]pressed=new boolean[26];
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)