PVector_ellipse04

PVector pos1;
PVector pos2;
PVector pos3;

void setup() {
  size(500, 500);
  colorMode(HSB, 360, 100, 100, 100);
  smooth();
  noStroke();
  background(0, 0, 100);
}

void draw() {  
  fill(0, 0, 100, 20);
  rect(0, 0, width, height);
  
  translate(width/2, height/2);
  rotate(frameRate);
  
  pos1 = new PVector(0, 0);

  for (int  i = 0; i < 360; i += 30) {

    float a = radians(i);
    pos2 = new PVector(cos(a)*2, sin(a)*2);
    pos1.add(pos2);
    fill(random(360), 100, 100, 50);
    ellipse(pos1.x, pos1.y, 50, 50);
    ellipse(pos1.y, pos1.x, 50, 50);

    for (int  j = 0; j < 180; j += 1) {
      float b = radians(j);
      pos3 = new PVector(cos(b), sin(b));
      pos1.add(pos3);
      fill(random(360), 100, 100, 50);
      ellipse(pos1.x, pos1.y, 30, 20);
      ellipse(pos1.y, pos1.x, 30, 20);
    }
  }
}

つくりたいものとはちがうものができたけど，これはこれで気持ち悪いのでよい．雰囲気で何かは書けるようになったが，想像したものができないので，もっと修行が必要．

array_PVector_elipse02

int num = 50;

PVector[] pos;
PVector[] vel;
color[] c;

void setup() {
  size(500, 500);
  colorMode(HSB, 360, 100, 100, 100);
  smooth();
  noStroke();

  pos = new PVector[num];
  vel = new PVector[num];
  c = new color[num];

  for (int i = 0; i < num; i ++) {
    pos[i] =  new PVector(i*10, 0);
    vel[i] =  new PVector(0, i*0.01);
    c[i] = color(random(360), 80, 80, 10);
  }
}

void draw() {
  fill(0, 0, 100, 1);
  rect(0, 0, width, height);

  for (int i = 0; i < num; i ++) {
    pos[i].add(vel[i]);

    fill(c[i]);
    ellipse(pos[i].x, pos[i].y, 20, 20);
    ellipse(pos[i].y, pos[i].x, 20, 20);
    ellipse(width-pos[i].x, pos[i].y, 20, 20);
    ellipse(height-pos[i].y, pos[i].x, 20, 20);

    if (pos[i].y < 0 || pos[i].y > height) {
      vel[i].y = - vel[i].y;
    }
  }
}

昨日書いたスケッチの改良．円の色を変えたかったのでcolorを使って，配列で色を変えてみた．最初，c[i] = new color(random(360), 80, 80, 10)と書いてエラー．PVectorとは違うことに気づいて，c[i] = color(random(360), 80, 80, 10)と書いたらOK．些細な事だけど，ここにすぐに気付けたのでわりとすぐ書けた．配列も少し慣れてきたかな．加速度の値を小さくして，背景に塗りつぶしの透明ど下げていったら，わりと気に入ったのができた．長く見ているとおもしろいです．

array_PVector_ellipse01

int num = 50;

PVector[] pos;
PVector[] vel;

void setup() {
  size(500, 500);
  colorMode(HSB, 360, 100, 100);
  smooth();
  noStroke();

  pos = new PVector[num];
  vel = new PVector[num];


  for (int i = 0; i < num; i ++) {
    pos[i] =  new PVector(i*10, 0);
  }

  for (int i = 0; i < num; i ++) {
    vel[i] =  new PVector(0, i*0.1);
  }
}

void draw() {
  fill(0, 0, 100);
  rect(0, 0, width, height);

  for (int i = 0; i < num; i ++) {
    pos[i].add(vel[i]);

    fill(80, 80, 80);
    ellipse(pos[i].x, pos[i].y, 20, 20);

    if (pos[i].y < 0 || pos[i].y > height) {
      vel[i].y = - vel[i].y;
    }
  }
}

PVectorで配列を使ってみようと書き始めたけれど，どツボにはまる．全くできない．わからない．PVector自体を配列にできることをしらなくて，PVectorの値を配列に入れようとしていたのが，一番の敗因．「配列　PVector」で検索して，一番上にあったこのサイトを見てみたら，PVector[ ]と書いてもいいんだということがわかって，そこから書き直す．やっと思っていたようなことができた．ここまで約1時間．疲れた．

