week12

 今天都在講解 期末作業

week11

今天要先來確定上週提的期末作品，我是選開心農場，但後來還是決定跟游騰翔08161035一起做旅行青蛙。

老師細心地幫我們每個人講解，第一個輪到的是俄羅斯方塊

接著是一二三木頭人~

還有小朋友下樓梯

1

week10

今天開始不用補課了~然後這是今天的目標

我們的期末規劃的夥伴是游騰翔08161035

老師給了我們網址:https://openprocessing.org/sketch/911326

大概是要做出這種當年GameBoy神奇寶貝的那種小人，讓他上下左右。

(也可以使用老師裡面的圖片)

這個是所有的2D腳色移動圖片

程式碼:

PImage img;

void setup(){

  size(500,500);

  img=loadImage("img.jpg");

  imageMode(CENTER);

}

int a=0, b=0, x=250, y=250;

void draw(){

  background(255);

  //image( img, 0,0);

  image(  img.get(141*a, 211*b, 141,211), x,y);

  if(frameCount%30==0) a = (a+1)%4;

}

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++; }

}

然後就是確認好期末想做什麼

原本要用電子雞的結果被先說走了~所以就跟我夥伴討論好，決定使用旅行青蛙+開心農場

其中一個，或者旅行青蛙會有種菜的元素。

week08

這邊先做出這個球讓他一直下墜，vy值愈大，球會掉得愈快喔!

也可以延伸做出兩個下墜的!

如此一來 也可以做出一個會掉4個的(因為有4組陣列)

程式碼:

//step01-3 很多組咧?

float []x={250,150,350,300};

float []y={0,50,80,100};

float []vx={0,0,0,0};

float []vy={3,2,2.5,4};

void setup()

{

  size(500,600);

}

void draw()

{

  background(255);

  for(int i=0;i<4;i++)

  {

    ellipse(x[i],y[i],50,50);

    y[i]=y[i]+vy[i];

  }

}

下面多那兩行 就會讓球球變得很Q彈~可以上下互撞。

continue會讓後面不能移動，所以會整個暫停住!

就像抓蚊子一樣 一抓就死了紅點碰到的東西就會直接死亡 暫停了~

(下方只有一顆沒碰到的黃球在動)

程式碼:

//step01-3 很多組咧?

float []x={250,150,350,300};

float []y={0,50,80,100};

float []vx={0,0,0,0};

float []vy={3,2,2.5,4};

boolean [] dead={false,false,false,false};//false 0,truc 1

void setup()

{

  size(500,600);

}

void draw()

{

  background(255);

  for(int i=0;i<4;i++)

  {

    fill(255,255,0);ellipse(x[i],y[i],50,50);

    if(dist(mouseX,mouseY,x[i],y[i])<=50)

    {

      dead[i]=true;//剛剛是暫停 現在是碰到就死

    }

    if(dead[i]==true)continue;//如果葛屁了 就要再換下一個了

    y[i]=y[i]+vy[i];

    if(y[i]>600) vy[i]=-vy[i];

    if(y[i]<0) vy[i]=-vy[i];

  }

  fill(255,0,0); ellipse(mouseX,mouseY,50,50);

}

接著是同學對boolean函數有疑問 老師幫助我們更好理解

可以看到下面 待機時一堆false

但只要利用mousePressed壓著下方和顏色同時都會改變成true

回到一開始的球球 現在要用很多

上面要把陣列都改掉，下面void draw不需要動 原理是一樣的~只是原本for迴圈裡的那個4個陣列要改成N!

//step03-1 希望多很多，不只4個球

float []x;

float []y;

float []vy;

boolean [] dead;

int N=20;

void setup()

{

  size(500,600);

  x =new float[N];//決定陣列大小

  y =new float[N];

  vy =new float[N];

  dead =new boolean[N];

  for(int i=0;i<N;i++)

  {

    x[i] =random(500);//500以下的亂數

    y[i] =random(100,200);

    vy[i] =random(3,4);

    dead[i] =false;//沒死

  }

}

void draw()

{

  background(255);

  for(int i=0;i<N;i++)

  {

    fill(255,255,0);ellipse(x[i],y[i],50,50);

    if(dist(mouseX,mouseY,x[i],y[i])<=50)

    {

      dead[i]=true;//剛剛是暫停 現在是碰到就死

    }

    if(dead[i]==true)continue;//如果葛屁了 就要再換下一個了

    y[i]=y[i]+vy[i];

    if(y[i]>600) vy[i]=-vy[i];

    if(y[i]<0) vy[i]=-vy[i];

  }

  fill(255,0,0); ellipse(mouseX,mouseY,50,50);

}

week07

第一節課要做出一個時鐘~

今天先複習原本教過的東西

但我們要做成互動的方式，所以先改成兩個位子 會比較好做

