橘貓(互動技術期末_week11)

 

 Timberman-期末作品第三步

解說遊戲內容

遊戲規則與機制:

• 限時內把樹砍倒
• 躲過樹枝，時間會增加
• 每砍掉一段木頭就可以得分!
• 按"↑"可重新開始遊戲
• 可刷新最高紀錄，重新挑戰

解說遊戲判定與設定

遊戲開始畫面

死亡畫面

按"↑"可重新開始遊戲

時間到了所以判定死亡

程式碼:

橘貓(互動技術期末_week10)

 

 Timberman-期末作品第二步

把素材準備好!!

程式碼:

PImage log;

PImage leftB;

PImage rightB;

PImage bg;

PImage leftM;

PImage rightM;

PImage menu;

PFont timberman;

float seconds = 5;

float actualMillis = 3;

int[]tree=new int[30];//0:no,1:left,2:right

int pos=0;//0:left,1:right

int score=0;

int topscore=0;

boolean stop=false;

boolean gameOver=false; 

void setup(){

  size(300,600);

  log = loadImage("log.png");

  leftB = loadImage("leftB.png");

  rightB = loadImage("rightB.png");

  bg = loadImage("bg.png");

  leftM = loadImage("leftM.png");

  rightM = loadImage("rightM.png");

  menu = loadImage("menu.png");

  tree[0]=0;//safe

  for(int i=1;i<30;i++){

    tree[i]=int(random(3));

  }

}

void draw(){

  if(!stop){

  clear();

  image(bg,0,0);

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

    if(tree[i]==0){image(log,100,500-i*100,100,100);}

    else if(tree[i]==1){image(leftB,0,500-i*100,200,100);

  }

    else if(tree[i]==2){image(rightB,100,500-i*100,200,100);}

  }

  if(pos==0){image(rightM,0,475);}

  else if(pos==1){image(leftM,200,475);}

  showSeconds(millis()/1000 - actualMillis);

  if (millis()/1000 - actualMillis >= seconds) {die();}

  }

}

void keyPressed(){

  if(!stop){

    if(keyCode==RIGHT){pos=1;checkAndUP();}

    if(keyCode==LEFT){pos=0;checkAndUP();}

  }

  if(keyCode==UP){reset();}

}

void checkAndUP(){

  if(tree[1]==1&&pos==0)die();

  else if(tree[1]==2&&pos==1)die();

  else {

    score++;

    if ((seconds + 0.25) - (millis()/1000 - actualMillis) <= 14){ seconds += 0.25;}

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

      tree[i]=tree[i+1];

    }

    tree[29]=int(random(3));

  }

}

void showSeconds(float s) {

  float time = map(seconds - s, 0, 14, 0, 140);

  fill(255,140,105);rect(width/2 - 70 + time/2, 40, time, 20);

}

void die(){

  gameOver=true;

  image(menu,0,0);

  if (score > topscore) { topscore = score;}

  //textSize(25);

  textAlign(CENTER);

  timberman = createFont("timberman.ttf", 30);

  textFont(timberman);

  fill(255,255,255);text(topscore,150, 310); 

  fill(255,255,255);text(score,150, 385); 

  stop = true;

}

void reset(){

    stop = false;

    actualMillis = millis()/1000;

    seconds = 7;

    score=0;

    return;

}

橘貓(互動技術筆記_week09)

 Timberman-期末作品第一步

程式碼:

int[]tree=new int[30];//0:no,1:left,2:right

int pos=0;//0:left,1:right

void setup(){

  size(300,600);

  tree[0]=0;//safe

  for(int i=1;i<30;i++){

    tree[i]=int(random(3));

  }

}

