Week 09

 

WEEK 09

1.載入圖片並調整大小，執行時讓其顯現出

2.讓滑鼠有半透明方框顯現跟隨，且點擊後會寫出當前點及位置的座標

  rectMode(CENTER); 用中心點來畫四邊形的的程式碼

相關程式碼:

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

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

3.利用滑鼠點擊所記錄的鍵位座標，一個個記錄下來並寫進程式，把每個字母鍵位以顏色半透明方框標記

相關程式碼:

int [][] pos={{83,458},{118,456},{150,457},{186,456},

{218,456},{253,456},{287,457},{322,457},{357,456},

{391,457},{91,491},{125,490},{161,491},{196,489},

{230,492},{263,491},{296,490},{332,490},{365,491},

{109,526},{143,524},{176,525},{211,525},{245,525},

{279,525},{313,524}};

   fill(0,255,0,128);
   for(int i=0;i<26;i++)
   {
      rect(pos[i][0],pos[i][1],28,30,5); 
   }

4.幫鍵盤加上按鍵偵測功能，會依序打入的座標顯現對應位置的綠框表示反應

相關程式碼:

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.加入字體顯示，及按鍵指定顯示

相關程式碼:

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

6.讓題目下方的輸入字串有反應，當程式偵測到按鍵輸入時會輸入文字至題目下方的輸入列，表示使用者所輸入的文字，同時下方鍵盤處會有方框提示，隨著題目文字及輸入順序改變方框位置

相關程式碼:

   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="starfield";
String typed ="";
int ID = 0;
boolean[] pressed =new boolean[26];
void keyPressed()
{
   if(key>='a'&&key<='z')
   {
      pressed[key-'a']=true; 
      typed+=key;
      ID++;
   }
}

7.當按倒錯的按鍵時，會有錯誤提示且字母不會輸入

相關程式碼:

   if(key>='a'&&key<='z')
   {
      if(key==typing.charAt(ID))
      {
        pressed[key-'a']=true; 
        typed+=key;
        ID++;
      }
      else
      {
         background(255,0,0); 
      }
   }

8.改善輸入完題目文字時會發生無回應狀況，但寫完題目文字後再按按鍵仍會有錯誤提示

相關程式碼:

PImage img;
int [][] pos={{92,491},{244,524},{178,524},{160,491},{150,457},{197,490},{228,489},{261,488},{323,455},{296,487},{332,491},{365,489},{315,523},{280,524},{354,456},{390,455},{86,455},{184,455},{127,489},{219,456},{289,456},{212,521},{118,455},{141,523},{254,456},{111,525}};
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,30,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="starfield";
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={{92,491},{244,524},{178,524},{160,491},{150,457},{197,490},{228,489},{261,488},{323,455},{296,487},{332,491},{365,489},{315,523},{280,524},{354,456},{390,455},{86,455},{184,455},{127,489},{219,456},{289,456},{212,521},{118,455},{141,523},{254,456},{111,525}};
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,30,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="starfield";
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; 
}

期中期末成果發表程式分組： 陳家誠 黃莉筑