今天嘗試做類似慢慢要出隧道的感覺

其實也很簡單 就單純的讓360度都有一條線

每一條線都會不停的隨機長長短跟顏色

然後透過再疊一層360度的白色線

慢慢把scale拉大 就會有慢慢要出隧道的感覺

出了隧道又是什麼光景呢?

//簡單的背景設置

void setup(){
  size(400,400);
  background(255);
  smooth();
}

float t = 0;

void draw(){
  t += 1;
  if(t>60){
    t=0;
    j=0;
    background(255);
  }
  //rotate((2*PI)/360);
  frameRate(500);
  flower02(random(width),random(height)); //先畫白色線圖層
  flower01(random(width),random(height)); //再畫彩色線圖層
}

float u = 0;
float j = 0;

void flower01(float x, float y){
  strokeWeight(2);
  pushMatrix();
  translate(200,200);
  j += 1;
  u = 1+(j/2);
  scale(u);
for(int i=0; i<360; i+=1){
  stroke(255,20);
  rotate((2*PI)/360);
  line(0,0,0,random(10,45));
}
popMatrix();
}

//下面是360度的彩色線圖層

void flower02(float x, float y){
  strokeWeight(3);
  pushMatrix();
  translate(200,200);
  j += 1;
  u = 1+(j/20);
  scale(u);
for(int i=0; i<360; i+=1){
  stroke(random(255),random(255),random(255),50);
  rotate((2*PI)/360);
  line(0,0,0,random(30,165));
}
popMatrix();
}

Try it. :)

//下面是360度的白色線圖層

這次是想把The Who樂團的經典鏢靶logo做成動畫
之後如果學會用mousex,mousey的話就能做可以靠滑鼠互動的小程式
靠滑鼠來當槍把每個標靶打掉 程式碼如以下

void setup(){
  size(400,400);
  background(255);
  rectMode(CENTER);
  noStroke();
  smooth();
}

//以上就是一樣對整個區域的基本設定

float s = 0.0;
float y = 0.0;

void draw(){
  frameRate(5);
  y += 1;
  if(y>0){
    background(255);
    y=0;
  }
//以上就是用之前做的洗畫面
//所以每一步都洗一次畫面 就不會有太多標靶

  s = random(0.5,1.5);
  scale(s);
//這是google "prcocessing scale"
//在這裡是把下面的void many_targets這個群組進行隨機的縮放

  many_targets(random(width),random(height));
//讓void many_targets在400x400範圍內隨機地方出現
}

//以下就是The Who單一的logo

void many_targets(float x,float y){
  for(int i=0; i<5; i+=1){
    if((i+1)%5 == 0){
      fill(255,0,0);}
    else if((i+1)%2 == 0){
      fill(255);}   
    else{
      fill(0,0,255);}
      ellipse(x,y,100-20*i,100-20*i);
  }
}



Try it :)

在學了動畫之後 想把之前的POP點點風嘗試用動畫跑出來

當然要無限畫下去是一點問題都沒有

不過當想跑1000畫格之後就重新來過要怎麼辦呢

新手入門 只要邏輯夠明確 大家都可以噢 程式碼如下

void setup() {
size(400,400); // 400x400的底
background(255); // 一樣一路白底
stroke(0,100); //黑線框,透明度為100
smooth(); // 線條要圓潤些
}

float x = 0.0; // x起始值為0
float y = 0.0; // y起始值為0

void draw() {
  frameRate(400); // 動畫跑速為400
  y += 1; // y每次+1
  if(y>1800){                    // 這邊是關鍵,也就是我們特地設一個y值來告訴電腦當我跑到1801步時
    background(255);        // 幫我把畫面洗刷一次變白
    y=0;                             // 同時y值歸0重新開始
  }
  x = 10;  // 在這我希望x值固定在10,你也可以試+=或是其他大小就知道差別
  fill(random(266-x),random(265-x),random(265-x),85); // 亂數的填色
  float k = random(2*x);  // 亂數固定一值為k
  ellipse(random(800-x),random(800-x),k,k);  //亂數的圓半徑跟隨機的在任何地方畫
}

Try it ! :P

想用Processing做出類似小時候看Looney Tunes的開場動畫
剛好學了簡單的動畫跟畫圓 所以嘗試做出類似的效果
新手入門 你以可以簡單做到 感覺應該要有東西蹦出來 程式碼如下



void setup() {
size(800,600); // 一個800x600 pixels的底
background(255); // 白底
strokeWeight(1); // 線粗為1
smooth(); // 線條要圓潤些
}

float x = 255.0; //x的起始值為255

float numFrames = 500;    //這行是要輸出動畫的,意思是輸出500個畫格,之後要靠軟體把它們結合成動畫
                                          //所以沒事請//它,要不然你資料夾會多出500張jpg
void draw() {
  frameRate(50); // 動畫跑速為50
  fill(random(x),random(x),random(x),20); // 填充的顏色RGB為亂數,透明度為20
  float k = random(1400-x);
  // 因為圓形(ellipse)有兩向度的半徑,因此要是要圓形維持亂數半徑
  // 就要把兩向度半徑設為一定值,所以把random設為一固定k值,不這樣做的話會變成亂數橢圓
  ellipse(400,300,k,k); //固定讓每個圓的中心點都在圖中央
  if(frameCount <= numFrames){      //這行也是要輸出動畫的,沒事請//它,要不然你資料夾會多出500張jpg
  saveFrame("test-####.jpg");            //這行也是要輸出動畫的,沒事請//它,要不然你資料夾會多出500張jpg
  }                                                       //這行也是要輸出動畫的,沒事請//它,要不然你資料夾會多出500張jpg
}




Try it ! :)

size(400,400);
background(0);
smooth();
noStroke();
for(int i=10; i<410; i+=20){
  for(int j=10; j<410; j+=20){
 
    if(((i+j)%30) == 0)
  {fill(random(i),random(i),random(i),i/3);
   rectMode(CENTER);
   rect(i,j,i/5,i/5);}
  
  else if(((i+j)%40) == 0)
  {fill(random(i),random(i),random(i),i/3);
   rectMode(CENTER);
   rect(i,j,i/4,i/4);}
  
   else if(((i+j)%100) == 0)
  {fill(random(i),random(i),random(i),i/3);
   rectMode(CENTER);
   rect(i,j,i/3,i/3);}
  
   else if(((i+j)%10) == 0)
  {fill(random(i),random(i),random(i),i/3);
   rectMode(CENTER);
   rect(i,j,i/4,i/4);}
  
}
}

for(int i=390; i>1; i-=20){
  for(int j=390; j>1; j-=20){
 
   fill(255,i/2);
   ellipseMode(CENTER);
   ellipse(i,j,i/40,i/40);
}
}

size(400,400);
background(255);
smooth();
noStroke();
for(int i=0; i<200; i++){
  for(int j=1; j<20; j++){
  fill(random(i),random(i),random(i),85);
  float k = random(j);
  ellipse(random(600-i),random(600-i),k,k);
}
}

最近開始Processing的課程,我很喜歡啊!!!!!!!!!!!!!!!!!!!!!!!!!!!

其實我還是比較喜歡做graphic的東西,
但還是乖乖把建築學好吧,
就慢慢一步一腳印學囉 由簡化繁 看到script你們一定會嗤之以鼻 ㄎㄎ
期待可以學到Processing 3D的時候可以把它應用在建築上 :)

size(400,400);
background(255);
smooth();
noStroke();
for(int i=10; i<400; i+=1){
  fill(random(i),random(i),random(i),5);
  float j = random(i);
  ellipse(random(i),random(i),j,j);
}