橘貓(互動技術筆記_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;

  }

}