逗貓

做一個像是快樂水族箱裏面的魚會吃飼料
不過魚變成貓
void setup(){
    size(300,300);
}
float x=200, y=150;
void draw(){
  background(#002966);
  fill(255);
  rect(x,y, 80,20);
  float dx=x-mouseX, dy=y-mouseY;
  x -=dx*0.1;
  y -=dy*0.1;
}

幾何圖形

先寫出背景，背景顏色，及一顆圓球
void setup(){
    size(300,300);
}
void draw(){
  background(#002966);\\背景顏色
  fill(#b7efff);\\球的顏色
  noStroke();\\\不畫線
  ellipse(100,150, 13,13);
  ellipse(200,150, 13,13);
}

下一步:
把圓跟圓之間的線畫出來

void setup(){
    size(300,300);
}
void draw(){
  background(#002966);
  stroke(#b7efff);///多加了這行畫線
  line(100,150, 200,150);以及點連點的線

  fill(#b7efff);
  noStroke();
  ellipse(100,150, 13,13);
  ellipse(200,150, 13,13);
}

使點可以隨著滑鼠移動
void setup(){
    size(300,300);
}
float x=200, y=150;\\設一個變數
void draw(){
  background(#002966);
  stroke(#b7efff);
  line(100,150, x,y);

  fill(#b7efff);
  noStroke();
  ellipse(100,150, 13,13);
  ellipse(x,y, 13,13);
}
void mouseDragged(){\\跟著滑鼠動\
  x=mouseX; y=mouseY;
}

讓點放開滑鼠時回彈
void setup(){
    size(300,300);
}
float x=200, y=150;
void draw(){
  background(#002966);
  stroke(#b7efff);
  line(100,150, x,y);

  fill(#b7efff);
  noStroke();
  ellipse(100,150, 13,13);
  ellipse(x,y, 13,13);
  if( ! mousePressed){\\\驚嘆號是止滑鼠放開時
    float dx=x-100, dy=y-150;
    float len=sqrt(dx*dx+dy*dy);
    x -= dx*(len-100)/len;
    y -= dy*(len-100)/len;
}
void mouseDragged(){
  x= mouseX; y= mouseY;
}

一次只有10分之一，比較圓滑

虎克定律
微積分: 位置=>速度=>加速度(力)
讓圓圈反彈

   使圓圈彈跳速度變快
vx -= dx*(len-100)/len*0.1;
    vy -= dy*(len-100)/len*0.1;
    x+= vx;///x -= dx*(len-100)/len*0.1;\\\越大越強
    y+= vy;///y -= dy*(len-100)/len*0.1;
}
void mouseDragged(){
  x= mouseX; y= mouseY;
  vx =0; vy=0;\\\在拉動時，不能有速度
}

會動的小人

程式碼:
PImage img;
void setup(){
  size(500,500);
  img=loadImage("img.jpg");
  imageMode(CENTER);
}
void draw(){
  background(255);
  //image( img, 0,0);
  image(  img.get(141*a, 211*b, 141,211), x,y);
  if(frameCount%30==0) a++;
  if(a>=4) a=0;
}
int a=0, b=0, x=250, y=250;
void keyPressed(){
  if(keyCode==RIGHT){ b=3; x++; }
  if(keyCode==LEFT) { b=2; x--; }
  if(keyCode==UP) { b=1; y--; }
  if(keyCode==DOWN){ b=0; y++; }
}
#記得要放入圖片~

void setup(){
       size(500,500);
       img=loadImage("img.jpg");
}
int a=0;
void draw(){
  background(255);
  image( img.get(141*a,0,141,211), 0,0);
  if(frameCount%30==0)a=(a+1)%4;
\\\這能讓圖片走路，0.5秒走一步

憤怒鳥

基礎:如何讓鳥出現及有一條線去拉他的感覺
PImage imgBird;
void setup(){
  size(500,400);
  imgBird=loadImage("bird.png"); \\\圖檔如果沒有放好會當掉
  imageMode(CENTER);\\\以正中心當作標
}
float birdX=100,birdY=300,oldX,oldY;\\\之前的鳥在哪
void draw(){
  background(255);清背景
  image(imgBird, birdX,birdY, 100,100);\\\不能一直跟著滑鼠動，改用bird
  if(mousePressed) line(birdX,birdY, oldX,oldY);
}
void mousePressed(){\\\按下去才開始動
  oldX=birdX; oldY=birdY;
}
void mouseDragged(){\\\按下去才開始動
  birdX=mouseX; birdY=mouseY;
}

讓鳥可以碰撞反彈

如何讓音樂載入背景:

使用MP3在記事本打開，複製程式碼:

PImage imgBird;

void setup(){

  size(500,400);

  imgBird=loadImage("bird.png");//圖檔如果沒有放好,會當掉 pointer

  imageMode(CENTER);//以正中心,當座標

}

float birdX=100, birdY=300, oldX, oldY, vx=0, vy=0;//之前的鳥在哪裡

boolean bMoving=false;//if(判斷) ex. if(bMoving)...

void draw(){

  background(255);//清背景

  image(imgBird, birdX,birdY,100,100);//不能一直跟著mouse動,改用birdX,birdY

  if(bMoving) line(birdX,birdY, oldX,oldY);//有按到,才能動它

  birdX+=vx; birdY+=vy;//鳥要照速度去飛!!!

  if(birdX>450 || birdX<50) vx = -vx*0.95;//撞到邊界,會改變方向,相反的方向

  if(birdY>350 || birdY<50) vy = -vy*0.95;//撞到邊界,會改變方向,相反的方向

}

void mouseReleased(){

  if(bMoving){

    bMoving=false;//放開時,就不能動了

    vx=(oldX-mouseX)/10; vy=(oldY-mouseY)/10;// 0.1倍

  }

}

void mousePressed(){//按下去,才會開始動

  if( dist(mouseX,mouseY, birdX,birdY)<50){

    oldX=birdX; oldY=birdY;

    bMoving=true;///按下去時,如果有按到,才能動它

  }

}

void mouseDragged(){//按下去,才會開始動

  if(bMoving) {//有按到,才能動它

    birdX=mouseX; birdY=mouseY;

  }

}

泡泡排序2

程式碼:
先了解如何做出圓圈
void setup(){
  size(300,500);
}
int N=5;
void draw(){
   background(0);
   int R=300/N, w=R/2;
   for(int x=0;x<N;x++){
     for(int y=0;y<N;y++){
       ellipse(0+w+x*R, 200+w+y*R, R,R);
     }
   }
}

泡泡排序法

泡泡排序法P程式碼:

(陣列)

int []a=new int[10];//Java's Array

void setup(){

  size(500,800);

  for(int i=0;i<10;i++){//random choose number

    a[i]=int(random(10));//亂數決定數字

  }

  textSize(36);///利用textsize調整數字大小

  textAlign(LEFT,TOP);/文字改用左上角

  showArray(y);

}

int y=0;

void showArray(int y){ //左上角

  for(int i=0;i<10;i++){//rect(x,y, w,h)四邊形

    fill(255);  rect(i*50, y, 50,50);

    fill(0);         text(a[i], i*50, y);

  }   ///秀文字(字,  x,    y) 放哪裡 (左下角)

}

void draw(){

  

}

void mousePressed(){

  for(int i=0; i<10-1;i++){

    if(a[i] > a[i+1]){

      int temp=a[i];

      a[i]=a[i+1];

      a[i+1]=temp;

      fill(255,0,0,128); rect(i*50, y, 100,50);

    }

  }

  y+=50;

  showArray(y);

}

可調整背景顏色，及數字顏色深淺

小精靈吃蛋蛋

基本:
PIE =3.1415
把angle設成基本45度
不用圓形程式碼的原因是因為不精確，
利用陀圓形，讓這個小精靈更漂亮。

FrameCount這裡是要算從0-120之間的數
再去用120減掉原本的角度(45)，
做出小精靈的嘴巴。

fill讓圖案填滿顏色，
可利用小畫家滴管，知道那個顏色的三元素比例為何，
製作出你相要的小精靈。
arc這行在radians加上你想要小精靈嘴巴朝向的方位即可。

複習一下(今日第九週)

使用color seleter seleter 去變換小精靈的顏色。
然後使用陀圓形的程式碼去改變小精靈的開口。

小精靈吃蛋蛋完整程式碼(還不能控制上下左右)
程式碼:
void satup(){
  size(600,300)\\\這是背景大小
}
int [] [] bean={\\\這是 Java語言的陣列，蛋蛋出現了
   {1,1,1,1,1,1,1,1},
   {1,1,1,1,1,1,1,1},
   {1,1,1,1,1,1,1,1},
   {1.1.1.1.1.1.1.1},
   {1.1.1.1.1.1.1.1},
   {1,1,1,1,1,1,1,1}};

int x=50, y=50, a=45, da=1;\\\da是角度a的改變量，先放1
void draw(){\\\一秒會叫draw()叫60次
   background(0);
   fill(#F5ED02);
for(int i=0;i<6;i++){\\\可以吃掉蛋蛋了
     for(int j=0;j<8;j++){
          if(bean[i][j]==1) ellipse( j*100+50, i*100+50, 6,6);
          if( dist( x,y,   j*100+50)<50) bean[i][j]=0;
    }
}
   arc(x,y,100,100,  radians(a),  radians(360-a),PIE);
   x++;
   a+= da;\\\張大或縮小
   if(a>60) da=-1;\\\太大所以縮小
   if(a<=0) da=+1;\\\太小所以放大
}

活生生的大便_week03

如何做出能移動的大便!
要注意程式碼的大小寫，以及名稱!
首先程式碼打一打，圖片這次我們利用小畫家配合ppt來製作三個，沒有背景的大便!

使用校畫家畫出三個不同方向的大便!

利用PPT幫圖片去背!
之後把圖片丟進程式碼裡面!

完成囉!你可以移動你的大便了!
如果想在背景加入圖片，往下看......

利用這張圖的程式碼設定背景大小USER
就可以完成友背景又可以動的大便囉!

自由落體_week02

先寫出小畫家，以小畫家當作基底，開始改寫程式囉!

step01:
不需要畫線所以，先把line刪掉，而座標也改成只剩x和y
step02:
設定x和y，為座標，但程式錯誤，因為前面還沒設定座標
所以在開頭設定int
step03;
該怎麼畫出一個圓?
程式cricle()，寫出你想要的大小
step04;
如何讓球往下掉?
如果你想要他掉快一點，從最基礎的y++，開始變
ex想要他掉兩格_y+=2
step05;
最後就是解決殘影
設定背景顏色，蓋掉殘影
background()
完成囉!!!!
--------------------------------------------------------------------------------------
進階版:

做出很多球往下掉，同時停在底部，以及如何在超過陣列時不讓程式當掉
step01;
把單純的設定座標改成陣列，依你想要的球數，打幾個0
step02;
把所有座標改成陣列
step03;
利用for迴圈，讓滑鼠點一下掉下一顆球
step04;
為了要讓球停在底部，所以增加了一個if條件，如果直接打上版面尺寸，那球會被切掉，所以還要再減掉球的半徑
step05;
為了不讓程式當陣列超過範圍時當掉，這時需要在一個條件
讓滑鼠點了也沒用，用n++，使我們的求多了一個
就完成囉!!!!!