2023互動技術: week09 UC

1.做出鍵盤

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

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

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座標
}
4.按鍵盤會對應按的鍵

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;
}
5.如果印出一串字,會對應它相關的單字

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;
}

6.打字輸入上面的字

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;
}

7.輸入出現錯誤會有紅光

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;
}
8.原本打完會無回應 長度出現問題設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;
}

9.只有打出正確的字才能繼續輸入

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;
}

2023互動技術

2023年11月9日星期四

week09 UC

沒有留言:

張貼留言

2023年11月9日 星期四

week09 UC

沒有留言:

張貼留言

2023年11月9日星期四