顯示具有 04160063_鐘珈翎 標籤的文章。 顯示所有文章
顯示具有 04160063_鐘珈翎 標籤的文章。 顯示所有文章

2018年1月21日 星期日

Week19*期末作品*

【採金礦】



設計者:
04160063鐘珈翎
04160330石采穎


https://youtu.be/bySuNdLGSLY

 遊戲規則:
滑鼠按下Start鍵，即可開始遊戲。
金礦位置為隨機，人物會左右移動，時間共30秒。玩法是透過電路盒機台，藍色為p1、紅色為p2，來抓取金礦，根據的抓取的數量來比大小，抓取最大者獲勝。

於 沒有留言:
標籤： , ,

2017年12月4日 星期一

Week12*Arduino建置環境*

【利用Processing結合Arduino】



1.連結















程式碼:
import processing.serial.*;
Serial myPort;

void setup(){
  size(400,400);
  myPort=new Serial(this,"COM7",115200);
}
void draw(){
  if(myPort.available()>0){
    String now =myPort.readString();
    println(now);
  }
}

2.建置環境













程式碼:
// Arduino pin numbers
const int SW_pin = 2; // digital pin connected to switch output
const int X_pin = 0; // analog pin connected to X output
const int Y_pin = 1; // analog pin connected to Y output

void setup() {
  pinMode(SW_pin, INPUT);
  digitalWrite(SW_pin, HIGH);
  Serial.begin(115200);
}

void loop() {
  Serial.print("Switch:  ");
  Serial.print(digitalRead(SW_pin));
  Serial.print("\n");
  Serial.print("X-axis: ");
  Serial.print(analogRead(X_pin));
  Serial.print("\n");
  Serial.print("Y-axis: ");
  Serial.println(analogRead(Y_pin));
  Serial.print("\n\n");
  delay(50);
}















左邊程式碼:

// Arduino pin numbers
const int SW_pin = 2; // digital pin connected to switch output
const int X_pin = 0; // analog pin connected to X output
const int Y_pin = 1; // analog pin connected to Y output

void setup() {
  pinMode(SW_pin, INPUT);
  digitalWrite(SW_pin, HIGH);
  Serial.begin(115200);
}

void loop() {
  Serial.write(digitalRead(2));
  delay(50);
}

右邊程式碼:

import processing.serial.*;
Serial myPort;

void setup(){
  size(400,400);
  myPort=new Serial(this,"COM7",115200);
}
void draw(){
  if(myPort.available()>0){
    int pin2=myPort.read();
    println(pin2);
    if(pin2==1)background(255,0,0);
  else background(255,255,0);
  }
}
















左邊程式碼:

// Arduino pin numbers
const int SW_pin = 2; // digital pin connected to switch output
const int X_pin = 0; // analog pin connected to X output
const int Y_pin = 1; // analog pin connected to Y output

void setup() {
  pinMode(SW_pin, INPUT);
  digitalWrite(SW_pin, HIGH);
  Serial.begin(115200);
}

void loop() {
  Serial.write(digitalRead(2));
  Serial.write(analogRead(A0)/4);
  Serial.write(analogRead(A1)/4);
  delay(50);
}


右邊程式碼:

import processing.serial.*;
Serial myPort;

void setup(){
  size(400,400);
  myPort=new Serial(this,"COM7",115200);
}
void draw(){
  if(myPort.available()>0){
    int pin2=myPort.read();
    int x=myPort.read();
    int y=myPort.read();
    println(pin2);
    if(pin2==1)background(255,0,0);
  else background(255,255,0);
  ellipse(x,y,20,20);
  }
}
於 沒有留言:
標籤： ,

2017年11月21日 星期二

Week10*期中作品*

【採金礦】



 設計者:
04160063鐘珈翎
04160330石采穎




https://youtu.be/QiQoQc5-0b4


