week09互動技術

 week09-1

PImage img;

void setup(){

  size(800,600);

  img =loadImage("keyboard.png");///讀進圖片

}

void draw(){

  image(img, 0, 600-266);//Y往下移動266是圖片的高度

}

week09-2

PImage img;

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設定圓滑的角

}

void mousePressed(){

  print(mouseX,mouseY);//定位、印出mousey座標

}

week09-3

印出所有字母的座標位置

PImage img;

int [][] pos ={{83,456},{116,456},{152,457},{188,457},{220,456},{253,456},{289,456},{323,457},{358,457},{393,456},{93,489},{127,491},{162,491},{196,491},{230,490},{264,490},{300,490},{334,490},{367,490},{110,523},{143,524},{179,524},{213,524},{247,524},{280,524},{316,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++){

    rect(pos[i][0],pos[i][1],28,30,5);

  }

}

void mousePressed(){

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

}

week09-4

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

}

week09-5

提醒要打出的字

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;

}

week09-6

提示要打的字母，打完變黑色的

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

  }

  textSize(50);

  fill(0);//黑色字

  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 ="printfprintfptintf";//目標打出的字

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;

}

week09-7

打錯會繼續(這是錯誤的)

打到一樣的長度會當掉，陣列不能超出範圍

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

    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);///現在要打的字是typing.charAt(0)

  fill(0);//再用黑色字，秀出已經打好的字

  text(typed,50,100);//已經打好的字

}

String typing ="printfprintfptintf";//目標打出的字

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)){///如果按鍵等於要打的，那就繼續往下走

      pressed[key-'a']=true;

      typed+=key;

      ID ++;

    }else{///如果錯了,畫面閃一下紅色

      background(255,0,0);

    }

    

  }

}

void keyReleased(){

  if(key>='a' && key<='z')pressed[key-'a']=false;

}

week09-8

加上空白鍵的功能

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

    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);///現在要打的字是typing.charAt(0)

  fill(0);//再用黑色字，秀出已經打好的字

  text(typed,50,100);//已經打好的字

}

String typing ="print 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'){///交換上下行if

      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;

}