2021年10月25日 星期一

互動概論week04

 1.畫出棋盤的直線











2.用陣列畫出直線










3.用陣列完成棋盤










4.用陣列畫格子










5.用陣列畫出棋子










6.用滑鼠畫出棋子











7.調整棋子，變得準確











8.畫出黑棋和白棋











9.畫出一個圓











10.多重圓圈












11.用滑鼠變色多重圓圈











於 沒有留言:
標籤： ,

岩壁悲歌 Week04

 2021/10/25 陣列、迴圈運用

-----------------------------------------------------------------------------------

想要劃出9條線就要打9行line，這樣太過於操勞，於是運用迴圈

如下圖:

再加上橫線

先練習陣列運用

有個上面的觀念之後，把陣列中帶有1的白棋帶入棋盤中

多新增了mousePressed這5行，目的是為了無條件捨去，假如X,Y的

位置在(5.99 , 5.99)白棋最後的位置會在在(5,5)的位置

若將-50改成-25，可直接達成四捨五入的效果

接著用滑鼠的左、右、中鍵，分別代表白、黑、無棋子

int [][]go={

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

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

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

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

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

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

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

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

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

void setup(){

  size(500,500);

}

void draw(){

  background(253,236,180);

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

    line(50+50*i,50,50+50*i,450);

    line(50,50+50*i,450,50+50*i);

  }

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

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

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

        int x=50+50*j, y=50+50*i;

        fill(255); ellipse(x,y,40,40);

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

        int x=50+50*j, y=50+50*i;

        fill(0); ellipse(x,y,40,40);

      }

    }

  }

}

void mousePressed(){

  int j =(mouseX-25)/50;

  int i =(mouseY-25)/50;

  if(mouseButton==LEFT) go[i][j]=1;

  if(mouseButton==RIGHT) go[i][j]=2;

  if(mouseButton==CENTER) go[i][j]=0;

}

---------------------------------------------------------

藉由有變化的數值，畫出不同大小跟顏色的圈圈

/*void setup(){

  size(500,500);

}

void draw(){

  background(255);

  noFill();

  stroke(mouseX,mouseY,255);

  for(float a=0;a<360;a+=1){

    float x=250+mouseX*cos(radians(a));

    float y=250+mouseY*sin(radians(a));

    ellipse(x,y,mouseY,mouseY);

  }

}*/

void setup(){

  size(500,500);

}

float w=30;

float r=0,g=255,b=0;

void draw(){

  stroke(r,g,b); noFill();

  r+=random(3); if(r>255)r=0;

  g+=random(3); if(g>255)g=0;

  b+=random(3); if(b>255)b=0;

  ellipse(mouseX,mouseY,w,w);

  

  w+=0.5;

  if(w>100) w=30;

}

於 沒有留言:
標籤： ,

天文社社員招募中week05

  


陣列及迴圈


1.開始畫線(直線)









程式如下:

void setup()
{
  size(500,500);
}
void draw(){
  background(253,236,180);
  line(50,50,50,450);
  line(100,50,100,450);
  line(150,50,150,450);
  line(200,50,200,450);
}


2.用for迴圈畫線(直線)








程式如下:

void setup()
{
  size(500,500);
}
void draw(){
  background(253,236,180);
  for(int i=0;i<9;i++)
  {
    line(50+50*i,50,50+50*i,450);
  }
}



3.用for迴圈畫線(橫線)










程式如下:

void setup()
{
  size(500,500);
}
void draw(){
  background(253,236,180);
  for(int i=0;i<9;i++)
  {
    line(50+50*i,50,50+50*i,450);
    line(50,50+50*i,450,50+50*i);
  }
}





4.用陣列畫棋子






程式如下:


//有兩種寫法
//int [][]go=new int [9][9];  第一種
int [][]go={
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},};   //第二種
void setup()
{
  size(500,500);
}
void draw(){
  background(253,236,180);
  for(int i=0;i<9;i++)
  {
    line(50+50*i,50,50+50*i,450);
    line(50,50+50*i,450,50+50*i);
  }
}




5.用陣列畫出紅色方格(練習)




程式如下:


int [][]c={
  {1,0,0},
  {1,0,0},
  {1,0,0}};
void setup()
{
  size(300,300);
}
void draw(){
  for(int i=0;i<3;i++)
  {
    for(int j=0;j<3;j++)
    {
      if(c[i][j]==0)fill(128);  //j是x方向，i是y方向
      else fill(255,0,0);
      rect(j*100,i*100,100,100);
    }
  }
}


6.用陣列畫出圓





程式如下:


int [][]go={
  {1,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,1,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,1,0,0,0,0,0,0,0},};