void draw(){

  if(gameOver){background(255,255,0);return;}

  background(255,0,255);

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

    if(tree[i]==0){

      fill(#28C3E8);rect(100,500-i*100,100,100);

    }else if(tree[i]==1){

      fill(#28C3E8);rect(0,500-i*100,200,100);

    }else if(tree[i]==2){

      fill(#28C3E8);rect(100,500-i*100,200,100);

    }

  }

  if(pos==0){fill(255,0,0);ellipse(50,550,100,100);}

  else if(pos==1){fill(255,0,0);ellipse(250,550,100,100);}

}

void keyPressed(){

  if(keyCode==RIGHT){pos=1;checkAndUP();}

  if(keyCode==LEFT){pos=0;checkAndUP();}

}

void checkAndUP(){

  if(tree[1]==1&&pos==0)die();

  else if(tree[1]==2&&pos==1)die();

  else {

    //score++;

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

      tree[i]=tree[i+1];

    }

    tree[29]=int(random(3));

  }

}

void die(){

  gameOver=true;

}

boolean gameOver=false; 

橘貓(互動技術筆記_week08)

Processing-8bit 人物走動

本日程式碼重點:

• image(img.get(0,0,141,211),0,0);//針對特定區域截圖
• image(img.get(190*a,0,190,252),0,0);
    a = (a+1)%4;//有4個動作
• if(frameCount%30==0)a = (a+1)%4;//1秒有60影格，設定%30在一秒內移動2次.
• void keyPressed(){//按鍵按壓的函式
    if(keyCode==DOWN){b=0;y++;}//指定按鍵

期末作品構思-Timberman

遊戲流程:

• 限時內把樹砍倒
• 需躲過樹枝
• 每砍掉一段木頭就可以得分!

1.讀圖檔

PImage img;//宣告圖

void setup(){

  size(500,500);

  img=loadImage("img.jpg");//讀取圖片

}

void draw(){

  background(0);

  image(img,0,0);}

圖1

2.裁切

PImage img;

void setup(){

  size(500,500);

  img=loadImage("img.jpg");}

void draw(){

  background(255);

  image(img.get(0,0,141,211),0,0);//針對特定區域截圖

}

圖2

3.踏出第一步

PImage img;

void setup(){

  size(500,500);

  img=loadImage("img.jpg");//讀取圖片

}

int a=0;

void draw(){

  background(255);

  image(img.get(190*a,0,190,252),0,0);

  a = (a+1)%4;//有4個動作

}

圖3(!!!發現跑的太快了!!!)

4.調整移動速度

PImage img;

void setup(){

  size(500,500);

    img=loadImage("img.jpg");//讀取圖片

}

int a=0;

void draw(){

  background(255);

  image(img.get(190*a,0,190,252),0,0);

  if(frameCount%30==0)a = (a+1)%4;//1秒有60影格，設定%30在一秒內移動2次

}

圖4(控制好速度)

5.控制方向

PImage img;

void setup(){

  size(500,500);

    img=loadImage("img.jpg");//讀取圖片

  imageMode(CENTER);

}

int a=0,b=0,x=250,y=250;//設定b變數調整方向

void draw(){

  background(255);

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

  if(frameCount%30==0)a = (a+1)%4;//1秒有60影格，設定%30在一秒內移動2次

}

void keyPressed(){

  if(keyCode==DOWN){b=0;y++;}

  if(keyCode==UP){b=1;y--;}

  if(keyCode==LEFT){b=2;x--;}

  if(keyCode==RIGHT){b=3;x++;}

}

圖5(出現會自動走動的人物了!)

橘貓(互動技術筆記_week07)

Processing-陣列，for迴圈，boolean

本日程式碼重點:

1.boolean:具有『真』(true) 與『偽』(false) 兩種值，用來表示是非對錯的概念。

boolean[] dead={false,false,false,false};//宣告一個布林陣列

boolean[] dead;//宣告一個空的布林陣列

2.random();//會隨機生成數字在()範圍內

x = random(500);//X為一個0~500的隨機數

3.class物件導向

class ball{}

第一節課金幣下墜

1.一個球版本

程式碼:

float x=250,y=0,vx=0,vy=3;// (座標x,y)

void setup(){

  size(500,600);

}

void draw(){

  background(255);

  ellipse(x,y,50,50);

  //y++; //(有兩行省略)速度 1,2,3,...

  //y=y+3; //3是速度

  y=y+vy; //vy是速度

}

2.兩個球版本

程式碼:

float x=250,y=0,vx=0,vy=3;

float x2=150,y2=50,vx2=0,vy2=2;

void setup(){size(500,600);}

void draw(){

  background(255);

  ellipse(x,y,50,50);

  ellipse(x2,y2,50,50);

  y=y+vy; //vy是速度

  y2=y2+vy2; //vy2是速度

}

3.使用陣列與for迴圈讓超多球球一起下降

程式碼:

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

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];

  }

}

4.加上邊界讓很多球球一起搖滾(碰到邊界會反彈)

程式碼:

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

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];//vy是速度

    if(y[i]>600)vy[i]=-vy[i];//撞到下方

    if(y[i]<0)vy[i]=-vy[i];//撞到上方

  }

}

5.黃球碰到紅球(滑鼠控制)會停下來

程式碼:

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

float[] y={0,150,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++){

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

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

      continue;//繼續

    }

    y[i]=y[i]+vy[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);

}

6.黃球碰到紅球(滑鼠控制)會被消掉

1.四顆球

2.兩顆球

3.消光光了!

程式碼:

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

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

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

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

boolean[] dead={false,false,false,false};

void setup(){

  size(500,600);

}

void draw(){

  background(255);

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

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

      dead[i]=true; //碰到就死掉

    }

    if(dead[i]==true) continue; //如果死了，換下一個

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

    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);

}

7.紅球消黃球增量版

球變多了

