2023年11月9日 星期四

學校滑鼠有夠爛 - Week09 - 互動技術🦆

 Week09

PImage img;
void setup(){
 size(800,600);
 img=loadImage("keyboard.png");
}
void draw(){
  image(img,0,600-266);
}

要記得把圖片拉進processing

-1



 複製程式碼下方的座標，到Notepad++ > 取代 > "空格"取代為"," > 全部取代


對著26個字母一個一個點擊
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);
}
void mousePressed(){
  println(mouseX,mouseY);//定位、印出mouse座標
}
程式碼下方的座標

-2



26個座標點

PImage img;
int [][] pos = {{83,457},{91,491},{110,524},{117,456},{127,490},{142,524},{153,456},{162,493},{176,525},{185,456},{197,493},{212,527},{221,454},{228,493},{245,523},{253,457},{265,492},{279,523},{285,454},{297,496},{317,524},{319,453},{332,491},{355,458},{365,488},{392,458}};//這行有幾個下面for的i<"數字"就要有幾個
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);
  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座標
}








7個座標點
PImage img;
int [][] pos = {{101,378},{222,488},{158,490},{374,420},{331,488},{254,457},{287,456}};//這行有幾個下面for的i<"數字"就要有幾個
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);
  fill(0,255,0,128);//半透明的綠色
  for(int i=0;i<7;i++){//注意啦
    rect(pos[i][0],pos[i][1],28,30,5);
  }
}
void mousePressed(){
  println(mouseX,mouseY);//定位、印出mouse座標
}

-3





按鍵盤按鍵會亮綠色點點，顯示出當下打出的字，且放開按鍵時，綠色點點會消失
PImage img;
int [][] pos = {{83,457},{91,491},{110,524},{117,456},{127,490},{142,524},{153,456},{162,493},{176,525},{185,456},{197,493},{212,527},{221,454},{228,493},{245,523},{253,457},{265,492},{279,523},{285,454},{297,496},{317,524},{319,453},{332,491},{355,458},{365,488},{392,458}};//這行有幾個下面for的i<"數字"就要有幾個
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);
  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;
}

-4


PImage img;
int [][] pos = {{83,457},{91,491},{110,524},{117,456},{127,490},{142,524},{153,456},{162,493},{176,525},{185,456},{197,493},{212,527},{221,454},{228,493},{245,523},{253,457},{265,492},{279,523},{285,454},{297,496},{317,524},{319,453},{332,491},{355,458},{365,488},{392,458}};//這行有幾個下面for的i<"數字"就要有幾個
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);
  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
}
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;
}



-5

PImage img;
int [][] pos = {{83,457},{91,491},{110,524},{117,456},{127,490},{142,524},{153,456},{162,493},{176,525},{185,456},{197,493},{212,527},{221,454},{228,493},{245,523},{253,457},{265,492},{279,523},{285,454},{297,496},{317,524},{319,453},{332,491},{355,458},{365,488},{392,458}};//這行有幾個下面for的i<"數字"就要有幾個
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);
  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
  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;
}

-6

PImage img;
int [][] pos = {{83,457},{91,491},{110,524},{117,456},{127,490},{142,524},{153,456},{162,493},{176,525},{185,456},{197,493},{212,527},{221,454},{228,493},{245,523},{253,457},{265,492},{279,523},{285,454},{297,496},{317,524},{319,453},{332,491},{355,458},{365,488},{392,458}};//這行有幾個下面for的i<"數字"就要有幾個
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);
  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
  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;
}



-7

PImage img;
int [][] pos = {{83,457},{91,491},{110,524},{117,456},{127,490},{142,524},{153,456},{162,493},{176,525},{185,456},{197,493},{212,527},{221,454},{228,493},{245,523},{253,457},{265,492},{279,523},{285,454},{297,496},{317,524},{319,453},{332,491},{355,458},{365,488},{392,458}};//這行有幾個下面for的i<"數字"就要有幾個
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);
  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
  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)){//字母正確就往下
      pressed[key-'a']=true;
      typed += key;
      ID++;
    }else{
      background(255,0,0);//畫面紅色一直閃     
    }
  }
}
void keyReleased(){
  if(key>='a'&&key<='z') pressed[key-'a'] = false;
}

-8

PImage img;
int [][] pos = {{83,457},{91,491},{110,524},{117,456},{127,490},{142,524},{153,456},{162,493},{176,525},{185,456},{197,493},{212,527},{221,454},{228,493},{245,523},{253,457},{265,492},{279,523},{285,454},{297,496},{317,524},{319,453},{332,491},{355,458},{365,488},{392,458}};//這行有幾個下面for的i<"數字"就要有幾個
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);
  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
  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;
}
於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)