week06忘記帳號

今天我們要做一個計時器 !

Step:1-1 寫出一個可以呈現每秒有多少影格的程式碼

程式碼如下:

void setup()

{

  size(600,6-00);

  fill(255,0,0);

  textSize(60);

}

void draw()

{

  background(255);

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

}

Step:1-2 讀秒數

程式碼如下:

void setup()

{

  size(600,600);

  fill(255,0,0);

  textSize(60);

}

void draw()

{

  background(255);

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

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

}

Step1-3 做出一個時間

程式碼如下:

void setup()

{

  size(600,600);

  fill(255,0,0);

  textSize(60);

}

void draw()

{

  background(255);

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

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

}

問題一:當我在Processing 裡頭輸入中文，會顯示亂碼，Processing無法讀取中文字元。

Step2-1:輸入中文字體

程式碼如下:

PFont myFont;

void setup()

{

  size(600,600);

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

  textFont(myFont);  

  text("中文",100,100);

}

Step2-2:滑鼠游標點及黑色視窗的任意一個點時，切換字體!

程式碼如下:

PFont font1,font2;

void setup()

{

  size(600,600);

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

  textFont(font1);  

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

}

void draw(){

  background(0);

  text("中文",100,100);

  if(mousePressed)textFont(font2);

  else textFont(font1);

}

Step3-1 時鐘(待完成品)

程式碼如下:

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

}

Step 3-2:顯示目前時間、下課時間和距離下課的時間

程式碼如下:

void setup(){

  size(600,600);

  fill(0,20,150);

  textSize(80);

}

void draw(){

  background(#30989B);

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

}

Step3-3:倒數計時器

程式碼如下:

void setup(){

  size(600,600);

  fill(0,20,150);

  textSize(80);

}

void draw(){

  background(#30989B);

  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%60,2);

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

}

Step:4-1 讀取數字圖片，我們要把計時器的數字變成我們找到的數字圖片。

程式碼如下:

PImage[]img= new PImage[10];

void setup(){

  size(1120,450);

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

}

void draw(){

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

    int x=(i%5)*224,y=int(i/5)*225;

    image(img[i],x,y);

  }

}

    

Step5 計時器大功告成

程式碼如下:

//Q: 能不能改用漂亮的圖片, 來顯示數字

//(1) 在 images.google.com 找到10張圖 0...9

//    ex. IconsPng Golden Number 1 Icons PNG

//(2) 存在我們的專案目錄,檔名: 0.png ~ 9.png

//   使用陣列讀進來

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;

  }

}