Week 11 20171127

DigitalInputPullup

照著圖片接線路

未按下按鈕顯示為1

按下按鈕顯示為0

使用Processing作互動

未按下按鈕顯示為綠色

按下按鈕顯示為紅色

AnalogInput

旋鈕往左

旋鈕置中

旋鈕往右

按下按鈕顯示為0

使用Processing作互動

旋鈕往左

旋鈕置中

旋鈕往右

Week 06 20171023

作業一
爆爆王遊戲

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 i=0;i<10;i++){
    for(int j=0;j<17;j++){
      if((j-i)%2==0) fill(#7E9819);
      else fill(#92AD28);
      rect(j*50,i*50,50,50);
    }
  }
  fill(255,0,0);ellipse(userJ*50+25,userI*50+25,50,50);
  for(int i=0;i<waterN;i++){
    fill(#93E1F7);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++;}
}
作業二
鱷魚咬咬

void setup(){
  size(500,500);
}
void draw(){
  background(255);
  fill(0,155,0);ellipse(250,250,300,300);
 
  for(int i=0;i<9;i++){
    fill(255);rect(110+i*30,200,30,30);
    if( 110+i*30< mouseX && mouseX < 110+i*30+30 &&
      200 < mouseY && mouseY < 200+30){
    fill(0);rect(110+i*30,200,30,30);
  }
}
for(int i=0;i<9;i++){
    fill(255);rect(110+i*30,300,30,30);
    if( 110+i*30 < mouseX && mouseX < 110+i*30+30 &&
      300 < mouseY && mouseY < 300+30){
    fill(0);rect(110+i*30,300,30,30);
    }
  }
}

Week 05 20171016

作業一
滑鼠控制眼球轉動

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); 輔助線
}

增加功能取消輔助線

void setup(){
  size(400,400);
}
void draw(){
  background(128);
  strokeWeight(20);
  ellipse(100,200,180,360);
  ellipse(300,200,180,360);

  float angle1 = atan2((mouseY-200)/2,mouseX-300);
  float newX1=300+100*cos(angle1)/2;
  float newY1=200+200*sin(angle1)/2;
  ellipse(newX1,newY1,10,10);
  float angle2 = atan2((mouseY-200)/2,mouseX-100);
  float newX2=100+100*cos(angle2)/2;
  float newY2=200+200*sin(angle2)/2;
  ellipse(newX2,newY2,10,10);
}

作業二
砲塔遊戲

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(#FA9703);ellipse(200,600,100,100);
  line(mouseX,mouseY,200,600);
  fill(#F9FA03);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];
float [] ballY=new float[10];
float [] ballVX=new float[10];
float [] ballVY=new float[10];
float [] angle=new float[10];
int now=0;
void draw(){
  background(0,128,0);
  fill(#FA9703);ellipse(200,600,100,100);
  for(int i=0;i<10;i++){
  fill(#F9FA03);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++;
}

Week 04 20171002

作業一

增加功能(多隻豬觸碰)

PImage imgBird, imgPig;

void setup(){

  size(800,600);

  imgBird=loadImage("bird.png");

  imgPig=loadImage("pig.png");

  imageMode(CENTER);

  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; 多隻豬的位置

    }

  }

}

float birdVX=0,birdVY=0;

float birdX=200,birdY=500;

float birdAX=0,birdAY=0;

float[][]pigx=new float[5][4]; 

float[][]pigy=new float[5][4];

boolean[][]pigAlive=new boolean[5][4];

void draw(){

    background(255);

    for(int i=0;i<5;i++){

      for(int j=0;j<4;j++){

        if(dist(pigx[i][j],pigy[i][j],birdX,birdY)<100){ 多隻豬的觸碰判斷

          pigAlive[i][j]=false;

        }

        if(pigAlive[i][j]) image(imgPig,pigx[i][j],pigy[i][j],100,100);

      }

    } 

    image(imgBird,birdX,birdY,55,55);

    line(birdX,birdY,200,500);

    birdX += birdVX;

    birdY += birdVY;

    

    if(birdX<27.5){birdX=27.5; birdVX=-birdVX;}

    if(birdX>width-27.5){birdX=width-27.5;birdVX=-birdVX;}

    if(birdY<27.5){birdY=27.5;birdVY=-birdVY;}

    if(birdY>height-27.5){birdY=height-27.5;birdVY=-birdVY;}

    birdVX +=birdAX;

    birdVY +=birdAY;

    birdVX*=0.997; 

    birdVY*=0.997;

}

void mouseDragged(){

  birdX=mouseX;

  birdY=mouseY;

  birdVX=birdVY=birdAX=birdAY=0;

}

void mouseReleased(){

  birdVX=(400-mouseX)/10.0;

  birdVY=(300-mouseY)/10.0;

  birdAY=0.98;

}

增加音效

import ddf.minim.*;
Minim minim;
AudioPlayer player;

void setup(){
  size(800,600);
  minim = new Minim(this);
  player = minim.loadFile("1.mp3",2048);
  player.play();
  player.loop();
}
void draw(){

}

Week 03 20170930

作業一
圖檔的互動

PImage imgBird, imgPig; 讀圖檔
void setup(){
  size(800,600); 視窗大小
  imgBird=loadImage("bird.png"); 鳥的圖檔
  imgPig=loadImage("pig.png");  豬的圖檔
}
float birdVX=0,birdVY=0; 鳥的速度設定
float birdX=400,birdY=300; 鳥的圖檔位置
void draw(){
    background(255); 背景顏色
    image(imgPig,400,300,50,50); 豬的位址及大小
    image(imgBird,birdX,birdY,55,55); 鳥的位址及大小
    line(birdX,birdY,400,300); 輔助線
    birdX +=birdVX; 鳥的X位置+鳥的速度
    birdY +=birdVY; 鳥的Y位置+鳥的速度
}
void mouseDragged(){ 當滑鼠拖曳時
  birdX=mouseX; 鳥的X位置移動到滑鼠的X位置
  birdY=mouseY; 鳥的Y位置移動到滑鼠的Y位置
}
void mouseReleased(){ 當滑鼠放開時
  birdVX=(400-mouseX)/100.0; 鳥的X速度
  birdVY=(300-mouseY)/100.0; 鳥的Y速度
}

調整線的位置

PImage imgBird, imgPig;
void setup(){
  size(800,600);
  imgBird=loadImage("bird.png");
  imgPig=loadImage("pig.png");
  imageMode(CENTER); 上圖的線會在圖片的左上角，為了更方便理解必須將線放在圖的中間
}
float birdVX=0,birdVY=0;
float birdX=400,birdY=300;
void draw(){
    background(255);
    image(imgPig,400,300,50,50);
    image(imgBird,birdX,birdY,55,55);
    line(birdX,birdY,400,300);
    birdX +=birdVX;
    birdY +=birdVY;
}
void mouseDragged(){
  birdX=mouseX;
  birdY=mouseY;
}
void mouseReleased(){
  birdVX=(400-mouseX)/100.0;
  birdVY=(300-mouseY)/100.0;
}

增加加速度

PImage imgBird, imgPig;
void setup(){
  size(800,600);
  imgBird=loadImage("bird.png");
  imgPig=loadImage("pig.png");
  imageMode(CENTER);
}
float birdVX=0,birdVY=0;
float birdX=400,birdY=300;
float birdAX=0,birdAY=0; 鳥的X加速度及鳥的Y加速度
void draw(){
    background(255);
    image(imgPig,400,300,50,50);
    image(imgBird,birdX,birdY,55,55);
    line(birdX,birdY,400,300);
    birdX +=birdVX;
    birdY +=birdVY;
    birdVX +=birdAX; 鳥的X速度+鳥的X加速度
    birdVY +=birdAY; 鳥的Y速度+鳥的Y加速度
}
void mouseDragged(){
  birdX=mouseX;
  birdY=mouseY;
  birdVX=birdVY=birdAX=birdAY=0;
}
void mouseReleased(){
  birdVX=(400-mouseX)/10.0;
  birdVY=(300-mouseY)/10.0;
  birdAY=1.98; 鳥的Y加速度(相當於重力加速度)
}

碰撞之後消失

PImage imgBird, imgPig;
void setup(){
  size(800,600);
  imgBird=loadImage("bird.png");
  imgPig=loadImage("pig.png");
  imageMode(CENTER);
}
float birdVX=0,birdVY=0;
float birdX=400,birdY=300;
float pigX=700,pigY=100;
float birdAX=0,birdAY=0;
boolean pigAlive=true; 判斷圖片是否存在
void draw(){
    background(255);
    if(pigAlive) image(imgPig,pigX,pigY,50,50); 
    image(imgBird,birdX,birdY,55,55);
    if(dist(pigX,pigY,birdX,birdY)<100){ 當豬和鳥的位置<100，豬會消失
      pigAlive=false;
    }
    line(birdX,birdY,400,300);
    birdX +=birdVX;
    birdY +=birdVY;
    birdVX +=birdAX;
    birdVY +=birdAY;
}
void mouseDragged(){
  birdX=mouseX;
  birdY=mouseY;
  birdVX=birdVY=birdAX=birdAY=0;
}
void mouseReleased(){
  birdVX=(400-mouseX)/10.0;
  birdVY=(300-mouseY)/10.0;
  birdAY=0.18;
}

增加地圖範圍及空氣阻力

PImage imgBird, imgPig;

void setup(){

  size(800,600);

  imgBird=loadImage("bird.png");

  imgPig=loadImage("pig.png");

  imageMode(CENTER);

}

float birdVX=0,birdVY=0;

float birdX=400,birdY=300;

float pigX=700,pigY=100;

float birdAX=0,birdAY=0;

boolean pigAlive=true;

void draw(){

    background(255);

    if(pigAlive) image(imgPig,pigX,pigY,50,50);

    image(imgBird,birdX,birdY,55,55);

    if(dist(pigX,pigY,birdX,birdY)<100){

      pigAlive=false;

    }

    line(birdX,birdY,400,300);

    birdX +=birdVX;

    birdY +=birdVY;

    if(birdX<27.5){birdX=27.5; birdVX=-birdVX;}地圖X左邊邊界和鳥圖片的一半大小

    if(birdX>width-27.5){birdX=width-27.5;birdVX=-birdVX;}地圖X右邊邊界和鳥的圖片一半大小

    if(birdY<27.5){birdY=27.5;birdVY=-birdVY;}地圖Y上面邊界和鳥圖片的一半大小

    if(birdY>height-27.5){birdY=height-27.5;birdVY=-birdVY;}地圖Y下面邊界和鳥圖片的一半大小

    birdVX +=birdAX;

    birdVY +=birdAY;

    birdVX*=0.997; 鳥的X速度空氣阻力

    birdVY*=0.997; 鳥的Y速度空氣阻力

}

void mouseDragged(){

  birdX=mouseX;

  birdY=mouseY;

  birdVX=birdVY=birdAX=birdAY=0;

}

void mouseReleased(){

  birdVX=(400-mouseX)/10.0;

  birdVY=(300-mouseY)/10.0;

  birdAY=0.98;

}

Week 01 20170918

作業一

line(0,0,100,100) ;畫線

rect(10,10,50,50);畫方形

size(500,500);視窗大小設定

void setup(){
  size(500,500);
}
void draw(){
  line(mouseX,mouseY,pmouseX,pmouseY);
  //rect(10,10,50,50);
}

mouse 利用滑鼠去畫，pmouse 先前滑鼠位子

void setup(){

  size(500,500);

}

void draw(){

  if(key=='1') {strokeWeight(10); stroke(#FF0307);} 

strokeWeight(10)為粗細大小，stroke(#FF0307)#FF0307為顏色色彩

按壓鍵盤1時執行

  if(key=='2') {strokeWeight(5); stroke(#1603FF);}

  line(mouseX,mouseY,pmouseX,pmouseY);

  //rect(10,10,50,50);

} 

Week 02 20170925

作業一
擴充小畫家功能(線的粗細及顏色)
void setup(){
  size(800,600); 視窗大小設定
  colorMode(HSB,100); H=影像，S=飽和度，B=亮度
}

void mousePressed(){ 滑鼠按壓函式
  if(mouseX<100){
    strokeWeight(mouseY/50); 筆觸粗細
  }

if(mouseX>700){
    stroke(mouseY/6.0,100,100); 筆觸顏色
  }

作業二
調整小畫家功能(使畫面乾淨)

rect(width-100,0,width,height); 制定調整線顏色的範圍
rect(0,0,100,height); 制定調整線粗細的範圍
void mouseDragged(){ 滑鼠拖曳函式
  if(mouseX<100){
    strokeWeight(mouseY/50); 筆觸粗細
  }
  if(mouseX>width-100){
    stroke(mouseY/6.0,100,100); 筆觸顏色
  }
}

理解HBS

變數一控制色彩

變數二控制色彩飽和度

變數三控制色彩明暗

作業三

void setup(){
  size(720,720,P2D);
}
float pX=-100,pY=-100
void draw(){

}
void mouseDragged(){
  ellipse(mouseX,mouseY,100,100); 畫圖形
}


讀圖檔

size(500,500); 視窗大小
background(0,255,0); 背景顏色
PImage img=loadImage("a.png"); 讀圖檔
image(img,0,0,500,500); 圖片大小

PImage img1,img2;
void setup(){
  size(500,500);
  img1=loadImage("a.png");
  img2=loadImage("b.png");
}
void draw(){
  background(0,255,0);
  image(img1,mouseX,mouseY,100,100); 滑鼠控制圖片移動
  image(img2,200,200,100,100);
}