Hank-week09

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

void draw (){
  background(#FFFFF2);
   image(img, 0, 600-266);
   fill(255, 0, 0, 128);
   rect(mouseX, mouseY, 28, 30, 5);
}

void mousePressed(){
   print(mouseX, mouseY); 
}

3 . 新增所有字母位置

PImage img;
int [][] pos = {{78,475},{231,510},{164,510},{147,476},{138,441},{180,475},{215,475},{248,475},{307,442},{284,475},{318,475},{351,475},{301,509},{267,509},{342,442},{378,441},{70,441},{172,441},{111,475},{205,442},{271,442},{198,509},{104,441},{129,510},{238,441},{95,509}};
void setup(){
  size(800, 600);
  img = loadImage("keyboard.png");
}

void draw (){
  background(#FFFFF2);
   image(img, 0, 600-266);
   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); 
}

4 . 可以看到觸發按鍵
PImage img;
int [][] pos = {{78,475},{231,510},{164,510},{147,476},{138,441},{180,475},{215,475},{248,475},{307,442},{284,475},{318,475},{351,475},{301,509},{267,509},{342,442},{378,441},{70,441},{172,441},{111,475},{205,442},{271,442},{198,509},{104,441},{129,510},{238,441},{95,509}};

void setup(){
  size(800, 600);
  img = loadImage("keyboard.png");
}

void draw (){
  background(#FFFFF2);
   image(img, 0, 600-266);
   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']=true;
}


5 . 上面會出現數字
PImage img;
int [][] pos = {{78,475},{231,510},{164,510},{147,476},{138,441},{180,475},{215,475},{248,475},{307,442},{284,475},{318,475},{351,475},{301,509},{267,509},{342,442},{378,441},{70,441},{172,441},{111,475},{205,442},{271,442},{198,509},{104,441},{129,510},{238,441},{95,509}};

void setup(){
  size(800, 600);
  img = loadImage("keyboard.png");
}

void draw (){
  background(#FFFFF2);
   image(img, 0, 600-266);
   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);  
   }
   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']=true;
}


6 . 
PImage img;
int [][] pos = {{78, 475}, {231, 510}, {164, 510}, {147, 476}, {138, 441}, {180, 475}, {215, 475}, {248, 475}, {307, 442}, {284, 475}, {318, 475}, {351, 475}, {301, 509}, {267, 509}, {342, 442}, {378, 441}, {70, 441}, {172, 441}, {111, 475}, {205, 442}, {271, 442}, {198, 509}, {104, 441}, {129, 510}, {238, 441}, {95, 509}};

void setup() {
  size(800, 600);
  img = loadImage("keyboard.png");
}

void draw () {
  background(#FFFFF2);
  image(img, 0, 600-266);
  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);
  }

  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']=true;
}


7 .
PImage img;
int [][] pos = {{78, 475}, {231, 510}, {164, 510}, {147, 476}, {138, 441}, {180, 475}, {215, 475}, {248, 475}, {307, 442}, {284, 475}, {318, 475}, {351, 475}, {301, 509}, {267, 509}, {342, 442}, {378, 441}, {70, 441}, {172, 441}, {111, 475}, {205, 442}, {271, 442}, {198, 509}, {104, 441}, {129, 510}, {238, 441}, {95, 509}};

void setup() {
  size(800, 600);
  img = loadImage("keyboard.png");
}

void draw () {
  background(#FFFFF2);
  image(img, 0, 600-266);
  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);
  }

  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') {
    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']=true;
}



8 . 
PImage img;
int [][] pos = {{78, 475}, {231, 510}, {164, 510}, {147, 476}, {138, 441}, {180, 475}, {215, 475}, {248, 475}, {307, 442}, {284, 475}, {318, 475}, {351, 475}, {301, 509}, {267, 509}, {342, 442}, {378, 441}, {70, 441}, {172, 441}, {111, 475}, {205, 442}, {271, 442}, {198, 509}, {104, 441}, {129, 510}, {238, 441}, {95, 509}};

void setup() {
  size(800, 600);
  img = loadImage("keyboard.png");
}

void draw () {
  background(#FFFFF2);
  image(img, 0, 600-266);
  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);
  }

  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 = "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']=true;
}