( σ՞ਊ ՞)σ的互動技術筆記 week04

QQ忘記截圖了

step1-1

做一條延伸的線(無限延伸)

void setup()

{

  size(500,500);

}

int x=250, y=250;

void draw()

{

  ellipse(x, y, 10, 10);

  x = x + 1;

  y = y - 1;

}

step1-2

(那條線碰到牆壁會反彈)

void setup()

{

  size(500,500);

}

float x=250, y=250;

float vx=1.0, vy = -0.5;

void draw()

{

  ellipse(x ,y, 10, 10);

  x = x+vx;

  y = y+vy;

  if( x > 500 ) vx = -vx;

  if( y < 0 ) vy = -vy;

}

step1-3

做出小遊戲(底下有一個方塊，球球掉下來要接住)

void setup()

{

  size(500,500);

}

float x=250, y=250;

float vx=1.0, vy = -0.5;

void draw()

{

  background(#FFFFF2);

  int boardX = mouseX;

  rect(boardX, 470, 100, 20);

  ellipse(x ,y, 10, 10);

  x = x+vx;

  y = y+vy;

  if( x > 500 ) vx = -vx;

  if( y < 0 ) vy = -vy;

  if( x < 0 ) vx = -vx;

  if( y>470 && x>boardX && x<boardX+200 ) vy = -vy;

}

step1-4

是否有不夠長或是太長得困擾

void setup()

{

  size(500,500);

}

float x=250, y=250; //變數(位置)

float vx=2.0, vy = -2.5;

float boardX, boardY=470, boardW=100, boardH=20;

void draw()

{

  boardX = mouseX-boardW/2;

  background(#FFFFF2);

  rect(boardX, boardY, boardW, boardH); //控制的板子

  ellipse(x ,y, 10, 10); //橢圓

  x = x + vx;

  y = y + vy;

  if( x > 500 ) vx = -vx;

  if( y < 0 ) vy = -vy;

  if( x < 0 ) vx = -vx;

  if( (y>boardY && y<boardY + boardH ) &&

      (x>boardX && x<boardX + boardW ) ){

    vy = -vy;  

    vx += (mouseX-pmouseX)/2; 

  }

  if(mousePressed && mouseButton==LEFT) boardW *=1.01; //不夠長按左鍵

  if(mousePressed && mouseButton==RIGHT) boardW *=0.99; //太長按右鍵

}

圍棋

step2-1

棋盤

void setup()

{

  size(500,500);

}

void draw()

{

  for(int x=50;x<=450;x+=50){

    for(int y=50;y<=450;y+=50){

      ellipse(x, y, 50, 50);

    }

  }

}

step2-2

加上棋子(黑白棋)

void setup(){

  size(500,500);

}

int [][] go={

  {0,0,0,0,0,0,0,0,0},

  {0,1,1,1,0,1,1,1,0},

  {0,1,1,1,0,1,1,1,0},

  {0,1,1,1,0,1,1,1,0},

  {0,0,0,0,0,0,0,0,0},

  {0,1,0,0,0,0,0,1,0},

  {0,1,0,0,0,0,0,1,0},

  {0,1,1,1,1,1,1,1,0},

  {0,0,0,0,0,0,0,0,0}

};

void draw(){

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

    for(int j=0; j<9; j++){

      if( go[i][j]==1) fill(0);

      else fill(255);

      ellipse(50+j*50, 50+i*50, 50, 50);

    }

  }

}

step2-3

加上棋盤顏色

void setup(){

  size(500,500);

}

int [][] go={

  {0,0,0,0,0,0,0,0,0},

  {0,1,1,1,0,1,1,1,0},

  {0,1,1,1,0,1,1,1,0},

  {0,1,1,1,0,1,1,1,0},

  {0,0,0,0,0,0,0,0,0},

  {0,1,0,0,0,0,0,1,0},

  {0,1,0,0,0,0,0,1,0},

  {0,1,1,1,1,1,1,1,0},

  {0,0,0,0,0,0,0,0,0}

}; //陣列9x9

void draw(){ // 迴圈

  background(246, 194, 108); //木頭色

  for(int i=1; i<=9; i++){//迴圈(畫很多線)

    line(50, 50*i, 450, 50*i); //拼湊出來的

    line(50*i, 50, 50*i, 450); //拼湊出來的

  }

  for(int i=0; i<9; i++){ //左手i 對應y座標

    for(int j=0; j<9; j++){ //右手j 對應x座標

      if( go[i][j]==1){

        fill(0); //1:黑棋

        ellipse(50+j*50, 50+i*50, 40, 40);

        }else if( go[i][j]==2){

          fill(255); //2:白棋

          ellipse(50+j*50, 50+i*50, 40, 40);

        }

    }

  }

}

step2-4

點擊滑鼠可以產生黑白棋

void setup(){

  size(500,500);

}

int [][] go={

  {0,0,0,0,0,0,0,0,0},

  {0,1,1,1,0,1,1,1,0},

  {0,1,0,1,0,1,0,1,0},

  {0,1,1,1,0,1,1,1,0},

  {0,0,0,0,0,0,0,0,0},

  {0,1,0,0,0,0,0,1,0},

  {0,1,0,0,0,0,0,1,0},

  {0,1,1,1,1,1,1,1,0},

  {0,0,0,0,0,0,0,0,0}

}; //陣列9x9

int N=0;//目前有幾個棋子

void mousePressed(){

  int j = (mouseX-25)/50;//右手j, 對應x座標

  int i = (mouseY-25)/50;//左手i, 對應y座標

  go[i][j] = (N%2==0) ? 1 : 2;  ///if(N%2==0) 用1,否則2

  N++;

}

void draw(){ // 迴圈

  background(246, 194, 108); //木頭色

  for(int i=1; i<=9; i++){//迴圈(畫很多線)

    line(50, 50*i, 450, 50*i); //拼湊出來的

    line(50*i, 50, 50*i, 450); //拼湊出來的

  }

  for(int i=0; i<9; i++){ //左手i 對應y座標

    for(int j=0; j<9; j++){ //右手j 對應x座標

      if( go[i][j]==1){

        fill(0); //1:黑棋

        ellipse(50+j*50, 50+i*50, 40, 40);

        }else if( go[i][j]==2){

          fill(255); //2:白棋

          ellipse(50+j*50, 50+i*50, 40, 40);

        }

    }

  }

}