void setup(){
  size(500,500);
}
void draw(){
  background(253,236,180);
  for(int i=0;i<9;i++){
    line(50+50*i,50,50+50*i,450);
    line(50,50+50*i,450,50+50*i);
  }
  for(int i=0;i<9;i++){
    for(int j=0;j<9;j++){
      if(go[i][j]==1){
        int x=50+50*j,y=50+50*i;
        fill(255);ellipse(x,y,40,40);
      }
      
    }
  }
}


7.用陣列畫棋子part 3 - 用滑鼠畫圓


x,y 與 i,j利用移項變號
❗ 小心,無條件捨去 ❗







程式如下:


int [][]go={
  {1,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,1,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,1,0,0,0,0,0,0,0},};
void setup(){
  size(500,500);
}
void draw(){
  background(253,236,180);
  for(int i=0;i<9;i++){
    line(50+50*i,50,50+50*i,450);
    line(50,50+50*i,450,50+50*i);
  }
  for(int i=0;i<9;i++){
    for(int j=0;j<9;j++){
      if(go[i][j]==1){
        int x=50+50*j,y=50+50*i;
        fill(255);ellipse(x,y,40,40);
      }
    }
  }
}
void mousePressed(){
  int j=(mouseX-50)/50; 
  int i=(mouseY-50)/50; 
  go[i][j]=1;
}
  



8.讓他變準確





程式如下:


int [][]go={
  {1,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,1,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,1,0,0,0,0,0,0,0},};
void setup(){
  size(500,500);
}
void draw(){
  background(253,236,180);
  for(int i=0;i<9;i++){
    line(50+50*i,50,50+50*i,450);
    line(50,50+50*i,450,50+50*i);
  }
  for(int i=0;i<9;i++){
    for(int j=0;j<9;j++){
      if(go[i][j]==1){
        int x=50+50*j,y=50+50*i;
        fill(255);ellipse(x,y,40,40);
      }
    }
  }
}
void mousePressed(){
  int j=(mouseX-25)/50; //升一半會變得準確
  int i=(mouseY-25)/50; 
  go[i][j]=1;
}
  


9.加入黑棋及消除棋子功能






程式如下:


int [][]go={
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},};
void setup(){
  size(500,500);
}
void draw(){
  background(253,236,180);
  for(int i=0;i<9;i++){
    line(50+50*i,50,50+50*i,450);
    line(50,50+50*i,450,50+50*i);
  }
  for(int i=0;i<9;i++){
    for(int j=0;j<9;j++){
      if(go[i][j]==1){
        int x=50+50*j,y=50+50*i;
        fill(255);ellipse(x,y,40,40);
      }else if(go[i][j]==2){
        int x=50+50*j,y=50+50*i;
        fill(0);ellipse(x,y,40,40);
      }
    }
  }
}
void mousePressed(){  //左:白棋  右:黑棋  中:消除
  int j=(mouseX-25)/50; 
  int i=(mouseY-25)/50; 
  if(mouseButton==LEFT) go[i][j]=1;
  if(mouseButton==RIGHT) go[i][j]=2;
  if(mouseButton==CENTER) go[i][j]=0;
  
}



完成!!!



10.畫個藝術圓









程式如下:


void setup(){
  size(500,500);
}
void draw(){
  for(float a=0;a<360;a++)
  {
    float x=250+250*cos(radians(a));  //用三角函數
    float y=250+250*sin(radians(a));
    ellipse(x,y,4,4);
  }
}


11.看看別人的作品


https://openprocessing.org/


這是Che-Yu Wu的主頁



有些作品甚至會互動





12.改變數讓他利用滑鼠變形狀






程式如下:


void setup(){
  size(500,500);
}
void draw(){
  background(125);
  for(float a=0;a<360;a+=1)
  {
    float x=250+mouseX*cos(radians(a));
    float y=250+mouseY*sin(radians(a));
    ellipse(x,y,mouseX,mouseY);
  }
}


13.滑鼠移動顏色跟著改變








程式如下:

void setup(){
  size(500,500);
}
void draw(){
  background(255);
  noFill();
  stroke(mouseX,mouseY,255);
  for(float a=0;a<360;a+=1)
  {
    float x=250+mouseX*cos(radians(a));
    float y=250+mouseY*sin(radians(a));
    ellipse(x,y,mouseX,mouseY);
  }
}

14.圓可以放大縮小，顏色隨機








程式如下:


void setup(){
  size(500,500);
}
float w=30;
float r=0,g=255,b=0;
void draw(){
  stroke(r,g,b); noFill();
  r+=random(3);if(r>255)r=0;  //顏色到255變回0
  g+=random(3);if(g>255)g=0;
  b+=random(3);if(b>255)b=0;
  ellipse(mouseX,mouseY,w,w);
  
  w+=0.5;
  if(w>100) w=30;  //放大到100變回30
}


