2023年11月16日 星期四

WEEK09

WEEK09


1.放入圖片 挪到最下方

PImage img; void setup(){ size(800, 600); // 圖片大小為800x266 img = loadImage("keyboard.png"); } void draw(){ image(img, 0, 600-266); // 鍵盤放在底部 }

2.+紅色方塊 加上滑鼠定位按鍵座標

PImage img; void setup(){ size(800, 600); // 圖片大小為800x266 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. 第2步的滑鼠 確認字母按順序的座標 +陣列&for迴圈上色
PImage img; int [][]pos = {{92,491},{246,525},{179,524},{162,490},{152,457},{194,490},{229,490},{264,490},{323,456},{298,491},{333,490},{367,491},{315,525},{281,523},{356,457},{390,457},{85,456},{185,456},{127,490},{220,456},{289,457},{212,525},{117,457},{143,524},{254,457},{109,524}}; void setup(){ size(800, 600); // 圖片大小為800x266 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座標 }


  1. 按哪個鍵 就只有那個鍵會亮

PImage img;

int [][]pos = {{92,491},{246,525},{179,524},{162,490},{152,457},{194,490},{229,490},{264,490},{323,456},{298,491},{333,490},{367,491},{315,525},{281,523},{356,457},{390,457},{85,456},{185,456},{127,490},{220,456},{289,457},{212,525},{117,457},{143,524},{254,457},{109,524}};

void setup(){

  size(800, 600); // 圖片大小為800x266

  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;

}

void mousePressed(){

  println(mouseX, mouseY); // 定位 印出mouse座標

}

  1. +字串 把輸入的字母亮起來

PImage img; int [][]pos = {{92,491},{246,525},{179,524},{162,490},{152,457},{194,490},{229,490},{264,490},{323,456},{298,491},{333,490},{367,491},{315,525},{281,523},{356,457},{390,457},{85,456},{185,456},{127,490},{220,456},{289,457},{212,525},{117,457},{143,524},{254,457},{109,524}}; void setup(){ size(800, 600); // 圖片大小為800x266 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(0) } String typing = "printf"; boolean [] pressed = new boolean[26]; // java預設的false 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); // 定位 印mouse座標 }

  1. 要打的字蓋上已經打過的字

PImage img; int [][]pos = {{92,491},{246,525},{179,524},{162,490},{152,457},{194,490},{229,490},{264,490},{323,456},{298,491},{333,490},{367,491},{315,525},{281,523},{356,457},{390,457},{85,456},{185,456},{127,490},{220,456},{289,457},{212,525},{117,457},{143,524},{254,457},{109,524}}; void setup(){ size(800, 600); // 圖片大小為800x266 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); } textSize(50); fill(0); // 黑色的字 text(typing, 50, 50); // 要打的字 fill(255, 0, 0); // red 現在要打的字 text(typed+typing.charAt(ID), 50, 100); // 現在要打typing.charAt(0) fill(0); // 再用黑色秀出打好的字 text(typed, 50, 100); //已經打好的字 } String typing = "printfprintfprintf"; String typed = ""; // 開頭就打了0 int ID = 0; // 從第幾個字開始要被打 boolean [] pressed = new boolean[26]; // java預設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; } void mousePressed(){ println(mouseX, mouseY); // 定位, 印出mouse座標 }

  1. 輸入錯誤就不顯示,&螢幕會閃爍
PImage img; int [][]pos = {{92,491},{246,525},{179,524},{162,490},{152,457},{194,490},{229,490},{264,490},{323,456},{298,491},{333,490},{367,491},{315,525},{281,523},{356,457},{390,457},{85,456},{185,456},{127,490},{220,456},{289,457},{212,525},{117,457},{143,524},{254,457},{109,524}}; void setup(){ size(800, 600); // 圖片大小為800x266 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); } textSize(50); fill(0); // 黑色的字 text(typing, 50, 50); // 要打的字 fill(255, 0, 0); // red 現在要打的字 text(typed+typing.charAt(ID), 50, 100); // 現在要打typing.charAt(0) fill(0); // 再用黑色秀出打好的字 text(typed, 50, 100); //已經打好的字 } String typing = "printfprintfprintf"; String typed = ""; // 一開始打了0個字 int ID = 0; // 第幾個字要被打 boolean [] pressed = new boolean[26]; // java預設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, 128); } } } void keyReleased(){ if (key >= 'a' && key <= 'z') pressed[key-'a'] = false; } void mousePressed(){ println(mouseX, mouseY); // 定位印mouse座標 }



  1. 解決超過陣列問題的字數問題
PImage img;
int [][]pos = {{92,491},{246,525},{179,524},{162,490},{152,457},{194,490},{229,490},{264,490},{323,456},{298,491},{333,490},{367,491},{315,525},{281,523},{356,457},{390,457},{85,456},{185,456},{127,490},{220,456},{289,457},{212,525},{117,457},{143,524},{254,457},{109,524}};
void setup(){
  size(800, 600); // 圖片大小為800x266
  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(ID)-'a'==i) rect(pos[i][0], pos[i][1], 28, 30, 5);
    // 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);
  }
  textSize(50);
  fill(0); // 黑色的字
  text(typing, 50, 50); // 要打的字
  
  fill(255, 0, 0); // red 現在要打的字
  // text(typed+typing.charAt(ID), 50, 100); // 現在要打的字是typing.charAt(0)
 
  if (ID<typing.length()) text(typed+typing.charAt(ID), 50, 100);
  fill(0); // 再用黑色秀出打好的字
  text(typed, 50, 100); //已經打好的字
}
  
String typing = "printfprintfprintf"; 
String typed = ""; // 一開始打了0個字
int ID = 0; // 第幾個字要被打
boolean [] pressed = new boolean[26]; // java預設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, 128);
    }
  }
}
void keyReleased(){
  if (key >= 'a' && key <= 'z') pressed[key-'a'] = false;
}
void mousePressed(){
  println(mouseX, mouseY); // 定位, 印出mouse座標
}


  1. 新增輸入空格
PImage img;
int [][]pos = {{92,491},{246,525},{179,524},{162,490},{152,457},{194,490},{229,490},{264,490},{323,456},{298,491},{333,490},{367,491},{315,525},{281,523},{356,457},{390,457},{85,456},{185,456},{127,490},{220,456},{289,457},{212,525},{117,457},{143,524},{254,457},{109,524}};
void setup(){
  size(800, 600); // 圖片大小為800x266
  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(ID)-'a'==i) rect(pos[i][0], pos[i][1], 28, 30, 5);
    // 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);
  }
  textSize(50);
  fill(0); // 黑色的字
  text(typing, 50, 50); // 要打的字
  
  fill(255, 0, 0); // red 現在要打的字
  // text(typed+typing.charAt(ID), 50, 100); // 現在要打typing.charAt(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 = ""; // 一開始打了0個字
int ID = 0; // 第幾個字要被打
boolean [] pressed = new boolean[26]; // java預設false
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, 128);
    }
  }
}
void keyReleased(){
  if (key >= 'a' && key <= 'z') pressed[key-'a'] = false;
}
void mousePressed(){
  println(mouseX, mouseY); // 定位, 印出mouse座標
}

沒有留言:

張貼留言