程式碼:

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]=100;

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

    dead[i]=false;

    }

}

void draw(){

  background(255);

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

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

      dead[i]=true; //碰到就死掉

    }

    if(dead[i]==true) continue; //如果死了，換下一個

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

    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);

}

8.class物件導向，隨機生成球球

不會縮成一團

程式碼:

class Ball{

  float x,y,vx,vy;

  boolean dead;

  Ball(){

    x = random(500);//X為一個0~500的隨機數

    y = random(500);//Y為一個0~500的隨機數

    vy = random(-4,4);

    vx = random(-4,4);

    dead = false;

  }

  void draw(){

    if(dead==true) return;

    ellipse(x,y,50,50);

    if(dist(mouseX,mouseY,x,y)<50){

      dead=true;

    }

    x = x + vx;

    y = y + vy;

    if(y>500||y<0) vy = -vy;

    if(x>500||x<0) vy = -vy;

  }

}

Ball []balls;

void setup(){

  size(500,500);

  balls = new Ball[20];

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

    balls[i]=new Ball();

  }

}

void draw(){

  background(255);

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

    balls[i].draw();

  }

}

9.有重力加速度的球

上下跳動更加明顯的球球

程式碼:

class Ball{

  float x,y,vx,vy;

  boolean dead;

  Ball(){

    x = random(500);

    y = random(500);

    vy = random(-4,4);

    vx = random(-4,4);

    dead = false;

  }

  void draw(){

    if(dead==true) return;

    ellipse(x,y,50,50);

    if(dist(mouseX,mouseY,x,y)<50){

      dead=true;

    }

    x = x + vx;

    y = y + vy;

    vy += 0.98;///重力加速度在這裡

    if(y>500||y<0) vy = -vy;

    if(x>500||x<0) vy = -vy;

  }

}

Ball []balls;

void setup(){

  size(500,500);

  balls = new Ball[20];

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

    balls[i]=new Ball();

  }

}

void draw(){

  background(255);

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

    balls[i].draw();

  }

}

10.撞到小紅點就死亡(畫面變藍色)

1.沒撞到:)

2.撞到了:(

程式碼:

//發射子彈，玩家碰到子彈就結束遊戲(變成藍色的畫面)

class Ball{//發明 Ball物件

  float x, y, vx, vy;

  boolean dead;

  Ball(){//建構 同名的東西

    reborn();

  }

  void reborn(){

    x = random(500);

    y = random(500);

    vy = random(-2,2);

    vx = random(-2,2);

    dead = false;//沒有死掉

  }

  void draw(){

    if(dead==true) return;

    fill(255,0,0); ellipse(x,y, 5,5);

    if( dist(mouseX,mouseY,x,y)<5 ){

      dead=true;

      gameOver=true;

    }

    x = x + vx*1;//速度*時間=距離

    y = y + vy*1;

    if(y>500 || y<0) reborn();

    if(x>500 || x<0) reborn();

  }

}

Ball [] balls;

void setup(){

  size(500,500);

  balls = new Ball[99];

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

    balls[i] = new Ball();

  }

}

boolean gameOver=false;

void draw(){

  background(0);

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

    balls[i].draw();

  }

  if(gameOver) background(100,180,180);//變色

}

橘貓(互動技術筆記_week06)

Processing-文字.字型.字串

本日程式碼重點:

基本文字:

    textSize();///調整文字大小

    text("文字",X,Y);///("文字內容"與，位置)

    myFont=createFont("標楷體",100);//字型名稱與大小

    textFont(myFont);//更改字型(標楷體)

計時:

    text("Time:"+frameCount,50,100);//每秒60個影格,過了幾個影格

    hour()//小時

    minute()//分鐘

    millis()//以千分之一秒所以計算的秒數

    second()//秒

一.互動時鐘製作步驟
二.倒數計時

一.互動時鐘製作步驟

1.先寫出會有顏色的字

程式碼:

size(600,600);

fill(180,70,70);

textSize(80);

text("Hello World",50,50);

2.稍微修改，調整字的位置

程式碼:

void setup(){

  size(600,600);

  fill(180,70,70);

  textSize(80); 

}

void draw(){

  text("Hello World",50,100);

}

3.計時器

程式碼:

void setup(){

  size(600,600);

  fill(120,70,180);

  textSize(80);

}

void draw(){

  background(255);

   text("Time:"+frameCount,50,100);

}//每秒60個影格,過了幾個影格

4.更精準的時鐘

程式碼:

void setup(){

  size(600,600);

  fill(120,70,180);

  textSize(80);}

void draw(){

  background(255);//白色

   text("Time:"+frameCount/60,50,100);

   text("millis()"+millis(),50,200);

}//每秒60個影格,過了幾個影格

5.修改，把每秒除以1000就會顯示乾淨的秒數