於 沒有留言:
標籤： ,

08160741_week04_棋盤

 1.棋盤

void setup()

{

  size(500,500);

}

void draw()

{

  background(253,236,180);

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

  {

    line(50+50*i,50,50+50*i,450);

    line(50,50+50*i,450,50+50*i);

  }

}

2.棋子
int [][]go = {
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{1,1,0,0,0,0,0,0,0},
};
void setup()
{
  size(500,500);
}
void draw()
{
  background(253,236,180);
  for(int i = 0;i < 9;i++)
  {
    line(50+50*i,50,50+50*i,450);
    line(50,50+50*i,450,50+50*i);
  }
  for(int i = 0;i < 9;i++)
  {
    for(int j = 0;j < 9;j++)
    {
      if(go[i][j] == 1)
      {
        int x = 50+50*j,y = 50+50*i;
        fill(255);
        ellipse(x,y,40,40); 
      }
    }
  }
}

3.滑鼠點擊下棋


int [][]go = {
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0},
{1,1,0,0,0,0,0,0,0},
};
void setup()
{
  size(500,500);
}
void draw()
{
  background(253,236,180);
  for(int i = 0;i < 9;i++)
  {
    line(50+50*i,50,50+50*i,450);
    line(50,50+50*i,450,50+50*i);
  }
  for(int i = 0;i < 9;i++)
  {
    for(int j = 0;j < 9;j++)
    {
      if(go[i][j] == 1)
      {
        int x = 50+50*j,y = 50+50*i;
        fill(255);
        ellipse(x,y,40,40); 
      }
      else if(go[i][j] == 2)
      {
        int x = 50+50*j,y = 50+50*i;
        fill(0);
        ellipse(x,y,40,40); 
      }
    }
  }
}

void mousePressed()
{
  int j = (mouseX -25)/50;
  int i = (mouseY -25)/50;
  if(mouseButton == LEFT) go[i][j] = 1;
  if(mouseButton == RIGHT) go[i][j] = 2;
  if(mouseButton == CENTER) go[i][j] = 0;
  
}

4.奇怪的東東


void setup()

{

  size(500,500);

}


void draw()

{

  background(255);

  noFill();

  for(float a = 0;a < 360;a++)

  {

    float x = 250+mouseX*cos(radians(a));

    float y = 250+mouseY*sin(radians(a));

    ellipse(x,y,mouseX,mouseY);

  }

}

於 沒有留言:
標籤： ,

week04

 

nt[][]c = {
 {0,0,0},
 {0,0,0},
 {0,0,0} };
 void setup(){
   size(300,300);
 }
 void draw(){
   for(int i=0;i<3;i++){
     for(int j=0;j<3;j++){
       if(c[i][j]==0)fill(128);////填滿灰色
       else fill(255,0,0);////填滿紅色
       rect(j*100,i*100,100,100);
     }    //j是x方向,i是y方向
   }
 }
int [][] c={
     {1,0,0}
     {1,0,0},
     {0,0,0} };
 void setup(){
   size(300,300);
 }
 void draw(){
   for(int i=0;i<3;i++){
     for(int j=0;j<3;j++){
       if(c[i][j]==0)fill(128);
       else fill(255,0,0);
       rect(j*100,i*100,100,100);
     }    //j是x方向,i是y方向
   }    //rect(i*100,j*100,100,100);交換話就會怪怪的 方向不一樣
 }
}

畫一個棋盤
int [][]go = {
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0} };
void setup(){
  size(500,500);
}
void draw(){
  background(253,236,180);
  for(int i=0;i<9;i++){
    line(50+50*i,50,50+50*i,450);
    line(50,50+50*i,450,50+50*i);
    }
    for(int i=0;i<9;i++){
      for(int j=0;j<9;j++){
        if(go[i][j]==1){
          int x=50+50*j, y=50+50*i;
          fill(255); ellipse(x,y,40,40);
        }
      }
    }
  }

int [][]go = {
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,1,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},//畫出圍棋
  {1,1,0,0,0,0,0,0,0} };
void setup(){
  size(500,500);
}
void draw(){
  background(253,236,180);
  for(int i=0;i<9;i++){
    line(50+50*i,50,50+50*i,450);
    line(50,50+50*i,450,50+50*i);
    }
    for(int i=0;i<9;i++){
      for(int j=0;j<9;j++){
        if(go[i][j]==1){
          int x=50+50*j, y=50+50*i;
          fill(255); //白色 ellipse(x,y,40,40);//畫圓
        }
      }
    }
  }