並且把座標移下來

接著就讓他可以有個計時的功能 加入FrameCount

但因為他計時實在太快 所以我們要對FrameCount調整 並且在新增一個millis 千分之一秒

這樣一來可以更為準確

同理 我們可以將裡面的內容改掉同時插入時間，直接變成現在時間的時鐘!超讚

其實print那邊也可以省略 然後改成這樣~(中文沒辦法顯示)

時鐘程式碼:

void setup()

{

  size(600,600);//大窗子

  fill(255,0,0);//填滿顏色變成255,0,0

  textSize(80);//放大字

}

void draw()

{

  background(255);

  //printf("%02d:%02d:%02d", hour(),minute(),second(););

  text(hour()+":"+minute()+":"+second(),50,100);//預設fill填充白色

  text("中文:"+millis()/1000,50,200);

}///每秒60frame 過了幾個free

那我們再開一個新的processing 來處理這個中文的問題

這邊會顯示出所有的輸入法

接著我們把其中的字體拿來使用，就可以在這邊用那個字體打出中文囉~

接著將他弄成好，然後加上mousePressed就可以改變字體囉(按下去:標楷切正黑)

按下去字體直接變換

這樣改 就可以讓所有東西都出來

最後面是在倒數(1041那個)

然後可以把它變成負數的，也是負的分鐘換算。

程式碼:

void setup()

{

  size(600,600);

  fill(255,0,0);

  textSize(80);

}

void draw()

{

  background(255);

  String hh=nf(hour(),2);

  String mm=nf(minute(),2);

  String ss=nf(second(),2);

  text("現在:"+hh+":"+mm+":"+ss,50,100);

  text("下課:15:40:00",50,200);

  

  int now=hour()*60*60 +minute()*60+second();

  int next=15 *60*60 +40 *60+0;

  int remain = next-now;

  text("剩下:"+remain,50,300);

  hh =nf(remain/60/60%60,2);

  mm =nf(remain/60%60,2);

  ss =nf(remain,2);

  text("剩下:"+hh+":"+mm+":"+ss,50,400);

}

我們可以把老師給的圖檔放進去 然後排序顯示出來，並且調整大小

week05

今天先來安裝外掛

然後安裝video的插建

之後從範例那邊匯入這個程式碼~

接著把檔案移到process裡面然後換個程式碼就可以放出來~

week04

今天要來做棋盤~先把簡單的顏色和線畫上去，之後要用for迴圈來做比較省時省力!

 

我們可以發現裡面的50和450是不會動的

依照這個規律 可以寫出利用50當作倍數的迴圈!

橫線也可以做出同樣的東西!(這是還沒簡化的人)

000的部分是格子喔~

第二節先使用了這個

把格子弄出來也可以上色

可以讓我們比較理解顏色要上在哪

可以把0改成1就會有棋子出現喔~當然下面也要配合程式寫一個棋子的迴圈。

之後配合mousePressed可以做出 按下去會有棋子的效果

把50改成25可以讓位子更精確

把下面原本的go[i][j]修改成條件式的話

配合mosueButton可以做到滑鼠三鍵分別有效果(黑、白、消除)

棋盤就先到此為止了~接著要做的是顏色的那種圈圈

可以用滑鼠來控制他的圖案喔加上這些mouseY

加上這個可以讓圈圈被拉扯時 變顏色變大小

void setup()

{

  size(500,500);

}

void draw()

{

  background(128);

  noFill();

  stroke(mouseX,255,mouseY);

  for(float a=0; a<360; a+=1)

  {

    float x=250+mouseX*cos(radians(a));

    float y=250+mouseY*sin(radians(a));

    ellipse(x,y,mouseY,mouseY);

  }

}

Week03

這周開始實體上課了(上禮拜放假)

這周先複習以前的載入圖片(將圖片拉進 檔名打對即可)

接著調整Image(img,0,0)這行 後面多一個大小 可以調整圖片的大小。

例如400*400

我們可以設定更多img放進去然後也可以將原本的xy改成mouseXY來移動滑鼠控制圖片。

接著把他去背之後能更好看

也可以再調整他的大小，變得更加好看。

程式碼:

PImage img1,img2;

//圖片,聲音

void setup()

{

  size(500,500);

  img1=loadImage("example.png");

  img2=loadImage("圖片3.png");

}

void draw()

{

  image(img1,0,0,500,500);

  image(img2,mouseX-100,mouseY-100,200,200);

}

接著要來學聲音 先去安裝這兩個

接著把音樂程式碼搞懂之後

去PlayAFile裡面有個音樂檔 抓出來並且將檔名打上去 就有聲音囉~ 

也能放出雙重的音樂

可以做出一個鋼琴(然後按數字1~5可以發出聲音)