遊戲規則:
按下Start鍵，即可開始遊戲。
金礦位置為隨機，方向鍵下是抓取物品，而人物會左右移動，時間共30秒，時間結束前抓取超過(包含)10顆，即可過關；反之，則失敗，畫面會凍結。





於 沒有留言:
標籤： , ,

2017年11月19日 星期日

Week09*互動技術課堂筆記*

【期中作品_隨機金礦及判斷條件篇】




1.隨機產生金礦<用random>























主要程式碼:

float []posyy=new float[15];
float []pos=new float[15];

void setup(){
  float now=0;
  for(int i=0;i<15;i++){
    float w=(500)/10.0;
    float front=(now> 40+w*i)?now:40+w*i;
    pos[i]=random(front,40+w+w*i);
    posyy[i]=random(250,350);
    now=pos[i]+40;
    poss[i]=true;
    
  }  


void draw(){ 
    for(int i=0;i<15;i++){  
      fill(#F7E111);
      if(poss[i]){
        ellipse(pos[i],posyy[i],40,40); 
        if(dist(pos[i],posyy[i],xPos+50,yPos+70)<20){
          if(posyy[i]!=180)
          {
            posyy[i]-=2;
          }    

          m=3;
          if(posyy[i]<190)
          {
            poss[i]=false;
            score++;
           }
        }       
      }  
}





於 沒有留言:
標籤： ,

2017年11月18日 星期六

Week08*互動技術課堂筆記*

【期中作品_介面設計及抓取物件篇】




1.抓取判斷消失<用Boolean>






















主要程式碼:
boolean []poss=new boolean[15];
void draw(){ 
 if(dist(pos[i],posyy[i],xPos+50,yPos+70)<20){
          if(posyy[i]!=180)
          {
            posyy[i]-=2;
          }    

          m=3;
          if(posyy[i]<190)
          {
            poss[i]=false;
            score++;
           }
        }       
}







於 沒有留言:
標籤： ,

2017年11月16日 星期四

Week07*互動技術課堂筆記*

【期中作品_封面設計與人物移動篇】




1.滑鼠點下<用mouse>

















主要程式碼:
void draw(){ 
 image(start,0,0,850,500);
    if(mouseX>290&&mouseX<560&&mouseY>210&&mouseY<290){
        cursor(HAND);
        if(mousePressed == true && mouseButton == LEFT) {
          begin.pause();
          startmusic.loop();
          state = 1;
          k=1;        
      }
    }
   else {
      cursor(ARROW);
   }
}



2.人物左右邊界移動<用If、Else設定邊界>





















主要程式碼:
void draw(){ 
 if(xPos < 0)    ///left
    { 
      xPos = 0;  
      k=1;
    }
    if(xPos > width - img2.width+100){  ///right
      xPos = width - img2.width+100;
      k=2;
    } 
    while(k==1&&yPos==100){
      xPos+=5;
      break;
    }
    while(k==2&&yPos==100){
      xPos-=5;
      break;
   }
   if(m==3&&yPos!=100){
        yPos-=2; 
    }
   if(keyPressed == true && keyCode == DOWN&&yPos==100){    
      m=1;  
    }   
    if(yPos < 100)    
    { 
      yPos = 100;      
    }
    else if(yPos > height - img2.height+20){  
      yPos = height - img2.height+20;
      m=2;
    }   
}













於 沒有留言:
標籤： ,

2017年10月24日 星期二

Week06*互動技術課堂筆記*


【利用Processing】


*做出爆爆王*

基本應用介紹


1.先設定爆爆王的背景圖













程式碼:

void setup(){
  size(850,500);  //視窗大小
}
void draw(){
  background(#92AD28);  
  noStroke();  //背景無線條
  for(int x=0;x<17;x++){   //X軸座標
    for(int y=0;y<10;y++){  //Y軸座標
      if((x-y)%2==0)fill(#7E9819);
      else fill(#92AD28);
      rect(x*50,y*50,50,50);  //畫正方形
    }
  }
}

2.增加一個人物，使他的位置可以移動














程式碼:
void setup(){
  size(850,500);
}

int userJ=9,userI=5;
float userX,userY;

void draw(){
  background(#92AD28);
  noStroke();
  for(int x=0;x<17;x++){
    for(int y=0;y<10;y++){
      if((x-y)%2==0)fill(#7E9819);
      else fill(#92AD28);
      rect(x*50,y*50,50,50);
    }
  }
  fill(255,0,0);ellipse(userJ*50+25,userI*50+25,50,50);
}
void keyPressed(){
  if(keyCode==LEFT)userJ--;
  if(keyCode==RIGHT)userJ++;
  if(keyCode==UP)userI--;
  if(keyCode==DOWN)userI++;
}

3.按空白鍵放入水球














程式碼:
void setup(){
  size(850,500);
}
int userJ=9,userI=5;
float userX,userY;
int waterN=0;
int []waterJ=new int[100];
int []waterI=new int[100];
void draw(){
  background(#92AD28); 
  noStroke();
  for(int x=0;x<17;x++){
    for(int y=0;y<10;y++){
      if((x-y)%2==0)fill(#7E9819);
      else fill(#92AD28);
      rect(x*50,y*50,50,50);
    }
  }
  fill(255,0,0);ellipse(userJ*50+25,userI*50+25,50,50);
  for(int i=0;i<waterN;i++){
    fill(#93E1E7);ellipse(waterJ[i]*50+25,waterI[i]*50+25,30,30);
  }
}
void keyPressed(){
  if(keyCode==LEFT)userJ--;
  if(keyCode==RIGHT)userJ++;
  if(keyCode==UP)userI--;
  if(keyCode==DOWN)userI++;
  if(key==' ' ){waterI[waterN]=userI;waterJ[waterN]=userJ;waterN++;}
}


於 沒有留言:
標籤： ,

2017年10月16日 星期一

Week05*互動技術課堂筆記*



【利用Processing】


*做出轉動大眼睛*

基本應用介紹


1.1先用輔助線，找出眼睛一棟位置是否和滑鼠一樣













程式碼:

void setup(){
  size(400,400);  //視窗初始化大小
}
void draw(){
  background(128);
  strokeWeight(20);  //筆刷粗度大小
  ellipse(100,200,180,360);  //右眼睛
  ellipse(300,200,180,360);  //左眼睛
  
  ellipse(100,200,10,10);  //右眼珠
  ellipse(300,200,10,10);  //左眼珠
  line(mouseX,mouseY,100,200);  //畫一條線連結右眼睛
  line(mouseX,mouseY,300,200);  //畫一條線連結左眼睛
}

1.2去除輔助線，改用atan寫法














程式碼:
void setup(){
  size(800,800);
}
void draw(){
  background(128);
  strokeWeight(20);
  ellipse(100,200,180,360);
  ellipse(300,200,180,360);
  
  //ellipse(100,200,10,10);
  //ellipse(300,200,10,10);
  //line(mouseX,mouseY,100,200);
  //line(mouseX,mouseY,300,200);
  
  float angle1=atan2((mouseY-200)/2,mouseX-300); //角度=atan2(分子/分母)
  float newX1=300+100*cos(angle1)/2;  //右眼珠的X移動半徑大小
  float newY1=200+200*sin(angle1)/2;  //右眼珠的Y移動半徑大小

  ellipse(newX1,newY1,10,10);

  float angle2=atan2((mouseY-200)/2,mouseX-100);  //角度=atan2(分子/分母)
  float newX2=100+100*cos(angle2)/2;   //左眼珠的X移動半徑大小
  float newY2=200+200*sin(angle2)/2;    //左眼珠的X移動半徑大小

  ellipse(newX2,newY2,10,10);
}

2.射擊泡泡遊戲概念

2.1線可隨著滑鼠移動增長，球粘著滑鼠移動














程式碼:
void setup(){
  size(800,800);
}
void draw(){
  background(0,212,0);
  fill(#6ED1CB);ellipse(200,600,100,100);
  line(mouseX,mouseY,200,600);
  float angle=atan2(mouseY-600,mouseX-200);
  fill(#C47CC9);ellipse(200+50*cos(angle),600+50*sin(angle),30,30);
}

2.2可自由發射，當滑鼠移動，球會自動歸位














程式碼:
void setup(){
  size(400,800);
}
float ballX=200,ballY=600;
float ballVX=0,ballVY=0;
float angle=0;
void draw(){
  background(0,128,0);
  fill(#6ED1CB);ellipse(200,600,100,100);
  line(mouseX,mouseY,200,600);
  fill(#C47CC9);ellipse(ballX,ballY,30,30);
  angle=atan2(mouseY-600,mouseX-200);
  
  ballX+=ballVX;
  ballY+=ballVY;
}
void mouseMoved(){
  ballX=200+50*cos(angle);
  ballY=600+50*sin(angle);
}
void mousePressed(){
  ballVX=cos(angle);
  ballVY=sin(angle);
}






程式碼:
void setup(){
  size(400,800);
}
float [] ballX=new float[10];  //初始化設定X軸10顆球
float [] ballY=new float[10];  //初始化設定Y軸10顆球
float [] ballVX=new float[10];  //初始化設定X軸10個球的速度
float [] ballVY=new float[10];  //初始化設定Y軸10個球的速度
float [] angle=new float[10];  // 初始化設定10顆球的角度
int now=0;  //now which ball is it
void draw(){
  background(0,128,0);
  fill(#6ED1CB);ellipse(200,600,100,100);
  for(int i=0;i<10;i++){
    fill(#C47CC9);ellipse(ballX[i],ballY[i],30,30);
    ballX[i]+=ballVX[i]; ballY[i]+=ballVY[i];
  }
  angle[now]=atan2(mouseY-600,mouseX-200);
}
void mouseMoved(){
  ballX[now]=200+50*cos(angle[now]); ballY[now]=600+50*sin(angle[now]);
}
void mousePressed(){
  ballVX[now]=cos(angle[now]); ballVY[now]=sin(angle[now]);
  now++;
}


2.3可自由發射，當滑鼠移動，球會自動歸位

於 沒有留言:
標籤： ,

2017年10月2日 星期一

Week04*互動技術課堂筆記*

【利用Processing】


*做出簡單小遊戲*

小遊戲深入介紹

1.利用(Week03-1.3)的概念做延伸















程式碼:
PImage imgHook,imgLove; 
float HookX=400,HookY=300;
float HookVX=0,HookVY=0;
float HookAX=0,HookAY=0;
float [][]LoveX=new float[5][4];
float [][]LoveY=new float[5][4];
boolean [][]LoveAlive=new boolean[5][4];
void setup(){
  size(800,600);
  imgHook=loadImage("Hook.png");        
  imgLove=loadImage("Love.png");   
  imageMode(CENTER);  
  for(int i=0;i<5;i++){
    for(int j=0;j<4;j++){
      LoveX[i][j]=700-i*100;LoveY[i][j]=100+j*100;LoveAlive[i][j]=true;
    }
  }
}
void draw(){
  background(255);
  for(int i=0;i<5;i++){
    for(int j=0;j<4;j++){
      if(dist(LoveX[i][j],LoveY[i][j],HookX,HookY)<100){
        LoveAlive[i][j]=false;
      }
      if(LoveAlive[i][j])image(imgLove,LoveX[i][j],LoveY[i][j],100,100);
    }
  }
  /*if(LoveAlive)image(imgLove,LoveX,LoveY,100,100);  */   
  image(imgHook,HookX,HookY,100,100);
 /* if(dist(LoveX,LoveY,HookX,HookY)<100){
    LoveAlive=false;
  } */
  line(HookX,HookY,400,300);
  
  
  HookX+=HookVX;
  HookY+=HookVY;
  if(HookX<50){HookX=50;HookVX=-HookVX;}
  if(HookX>width-50){HookX=width-50;HookVX=-HookVX;}
  if(HookY<50){HookY=50;HookVY=-HookVY;}
  if(HookY>height-50){HookY=height-50;HookVY=-HookVY;}
  
  HookVX+=HookAX;
  HookVY+=HookAY;
  HookVX*=0.997;
  HookVY*=0.997;
}
void mouseDragged(){
  HookX=mouseX;
  HookY=mouseY;
  HookVX=HookVY=HookAX=HookAY=0;
}
void mouseReleased(){
  HookVX=(400-mouseX)/10.0;
  HookVY=(300-mouseY)/10.0;
  HookAY=0.98;
}


2.簡單概念複習

2.1畫圓















程式碼:
void setup(){ 
  size(800,600);      //視窗初始化大小
}
void draw(){
  for(int i=0;i<5;i++){         //橫為5
    for(int j=0;j<4;j++){          //行為4
      ellipse(700-i*100,100+j*100,100,100);     //fill(顏色編碼)畫圓(座標,座標,大小,大小)<沒有將座標寫死>
    }
  }
}

2.2變顏色















程式碼:
void setup(){
  size(800,600);  //視窗初始化大小
}
void draw(){
  for(int i=0;i<5;i++){    //橫為5
    for(int j=0;j<4;j++){     //行為4
      fill(#3EC1CE);ellipse(700-i*100,100+j*100,100,100);  //fill(顏色編碼)畫圓(座標,座標,大小,大小)
    }
  }
  fill(#A45EE3);ellipse(400,300,100,100);  //一個圓固定位置<將座標寫死>
}

2.3用矩陣替代















程式碼:
float [][]pigx=new float[5][4];      //用矩陣初始化
float [][]pigy=new float[5][4];      //用矩陣初始化
boolean [][]pigAlive=new boolean[5][4];       //藍色圈圈部分都是豬(存活)
void setup(){
  size(800,600);  
  for(int i=0;i<5;i++){
    for(int j=0;j<4;j++){
      pigx[i][j]=700-i*100;pigy[i][j]=100+j*100;pigAlive[i][j]=true;   
    } 
  }
}
void draw(){
  for(int i=0;i<5;i++){
    for(int j=0;j<4;j++){
      //fill(#3EC1CE);ellipse(700-i*100,100+j*100,100,100);
      fill(#3EC1CE);ellipse(pigx[i][j],pigy[i][j],100,100);
    }
  }
  fill(#A45EE3);ellipse(400,300,100,100);
}

2.4用矩陣替代
















程式碼:
float birdX=100,birdY=400;
float [][]pigx=new float[5][4];
float [][]pigy=new float[5][4];
boolean [][]pigAlive=new boolean[5][4];
void setup(){
  size(800,600);
  for(int i=0;i<5;i++){
    for(int j=0;j<4;j++){
      pigx[i][j]=700-i*100;pigy[i][j]=100+j*100;pigAlive[i][j]=true;
    } 
  }
}
void draw(){
  for(int i=0;i<5;i++){
    for(int j=0;j<4;j++){
      //fill(#3EC1CE);ellipse(700-i*100,100+j*100,100,100);
      fill(#3EC1CE);ellipse(pigx[i][j],pigy[i][j],100,100);
    }
  }
  fill(#A45EE3);ellipse(birdX,birdY,100,100);
}


3.匯入音樂















程式碼:
import ddf.minim.*;
Minim minim;
AudioPlayer player;
void setup(){
  size(800,600);
  minim=new Minim(this);
  player=minim.loadFile("chicken.mp3",2048);
  player.play();
}
void draw(){

}

於 沒有留言:
標籤： ,

2017年9月30日 星期六

Week03*互動技術課堂筆記*

【利用Processing】


*做出簡單小遊戲*

小遊戲基本應用介紹

1.1拖曳滑鼠使產生慣性













程式碼:

void setup(){
  size(800,600);         //視窗初始化大小
}
float HookX=400,HookY=300;     //
float HookVX=0,HookVY=0;       //
void draw(){
  background(255);     //背景顏色(數值)
  ellipse(HookX,HookY, 50,50);     //畫一個圓(大小半徑為50)
  line(HookX,HookY,400,300);       //畫一條線
  HookX+=HookVX;
  HookY+=HookVY;
}
void mouseDragged(){           //滑鼠拖曳
  HookX=mouseX;
  HookY=mouseY;
}
void mouseReleased(){        //滑鼠釋放
  HookVX=(400-mouseX)/100.0;     //X位移方向
  HookVY=(300-mouseY)/100.0;     //Y位移方向
}


1.2拖曳滑鼠射擊讓愛心消失




程式碼:
PImage imgHook,imgLove; 
void setup(){
  size(800,600);
  imgHook=loadImage("Hook.jpg");        
  imgLove=loadImage("Love.jpg");   
  imageMode(CENTER);  
}
float HookX=400,HookY=300;
float HookVX=0,HookVY=0;
float HookAX=0,HookAY=0;
float LoveX=700,LoveY=100;
boolean LoveAlive=true;
void draw(){
  background(255);
  if(LoveAlive)image(imgLove,LoveX,LoveY,100,100);     
  image(imgHook,HookX,HookY,100,100);
  if(dist(LoveX,LoveY,HookX,HookY)<100){
    LoveAlive=false;
  } 
  line(HookX,HookY,400,300);
  HookX+=HookVX;
  HookY+=HookVY;
  HookVX+=HookAX;
  HookVY+=HookAY;
}
void mouseDragged(){
  HookX=mouseX;
  HookY=mouseY;
  HookVX=HookVY=HookAX=HookAY=0;
}
void mouseReleased(){
  HookVX=(400-mouseX)/10.0;
  HookVY=(300-mouseY)/10.0;
  HookAY=0.98;
}

1.3設定邊界，讓鉤子不會視窗外














程式碼:
PImage imgHook,imgLove; 
void setup(){
  size(800,600);
  imgHook=loadImage("Hook.jpg");        
  imgLove=loadImage("Love.jpg");   
  imageMode(CENTER);  
}
float HookX=400,HookY=300;
float HookVX=0,HookVY=0;
float HookAX=0,HookAY=0;
float LoveX=700,LoveY=100;
boolean LoveAlive=true;
void draw(){
  background(255);
  if(LoveAlive)image(imgLove,LoveX,LoveY,100,100);     
  image(imgHook,HookX,HookY,100,100);
  if(dist(LoveX,LoveY,HookX,HookY)<100){
    LoveAlive=false;
  } 
  line(HookX,HookY,400,300);
  
  
  HookX+=HookVX;
  HookY+=HookVY;
  if(HookX<50){HookX=50;HookVX=-HookVX;}
  if(HookX>width-50){HookX=width-50;HookVX=-HookVX;}
  if(HookY<50){HookY=50;HookVY=-HookVY;}
  if(HookY>height-50){HookY=height-50;HookVY=-HookVY;}
  
  HookVX+=HookAX;
  HookVY+=HookAY;
  HookVX*=0.997;
  HookVY*=0.997;
}
void mouseDragged(){
  HookX=mouseX;
  HookY=mouseY;
  HookVX=HookVY=HookAX=HookAY=0;
}
void mouseReleased(){
  HookVX=(400-mouseX)/10.0;
  HookVY=(300-mouseY)/10.0;
  HookAY=0.98;
}

1.4小朋友下樓梯概念














程式碼:
void setup(){
  size(600,500);
}
int boardX=227,boardY=400;
int kidX=300,kidY=250;
void draw(){
  background(0);
  rect(boardX,boardY,200,50);
  rect(kidX,kidY,50,50);
  if(kidX>boardX-50&&kidX<boardX+200&&kidY>boardY-50){
    
  }
  else kidY++;
  kidX=mouseX;
}



於 沒有留言:
標籤： ,
訂閱： 文章 (Atom)