點到棋盤,出現圍棋
int [][]go = {
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0} };
void setup(){
  size(500,500);
}
void draw(){
  background(253,236,180);
  for(int i=0;i<9;i++){
    line(50+50*i,50,50+50*i,450);
    line(50,50+50*i,450,50+50*i);
    }
    for(int i=0;i<9;i++){
      for(int j=0;j<9;j++){
        if(go[i][j]==1){
          int x=50+50*j, y=50+50*i;
          fill(255); ellipse(x,y,40,40);
        }
      }
    }
  }
void mousePressed(){
  int j = (mouseX-50)/50;
  int i = (mouseY-50)/50;
  go[i][j]=1;
}

*x,y與i,j利用移項變號,無條件捨去5.99=>5
*點的位置要精準,否則會偏移


int [][]go = {
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0} };
void setup(){
  size(500,500);
}
void draw(){
  background(253,236,180);
  for(int i=0;i<9;i++){
    line(50+50*i,50,50+50*i,450);
    line(50,50+50*i,450,50+50*i);
    }
    for(int i=0;i<9;i++){
      for(int j=0;j<9;j++){
        if(go[i][j]==1){
          int x=50+50*j, y=50+50*i;
          fill(255); ellipse(x,y,40,40);
        }
      }
    }
  }
void mousePressed(){
  int j = (mouseX-25)/50;
  int i = (mouseY-25)/50;///讓落點位置更加準確!!!
  go[i][j]=1;
}
int [][]go = {
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,1,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {0,0,0,0,0,0,0,0,0},
  {1,1,0,0,0,0,0,0,0} };
void setup(){
  size(500,500);
}
void draw(){
  background(253,236,180);
  for(int i=0;i<9;i++){
    line(50+50*i,50,50+50*i,450);
    line(50,50+50*i,450,50+50*i);
    }
    for(int i=0;i<9;i++){
      for(int j=0;j<9;j++){
        if(go[i][j]==1){
          int x=50+50*j, y=50+50*i;
          fill(255); ellipse(x,y,40,40);
        }else if(go[i][j]==2){                                                      
          int x=50+50*j, y=50+50*i;                               go[i][j]=1--->白棋          
          fill(0);//黑色ellipse(x,y,40,40);                         go[i][j]=2--->黑棋
        }///1:白,2:黑,0:沒有棋                                        go[i][j]=0--->消除
      }
    }
  }
void mousePressed(){
  int j = (mouseX-25)/50;
  int i = (mouseY-25)/50;
  if(mouseButton==LEFT)go[i][j]=1;///滑鼠左鍵:白棋
  if(mouseButton==RIGHT)go[i][j]=2;///滑鼠右鍵:黑棋
  if(mouseButton==CENTER)go[i][j]=0;///滑鼠中鍵:消除
}


void setup(){
  size(500,500);
}
void draw(){
  for(float a=0;a<360;a++){
    float x =250+250*cos( radians(a) );
    float y =250+250*sin( radians(a) );
    ellipse(x,y,4,4);
  }
}
*圓心頂點為(250,250)



滑鼠移動調整園的大小
void setup(){
  size(500,500);
}
void draw(){
  background(128);
  for(float a=0;a<360;a+=1){
    float x =250+mouseX*cos( radians(a) );
    float y =250+mouseY*sin( radians(a) );
    ellipse(x,y,mouseX,mouseY);
  }
}

(延續上一個實作)
void setup(){
  size(500,500);
}
void draw(){
  background(255);
  noFill();///讓源的收尾更好看
  for(float a=0;a<360;a+=1){
    float x =250+mouseX*cos( radians(a) );
    float y =250+mouseY*sin( radians(a) );
    ellipse(x,y,mouseX,mouseY);
  }
}



(延續上一個實作)
void setup(){
  size(500,500);
}
void draw(){
  background(255);
  noFill();
  stroke(mouseX,mouseY,255);//運用滑鼠移動調整顏色
  for(float a=0;a<360;a+=1){
    float x =250+mouseX*cos( radians(a) );
    float y =250+mouseY*sin( radians(a) );
    ellipse(x,y,mouseX,mouseY);
  }
}

void setup(){
  size(500,500);
}
float w=30;
float r=0,g=255,b=0;
void draw(){
  stroke(r,g,b); noFill();
  r+=random(3); if(r>255)r=0;
  g+=random(3); if(g>255)g=0;
  b+=random(3); if(b>255)b=0;
    ellipse(mouseX,mouseY,w,w);
    w+=0.5;
    if(w>100) w=30;
}






於 沒有留言:
標籤：
訂閱： 文章 (Atom)