week11

今天上課一開始，老師示範processing的泡泡排序髮給我們看，並把程式碼傳給我們讓我們自行練習觀察。

int []a=new int[10];//Java's Array
//int []a={6,3,5,9,1,0,4,2,7,8};
//int []a={1,2,3,5,0,4,6,7,8,9};
//int []a={9,8,7,6,5,4,3,2,1,0};
void setup(){
  size(500,800);
  for(int i=0;i<10;i++){//random choose number
    a[i]=int(random(10));//亂數決定數字
  }
  textSize(36);
  textAlign(LEFT,TOP);
  showArray(y);
}
int y=0;
void showArray(int y){
  for(int i=0;i<10;i++){
    fill(255);  rect(i*50, y, 50,50);
    fill(0);         text(a[i], i*50, y);
  }
}
void draw(){

}
void mousePressed(){
  for(int i=0; i<10-1;i++){
    if(a[i] > a[i+1]){
      int temp=a[i];//泡泡排序法
      a[i]=a[i+1];
      a[i+1]=temp;
      fill(255,0,0,128); rect(i*50, y, 100,50);
    }
  }
  y+=50;
  showArray(y);
}


接著，老師教了如何用processing來秀文字，只需要運用簡單的"textAlign"和"texySize"就可以輕鬆地寫出想表達的文字，也可以調整位置和大小。




size(200,200);
rect(50,50,50,50);
textSize(40); textAlign(LEFT,TOP);
fill(#ff0000); text("A", 50,50);


接著老師又接下去講了第二種泡泡排序法，在這邊講的是數字漸層  fill(255,0,0,128)



int []a=new int[10];//Java's Array
//int []a={6,3,5,9,1,0,4,2,7,8};
//int []a={1,2,3,5,0,4,6,7,8,9};
//int []a={9,8,7,6,5,4,3,2,1,0};
void setup(){
  size(500,800);
  for(int i=0;i<10;i++){//random choose number
    a[i]=int(random(10));//亂數決定數字
  }/// Java是用 int(3.14)會轉成3, C/C++ int b=3.14變3
  textSize(32);
  textAlign(LEFT,TOP);//文字改用左上角
  showArray(y);
}
int y=0;
void showArray(int y){      //左上角
  for(int i=0;i<10;i++){//rect(x,y, w,h)四邊形
    fill(255);     rect(i*50, y, 50,50);
    fill(0); text(a[i], i*50, y);
  }      ///秀文字(字,  x,    y) 放哪裡 (左下角)
}
void draw(){

}
void mousePressed(){
  for(int i=0; i<10-1;i++){// i從左到右 0 1 2 3 4 5 6 7 8
    if(a[i] > a[i+1]){
      int temp=a[i];
      a[i]=a[i+1];
      a[i+1]=temp;
      fill(255,0,0,128); rect(i*50, y, 100,50);
    }
  }
  y+=50;
  showArray(y);
}

下一堂課來了~
這堂課老師接著教下去上星期教到一半的課程，n*n的圓圈排序



void setup()
{
  size(300,500);
}
int N=5;
void draw()
{
  background(0);
  int R=300/N , w=R/2;
  for(int x=0;x<N;x++)
  {
    for(int y=0;y<N;y++)
    {
      ellipse(0+w+x*R ,200+w+y*R , R , R );
    }
  }
}

畫好了圓圈的基本架構後，接下來要開始幫圓圈上色啦~!





void setup()
{
  size(300,500);
  colorMode(HSB);
}
int ansX=2,ansY=3;
int N=5;
int H=255,S=255,B=255;
void draw()
{
  background(0);
  int R=300/N , w=R/2;
  for(int x=0;x<N;x++)
  {
    for(int y=0;y<N;y++)
    {
      if(x==ansX && y==ansY) fill(H+10,S-35,B-45);
      else fill(H,S,B);//上色
      ellipse(0+w+x*R ,200+w+y*R , R , R );
    }
  }

}
void mousePressed()
{
  ansX = int (random(N));ansY=int(random(N));
  H+=16;
  if(H>255)H=0;

}

利用這些程式碼，便可以點完個彩色圈圈就換成另一個彩色圈圈，且每次位置皆不同。

泡泡排序法的程式碼很難，所以老師今天用processing再教我們一次，教完後就接續著上星期ig的小遊戲。今天的進度是讓他上色並且有一個的顏色不一樣!!