参考サイト

tercel-sakuragaoka.blogspot.jp

array_ellipse03

int num = 30;

int[] x = new int[num];
int[] h = new int[num];
int[] s = new int[num];
int[] b = new int[num];

int d = 1;

void setup() {
  size(500, 500);
  colorMode(HSB, 360, 100, 100, 100);
  noStroke();
  frameRate(60);
  for (int i = 0; i < num; i += 1) {
    x [i] = 10*i;
  } 
  for (int i = 0; i < num; i += 1) {
    h[i] = 5*i;
    s[i] = 10*i%100;
    b[i] = 10*i%100;
  }
}

void draw() {
  background(0, 0, 100);
  for (int i = 0; i < num; i += 1) {
    x[i] += d;
    fill(h[i], s[i], b[i], 50);
    ellipse(x[i], x[i]+random(num), 20, 20);
    
    if(x[i] > width+300 || x[i] < -300){
     d = - d;  
    }
  }
}

昨日に引き続き，配列の勉強．参考は以下のサイト．

Processing入門9

少しづつ配列＝入れ物というイメージがわかりつつある．入れ物をつくったら，番号をふって，データを入れる．これが重要．そして，番号で入れ物を呼び出し，そのなかのデータで描く．

array_ellipse02

int[] x;

void setup() {
  size(500, 500);
  colorMode(HSB, 360, 100, 100);
  noStroke();

  x = new int[20];
  for ( int i = 0; i < 20; i ++) {
    x[i] = 20*i;
  }
}

void draw() {
  background(0, 0, 100);

  for (int i = 0; i < 20; i ++) {
    fill(random(360), 100, 100);
    ellipse(x[i], x[i], 20, 20);
    ellipse(500-x[i], 500-x[i], 20, 20);
    ellipse(x[i], 500-x[i], 20, 20);
    ellipse(500-x[i], x[i], 20, 20);
    x[i] += 1;
  }
}

配列の勉強．

Processing入門9

ここを参考にしてやってみた．まだ，頭のなかで配列のイメージができていないので，一週間かけて少しずつやっていく．

PVector_ellipse03

PVector pos;
PVector vel;
PVector fri;

void setup() {
  size(500, 500);
  colorMode(HSB, 360, 100, 100);
  smooth();
  noStroke();
  pos = new PVector(width/2, 0);
  vel = new PVector(0, 1);
  fri = new PVector(0, 0);
}


void draw() {
  fill(0, 0, 100);
  rect(0, 0, width, height);

  pos.add(vel);
  vel.add(fri);

  fill(80, 100, 100);
  ellipse(pos.x, pos.y, 30, 30);

  vel.y += 0.01;
  fri.y += 0.0001;
  
  if (pos.y< 0 || pos.y > height) {

    vel.y = - vel.y;
    pos.x = random(width);
  }
}

バウンドする感じをつくりたかった．何も見ないでここまで出来たのは，この夏の成果といっていいかもしれない．頭のなかでなにがどう変わったのかはまだ意識できないけれど，とりあえず何も見ないでProcessingのコードを書く領域の土台が出来てきた感じがある．明日からは，配列をやろう．

mouseXY_rects01

void setup() {
  size(500, 500);
  colorMode(HSB, 360, 100, 100);
  background(0, 0, 100);
  noStroke();
  smooth();
}

void draw() {
  fill(0, 0, 100);
  rect(0, 0, width, height);

  translate(mouseX, mouseY);

  for (int i =1; i < 10; i =  i +1) {
    fill(80/i, 80, 80);
    rect(0, 0, (width-mouseX)/i, (height-mouseY)/i);
    fill(160/i, 80, 80);
    rect(0, 0, (0-mouseX)/i, (0-mouseY)/i);
    fill(240/i, 80, 80);
    rect(0, 0, (width-mouseX)/i, (0-mouseY)/i);
    fill(320/i, 80, 80);
    rect(0, 0, (0-mouseX)/i, (height-mouseY)/i);
  }
}

お風呂に入っている時に思いついたかたちを描いてみた．最初はうまくできなかったけれど，translateで原点を動かせばいいんだと考えたあとは，すんなりとできた．一度，forを使わずに書いて，その後，forを導入して，rectを繰り返し描くようにした．