WEEK 09
STEP 01-1 匯入鍵盤的照片 用PImage匯
PImage img;//p語言的照片
void setup()
{
size(800,600);
img = loadImage("keyboard.png");
}
void draw()
{
image(img,0,600-266);//鍵盤在畫布上的位置
}
STEP 01-2 用半透明的紅色圓弧正方形 定位 mouse的位置 印出MOUSE座標
PImage img;//p語言的照片
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);//寬度(28) 高度(30) 圓滑(5)
}
void mousePressed()
{
println(mouseX,mouseY);//定位 印出mouse座標
}
STEP 01-3 先把每個key的位置座標點出來 複製所有座標 到notepad++貼上
數字間的空格 ctrl+h 把尖閣用逗號取代 跳行用},{取代 再把座標貼到程式碼裡面
PImage img;//p語言的照片
int [][] pos = {{83,456},{117,455},{150,455},{187,455},{220,456},{257,456},{290,455},{324,454},{356,460},{387,458},{92,492},{127,489},{164,489},{194,489},{233,490},{261,491},{295,492},{329,488},{370,493},{108,523},{142,525},{177,526},{214,523},{247,524},{276,526},{324,526},{346,526},{383,526},{416,524}};
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);//寬度(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座標
}
STEP 02-1 改善剛剛用滑鼠沒辦法準確按準鍵盤字母的位置 改用鍵盤按下去 字母可以變綠色
PImage img;//p語言的照片
int [][] pos = {{83,456},{117,455},{150,455},{187,455},{220,456},{257,456},{290,455},{324,454},{356,460},{387,458},{92,492},{127,489},{164,489},{194,489},{233,490},{261,491},{295,492},{329,488},{370,493},{108,523},{142,525},{177,526},{214,523},{247,524},{276,526},{324,526},{346,526},{383,526},{416,524}};
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);//寬度(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];//Java的陣列宣告 都是0 或 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座標
}
STEP 02-2 上面的p會顯示在畫面的鍵盤上
PImage img;
int [][] pos ={{92,489},{245,525},{178,523},{163,490},{153,457},{195,491},{230,491},{263,491},{324,457},{297,490},{330,490},{365,490},{314,525},{280,524},{356,457},{392,456},{83,456},{186,457},{128,491},{221,457},{288,457},{212,523},{119,456},{143,523},{255,457},{109,524}};
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);///依滑鼠座標印出方塊，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的陣列宣告,都是0或false
void keyPressed()
{
if(key>='a' && key<='z')pressed[key-'a']=true;
}
void keyReleased()
{
if(key>='a' && key<='z')pressed[key-'a']=false;
}
STEP 02-3 在鍵盤按下字母時 畫面上的鍵盤同時也會出現按的字母 要打的字呈現紅色 再用黑色呈現已經打好的字 覆蓋掉剛剛的紅色
PImage img;
int [][] pos ={{92,489},{245,525},{178,523},{163,490},{153,457},{195,491},{230,491},{263,491},{324,457},{297,490},{330,490},{365,490},{314,525},{280,524},{356,457},{392,456},{83,456},{186,457},{128,491},{221,457},{288,457},{212,523},{119,456},{143,523},{255,457},{109,524}};
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);///依滑鼠座標印出方塊，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);
}
fill(0);//字的顏色
textSize(50);
text(typing, 50, 50);//要打的字
fill(255,0,0);//紅色
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的陣列宣告,都是0或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;
}
STEP 03-1 解決上一個程式碼 當按倒不是printf的字母時 畫面毀閃爍一下(畫面是紅色) 對的會繼續打 但超過typing長度會當掉
PImage img;
int [][] pos ={{92,489},{245,525},{178,523},{163,490},{153,457},{195,491},{230,491},{263,491},{324,457},{297,490},{330,490},{365,490},{314,525},{280,524},{356,457},{392,456},{83,456},{186,457},{128,491},{221,457},{288,457},{212,523},{119,456},{143,523},{255,457},{109,524}};
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);///依滑鼠座標印出方塊，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);
}
fill(0);//字的顏色
textSize(50);
text(typing, 50, 50);//要打的字
fill(255,0,0);//紅色
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的陣列宣告,都是0或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);//字母錯誤就畫面 閃一下(紅色)
}
}
}
void keyReleased()
{
if(key>='a' && key<='z')pressed[key-'a']=false;
}
STEP 03-2 改善剛剛如果字母長度超過 typing的長度時 會當機
PImage img;
int [][] pos ={{92,489},{245,525},{178,523},{163,490},{153,457},{195,491},{230,491},{263,491},{324,457},{297,490},{330,490},{365,490},{314,525},{280,524},{356,457},{392,456},{83,456},{186,457},{128,491},{221,457},{288,457},{212,523},{119,456},{143,523},{255,457},{109,524}};
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);///依滑鼠座標印出方塊，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);//ID沒有超過長度
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(0) 且ID沒有超過長度
fill(0);//再用黑色 秀出已經打好的字
text(typed,50,100);///已經打好的字
}
String typing ="printfprintfprintf";//目標打出的字
String typed = "";//一開始打了0個字
int ID = 0;//第幾個字要被打
boolean []pressed =new boolean[26];//Java的陣列宣告,都是0或false
void keyPressed()
{
if(key>='a' && key<='z')
{
if( ID<typing.length() && key == typing.charAt(ID) )//字母正確 就往下 且 ID沒有超過長度
{
pressed[key-'a']=true;
typed += key;
ID ++;
}
else
{
background(255,0,0);//字母錯誤就畫面 閃一下(紅色)
}
}
}
void keyReleased()
{
if(key>='a' && key<='z')pressed[key-'a']=false;
}
STEP 03-3 加入空格
PImage img;
int [][] pos ={{92,489},{245,525},{178,523},{163,490},{153,457},{195,491},{230,491},{263,491},{324,457},{297,490},{330,490},{365,490},{314,525},{280,524},{356,457},{392,456},{83,456},{186,457},{128,491},{221,457},{288,457},{212,523},{119,456},{143,523},{255,457},{109,524}};
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);///依滑鼠座標印出方塊，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);//ID沒有超過長度
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(0) 且ID沒有超過長度
fill(0);//再用黑色 秀出已經打好的字
text(typed,50,100);///已經打好的字
}
String typing ="printf is a function";//目標打出的字
String typed = "";//一開始打了0個字
int ID = 0;//第幾個字要被打
boolean []pressed =new boolean[26];//Java的陣列宣告,都是0或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);
}
}
}
void keyReleased()
{
if(key>='a' && key<='z')pressed[key-'a']=false;
}
沒有留言:
張貼留言