程式碼:

void setup(){

  size(600,600);

  fill(120,70,180);

  textSize(80);}

void draw(){

  background(255);//白色

   text("Time:"+frameCount/60,50,100);

   text("millis()"+millis()/1000,50,200);}

6.寫出時鐘

程式碼:

void setup(){

  size(500,500);

   fill(120,70,180);

  textSize(80);}

void draw(){

  background(255);//白

  text(hour()+":"+minute()+":"+second(),50,100);

  text("Mills:"+millis()/1000,50,200);}

7.處理中文無法顯示的問題

先使用println(PFont.list());列出電腦內的字體

8.顯示中文

程式碼:

PFont myFont;//宣告變數myFont

void setup(){

  size(500,500);

  myFont=createFont("標楷體",100);//字型名稱與大小

  textFont(myFont);//更改字型為標楷體

  text("嗨!",100,100);}

9.透過按壓滑鼠左鍵切換字形

壓滑鼠

放開滑鼠

程式碼:

PFont font1,font2;//宣告字形

void setup(){

  size(500,500);

  font1 = createFont("標楷體",100);

  textFont(font1);

  font2 = createFont("微軟正黑體 Bold",100);}

void draw(){

  background(0);

  text("|嗨!/",100,100);

  if(mousePressed) textFont(font2);

  else textFont(font1);}

二.倒數計時

1.

\倒數下課/

程式碼:

PFont font1;///宣告字體

void setup(){

  size(600,600);

  font1=createFont("微軟正黑體",100);

  textFont(font1);

  fill(120,70,180);

  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 = 16*60*60+40*60+0;

  int remain=next-now;

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

2.用圖片倒數計時

程式碼:

PImage [] img = new PImage[10];//0~9

PFont font;

void setup(){

  //size(224*5,225*2);

  size(  1120, 450  );   ///把全部的圖,都秀出來

  for(int i=0; i<10; i++) img[i]=loadImage(i+".png");

  fill(255);

  font = createFont("標楷體",80);

  textFont(font);

}

void draw(){

  background(#075BB2);

  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 = 16   *60*60 + 40      *60 + 0;///總秒數

  int remain = next-now;    ///剩下的時間 (秒數來算)

  if(remain<0) remain += 24*60*60;

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

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

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

  ss = nf(remain%60, 2);

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

  int x=800;

  while(remain>0){

    int n = remain%10;

    remain = remain / 10;

    image( img[n], x,100,100,100);

    x-=100;

  }

}

橘貓(互動技術筆記_week05)

WEEK05(影像處理) 

1.video loop

import processing.video.*;
Movie movie;
void setup(){
  size(640,480);
  movie=new Movie(this,"launch2.mp4");
  movie.loop();
}
void draw(){
  image(movie,0,0);
}
void movieEvent(Movie m){
  m.read();
}

2.視訊鏡頭

import processing.video.*;

Capture cam;

void setup(){

  size(640,480);

  cam=new Capture(this,640,480);

  cam.start();

}

void draw(){

  if(cam.available()){

    cam.read();

  }

  image(cam,0,0);

}

3.儲存影像

void draw()
{
  if(cam.available())
  {
    cam.read();
  }
  image(cam, 0,0);
  saveFrame();
}

4.循環播放

void draw()

{

  if(movie.available())

  {

    movie.read();

  }

  image(movie,0,0);

}

5.Pixel

void setup()

{

  size(640,480);

  background(255,0,0);

}

void draw()

{

  println(frameCount); //算影格數

}

void mousePressed()//滑鼠點擊時

{

  loadPixels();

  for(int i=0;i<640*480;i++)//填滿整個畫布的影格

  {

    pixels[i]=color(0,255,0);//改成綠色

    

  }

  updatePixels();

  saveFrame();

}

6.改色

color[] c= {#F0F4F7,#FBEA38,#F1C936,#EE963C,#121121};

int now=0;

void setup()

{

  size(640,480);

  background(#F0F4F7);

}

void draw()

{

}

void mousePressed()

{

  background(c[now]);

  now=(now+1)%5;

}

7.影片改色

import processing.video.*;
Movie movie;
color[] c= {#F0F4F7,#FBEA38,#F1C936,#EE963C,#121121};
int now=0;
void setup()
{
  size(640,480);
  background(#F0F4F7);
  movie=new Movie(this,"my_cam.mov");
  movie.play();
}
void draw()
{
  if(movie.available())
  {
    movie.read();
    image(movie,0,0);
  }
}
void mousePressed()
{
  movie.pause();
  loadPixels();
  for(int i=0;i<640*480;i++)
  {
    float bright= brightness(pixels[i]);
    int now=4-int(bright/67);
    pixels[i]=c[now];
  }
  updatePixels();
}