2013年3月14日 星期四

[對照]蝦爸的p5範例-2


Example Download,透過滑鼠拖拉紅色的圓形。

有鑒於我的processing功力,始終維持在肉肉的狀態, 好友「蝦爸」決定為我開一連串密集的課程,嚴格督促我這次一定要練會。但為了不讓蝦同學壓著我打, 所以每當他跟我示範完一個範例後,我都會用Pd重做出來,不能遜色!所以接下來會還有好幾篇文章,都是有關Processing的邏輯在Pd的對應方式,請大家拭目以待。

在本範例中,當拖拉畫面中的圓形時,圓形會變色並且拖拉時會跟鄰近的圓產生連線,因此本範例的重點在,如何如何透過雙迴圈來處理大量距離偵測,並且記憶滑鼠與目標圓的距離向量,讓拖拉時,滑鼠座標與目標圓維持在同樣位置。

[Processing code] ↓

int number;
float [] x, y, r;
boolean [] flag;
float Temp_x,Temp_y;

void setup() {
  number=50;
  x=new float[number];
  y=new float[number];
  r=new float[number];
  flag=new boolean[number];

  size(600, 250);
  for (int i=0;i<number;i++) {

    x[i]=random(0, width);
    y[i]=random(0, height);
    r[i]=random(20, 60);
    flag[i]=false;
  }
}

void draw() {
  background(0);
  noStroke();
  fill(0, 0, 250, 100);
  for (int i=0;i<number;i++) {
    if (flag[i] ==false) {
      fill(250, 0, 0, 100);
    }
    else {
      fill(0, 0, 250, 100);
      x[i]=Temp_x+mouseX;
      y[i]=Temp_y+mouseY;
    }
    ellipse(x[i], y[i], r[i], r[i]);
  }
  stroke(255);
  strokeWeight(1);
  for (int i=0;i<number;i++) {
    for (int j=0;j<number;j++) {
      if (Distance(x[j], y[j], x[i], y[i])<100) {
        line(x[j], y[j], x[i], y[i]);
      }
    }
  }
}

float Distance(float x1, float y1, float x2, float y2) {
  float Temp;
  Temp= sqrt(sq(x1-x2)+sq(y1-y2));
  return Temp;
}

void mousePressed() {
  
  for (int i=0;i<number;i++) {
    if (Distance(mouseX, mouseY, x[i], y[i])< r[i]/2) {
      flag[i]=true;
      Temp_x=x[i]-mouseX;
      Temp_y=y[i]-mouseY;
      println("ID:"+i+" X:"+mouseX +" Y:"+mouseY);

      break ;
    }
  }
}

void mouseReleased(){
for (int i=0;i<number;i++) {
flag[i]=false;
}

}


[Pd code] ↓

(dragcircle.pd)
(pd mousein)
(pd line)
(pd circle)




Pd File Download