2023互動技術: WW-Week04

第一節課

第一個小程式week04_1_uno_for_for_rect

UNO 是個非常有趣的遊戲，我們來做看看

STEP 1.先印出全部的牌

void setup(){
  size(400,400);
}
int[][]card = new int[8][11];//印出8*11的格子

void draw(){
  background(255);
  for(int i=0; i<8; i++){
    for(int j=0; j<11; j++){
      rect(j*32,i*50,32,50);
    }
  }
}

第二個小程式week04_2_uno_color_red_blue_green_yellow

STEP 2.分出四個卡牌的顏色

void setup(){
  size(400,400);
}
int[][]card = new int[8][11];
color [] C = { #FF5555, #FFAA00, #55AA55, #5555FF};
void draw(){
  background(255);
  for(int i=0; i<8; i++){
    for(int j=0; j<11; j++){
      fill(C[i%4]);///取4餘數//一排上一種
      rect( j*32, i*50, 32, 50);
    }
  }
}

第三個小程式week04_3_uno_better_card_func

STEP 3.要讓卡片更漂亮，加上卡的邊框和圓弧角

void setup(){
  size(400,400);
}
int[][]card = new int[8][11];
color [] C = { #FF5555, #FFAA00, #55AA55, #5555FF};
void draw(){
  background(255);
  for(int i=0; i<8; i++){
    for(int j=0; j<11; j++){
      drawCard( j*32, i*50, C[i%4]);
    }
  }
}
void drawCard(int x,int y,color c){
  stroke(128);//灰色的線
  fill(255);//白背景
  rect( x, y, 32, 50, 7);///7代表的是卡的圓弧邊
  noStroke()//不要畫線
  fill(c);//上色
  rect( x+3, y+3, 32-5, 50-5, 4);//離邊框有點距離，留白
}

第四個小程式week04__4_uno_ellipse_translate_rotate

STEP 4.想畫出中間的斜白色橢圓，用移動旋轉放大縮小

void setup(){
  size(400,400);
}
int[][]card = new int[8][11];
color [] C = { #FF5555, #FFAA00, #55AA55, #5555FF};
void draw(){
  background(255);
  for(int i=0; i<8; i++){
    for(int j=0; j<11; j++){
      drawCard( j*32, i*50, C[i%4]);
    }
  }
}
void drawCard(int x,int y,color c){
  stroke(128);
  fill(255);
  rect( x, y, 32, 50, 7);
  noStroke();
  fill(c);
  rect( x+3, y+3, 32-5, 50-5,4);
  
  pushMatrix();
  fill(255);///顏色白色
  translate(x+16,y+25);//STEP 3.移動
  rotate(radians(45));///STEP 2.轉45度
  ellipse(0,0,20,30);///STEP 1.畫橢圓
  popMatrix();
}

第二節課

第五個小程式week04_5_

STEP 5.印出數字，先畫左上角，和正中間的字，字的大小，字的對齊位置改變

void setup(){
  size(400,400);
}
int[][]card = new int[8][11];
color [] C = { #FF5555, #FFAA00, #55AA55, #5555FF};
void draw(){
  background(255);
  for(int i=0; i<8; i++){
    for(int j=0; j<11; j++){
      drawCard( j*32, i*50, C[i%4]);
    }
  }
}
void drawCard(int x,int y,color c){
  stroke(128);
  fill(255);
  rect( x, y, 32, 50, 7);
  noStroke();
  fill(c);
  rect( x+3, y+3, 32-5, 50-5,4);

  pushMatrix();
  fill(255);
  translate(x+16,y+25);//移動
  rotate(radians(45));///轉45度
  ellipse(0,0,20,30);///STEP 1畫橢圓
  popMatrix();
  
  textAlign(CENTER,CENTER);//將對齊點移到字的正中間
  textSize(9);
  text( "1", x+7, y+8);///畫左上角的字//文字的中心點對齊點在左下角
  
  textSize(20);//畫中間字
  fill(c);//設定中間字的顏色
  text( "1", x+16, y+25);
}

STEP 6.讓數字會改變，第一步多設一個n，代表現在的數字

....

void draw(){
  background(255);
  for(int i=0; i<8; i++){
    for(int j=0; j<11; j++){
      drawCard( j*32, i*50, C[i%4],j);
    }
  }
}

...

void drawCard(int x,int y,color c,int n){

...
  textAlign(CENTER,CENTER);//將對齊點移到字的正中間
  textSize(9);
  text( ""+n, x+7, y+8);///畫左上角的字//文字的中心點對齊點在左下角
  
  textSize(20);//畫中間字
  fill(c);//設定中間字的顏色
  text( ""+n, x+16, y+25);
  ...

第六個小程式week04_6_uno_suffle_wash_card

STEP 7.洗牌，設定兩個存放卡片的是數字和顏色的陣列，用一個函數負責顏色和數字

void setup(){
  size(400,400);
  myShuffle();
}
void myShuffle(){
  for(int i=0; i<8; i++){
    for(int j=0; j<11; j++){
      cardN[i*11+j] = j;
      cardC[i*11+j] = C[i%4];
    }
  }
}
//int[][]card = new int[8][11];
int [] cardN = new int[88];///存放卡片的數字n
int [] cardC = new int[88];///存放卡片的顏色
color [] C = { #FF5555, #FFAA00, #55AA55, #5555FF};
void draw(){
  background(255);
  for(int i=0; i<8; i++){
    for(int j=0; j<11; j++){
      //drawCard( j*32, i*50, C[i%4],j);
      drawCard( j*32, i*50, cardC[i*11+j],cardN[i*11+j]);
    }
  }
}
void drawCard(int x,int y,color c,int n){
  stroke(128);
  fill(255);
  rect( x, y, 32, 50, 7);
  noStroke();
  fill(c);
  rect( x+3, y+3, 32-5, 50-5,4);
  
  pushMatrix();
  fill(255);
  translate(x+16,y+25);//移動
  rotate(radians(45));///轉45度
  ellipse(0,0,20,30);///STEP 1畫橢圓
  popMatrix();
  
  textAlign(CENTER,CENTER);//將對齊點移到字的正中間
  textSize(9);
  text( ""+n, x+7, y+8);///畫左上角的字//文字的中心點對齊點在左下角
  
  textSize(20);//畫中間字
  fill(c);//設定中間字的顏色
  text( ""+n, x+16, y+25);
}

STEP 8.洗牌，兩張牌交換

...
void myShuffle(){
  for(int i=0; i<8; i++){
    for(int j=0; j<11; j++){
      cardN[i*11+j] = j;
      cardC[i*11+j] = C[i%4];
    }
  }
  int a =int (random(88)),b= int(random(88));
  int temp = cardN[a];
  cardN[a] = cardN[b];
  cardN[b] = temp;
  temp = cardC[a];
  cardC[a] = cardC[b];
  cardC[b] = temp;///兩張牌交換
}
...

第七個小程式week04_7_uno_ellipse_many_time

STEP 9.用迴圈洗乾淨，洗1000次

...

void myShuffle(){
  for(int i=0; i<8; i++){
    for(int j=0; j<11; j++){
      cardN[i*11+j] = j;
      cardC[i*11+j] = C[i%4];
    }
  }
  for(int i=0;i<1000;i++){
    int a =int (random(88)),b= int(random(88));
    int temp = cardN[a];
    cardN[a] = cardN[b];
    cardN[b] = temp;
    temp = cardC[a];
    cardC[a] = cardC[b];
    cardC[b] = temp;
  }
}
...

第八個小程式week04_8_uno_big_card_interaction

STEP 10.想要滑鼠點到一張大牌就顯示在旁邊，放大視窗，印出大牌在右邊

...
int [] cardN = new int[88];///存放卡片的數字n
int [] cardC = new int[88];///存放卡片的顏色
color [] C = { #FF5555, #FFAA00, #55AA55, #5555FF};
void draw(){
  background(255);
  for(int i=0; i<8; i++){
    for(int j=0; j<11; j++){
      drawCard( j*32, i*50, cardC[i*11+j],cardN[i*11+j], 32);///
    }
  }
  drawCard(450,50, cardC[7], cardN[77], 128);////
}
void drawCard(int x,int y,color c,int n,int w){///W畫大張的卡
  float s=w/32.0;///縮放倍率scale////所有有數字的都乘上這個倍率
  stroke(128);
  fill(255);
  rect( x, y, 32*s, 50*s, 7*s);
  noStroke();
  fill(c);
  rect( x+2.5*s, y+2.5*s, 32*s-5*s, 50*s-5*s,5*s);
  
  pushMatrix();
  fill(255);
  translate(x+16*s,y+25*s);//移動
  rotate(radians(45));///轉45度
  ellipse(0,0,20*s,30*s);///STEP 1畫橢圓
  popMatrix();
  
  textAlign(CENTER,CENTER);//將對齊點移到字的正中間
  textSize(9*s);
  text( ""+n, x+7*s, y+8*s);///畫左上角的字//文字的中心點對齊點在左下角
  
  textSize(20*s);//畫中間字
  fill(c);//設定中間字的顏色
  text( ""+n, x+16*s, y+25*s);
}
第九個小程式week04_9_uno_pool_get_card
STEP 11.發牌加入互動，按左鍵可以發牌到右邊，按右鍵可以偷看左邊的牌
...
void draw(){
 background(255);
 if(mousePressed && mouseButton == RIGHT){///按右鍵時作弊看牌
    for(int i=0; i<8; i++){
      for(int j=0; j<11; j++){
      drawCard( j*32, i*50, cardC[i*11+j],cardN[i*11+j], 32);
      }
    }
  }else drawCard( 50, 50, #000000, 99, 128);///get card here
  for(int i=0; i<myCard; i++){
    drawCard(430+40*i,50, cardC[i], cardN[i], 128);
  }
}
int myCard=0;
void mousePressed(){//////按左鍵時，發牌
  if(mouseButton==LEFT)myCard++;
}
...
第A個小程式week04_A_uno_pool_spread_4_people
STEP 12.發給四個人void setup(){
  size(800,800);
  myShuffle();
}
void myShuffle(){
  for(int i=0; i<8; i++){
    for(int j=0; j<11; j++){
      cardN[i*11+j] = j;
      cardC[i*11+j] = C[i%4];
    }
  }
  for(int i=0;i<1000;i++){
    int a =int (random(88)),b= int(random(88));
    int temp = cardN[a];
    cardN[a] = cardN[b];
    cardN[b] = temp;
    temp = cardC[a];
    cardC[a] = cardC[b];
    cardC[b] = temp;
  }
}
int [] cardN = new int[88];///存放卡片的數字n
int [] cardC = new int[88];///存放卡片的顏色
color [] C = { #FF5555, #FFAA00, #55AA55, #5555FF};
void draw(){
  background(255);
  if(mousePressed && mouseButton == RIGHT){///按右鍵
    for(int i=0; i<8; i++){
      for(int j=0; j<11; j++){
      drawCard( j*32, i*50, cardC[i*11+j],cardN[i*11+j], 32);
      }
    }
  }else drawCard( 50, 50, #000000, 99, 128);///get card here
  for(int i=0; i<myCard; i++){
    if(i%4==0)drawCard(430     +40*i/4,50, cardC[i], cardN[i], 128);
    if(i%4==1)drawCard(630-40  +40*i/4,350, cardC[i], cardN[i], 128);
    if(i%4==2)drawCard(430-80  +40*i/4,650, cardC[i], cardN[i], 128);
    if(i%4==3)drawCard(230-120 +40*i/4,350, cardC[i], cardN[i], 128);
  }
}
int myCard=0;
void mousePressed(){///按左鍵
  if(mouseButton==LEFT)myCard++;
}
void drawCard(int x,int y,color c,int n,int w){
  float s=w/32.0;///縮放倍率scale
  stroke(128);
  fill(255);
  rect( x, y, 32*s, 50*s, 7*s);
  noStroke();
  fill(c);
  rect( x+2.5*s, y+2.5*s, 32*s-5*s, 50*s-5*s,5*s);
  
  pushMatrix();
  fill(255);
  translate(x+16*s,y+25*s);//移動
  rotate(radians(45));///轉45度
  ellipse(0,0,20*s,30*s);///STEP 1畫橢圓
  popMatrix();
  
  textAlign(CENTER,CENTER);//將對齊點移到字的正中間
  textSize(9*s);
  text( ""+n, x+7*s, y+8*s);///畫左上角的字//文字的中心點對齊點在左下角
  
  textSize(20*s);//畫中間字
  fill(c);//設定中間字的顏色
  text( ""+n, x+16*s, y+25*s);
}

2023互動技術

2023年10月5日星期四

WW-Week04_UNO

沒有留言:

張貼留言

2023年10月5日 星期四

WW-Week04_UNO

沒有留言:

張貼留言

2023年10月5日星期四