2023年11月9日 星期四

於 week09

week09

第一步  把鍵盤圖貼上去

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



第二步 畫出半透明的紅色框框

背景淡黃色
PImage img;
void setup(){
  size(800,600);
  img = loadImage("keyboard.jpg");
  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座標
}


第三步 畫出半透明的綠色框框

PImage img;
int[][]pos = {{82,455},{93,491},{111,525},{118,457},{128,491},{142,525},{153,456},{161,490},{178,525},{185,455},{198,491},{212,523},{220,457},{230,490},{245,524},{254,457},{265,490},{278,526},{287,456},{297,489},{314,525},{324,456},{331,492},{357,455},{365,490},{389,456}};
void setup(){
  size(800,600);
  img = loadImage("keyboard.jpg");
  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);
}


第四步 按鍵盤出現綠綠

PImage img;
int[][]pos = {{91,491},{246,525},{179,524},{162,491},{153,458},{195,490},{229,489},{263,491},{322,456},{298,491},{332,490},{366,491},{315,525},{279,525},{357,456},{390,457},{84,456},{185,456},{127,490},{219,457},{288,457},{212,523},{118,457},{144,523},{254,457},{108,524}};

void setup(){
  size(800,600);
  img = loadImage("keyboard.jpg");
  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;
}
void mousePressed(){
  println(mouseX,mouseY);
}


第五步 鍵盤打出字 印出來

PImage img;
int[][]pos = {{91,491},{246,525},{179,524},{162,491},{153,458},{195,490},{229,489},{263,491},{322,456},{298,491},{332,490},{366,491},{315,525},{279,525},{357,456},{390,457},{84,456},{185,456},{127,490},{219,457},{288,457},{212,523},{118,457},{144,523},{254,457},{108,524}};

void setup(){
  size(800,600);
  img = loadImage("keyboard.jpg");
  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);
}
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;
}
void mousePressed(){
  println(mouseX,mouseY);
}

第六步 互動性 可以打字

PImage img;
int[][]pos = {{91,491},{246,525},{179,524},{162,491},{153,458},{195,490},{229,489},{263,491},{322,456},{298,491},{332,490},{366,491},{315,525},{279,525},{357,456},{390,457},{84,456},{185,456},{127,490},{219,457},{288,457},{212,523},{118,457},{144,523},{254,457},{108,524}};

void setup(){
  size(800,600);
  img = loadImage("keyboard.jpg");
  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);
  }
  textSize(50);
  fill(0);
  text(typing, 50, 50);
  fill(255,0,0);
  text(typed+typing.charAt(ID), 50, 100);
  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;
}
void mousePressed(){
  println(mouseX,mouseY);
}

第七步 打錯字 背景會紅色閃爍

..........
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 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);
  }
  textSize(50);
  fill(0);
  text(typing, 50, 50);
  fill(255,0,0);
  if(ID<typing.length())
  text(typed+typing.charAt(ID), 50, 100);
  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);
   }
  }
}
..............


第九步 可以刪掉字 

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







於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)