Vector_vertex02

PVector pos;
PVector vel;
PVector fri;
float r;

void setup() {
  size(500, 500);
  colorMode(HSB, 360, 100, 100, 100);
  pos = new PVector (0, 0);
  vel = new PVector(1, 1);
  background(0, 0, 100);
}

void draw() {
  fill(0, 0, 100, 3);
  rect(-50, -50, width+50, height+50);

  fri = new PVector(random(0.01, 0.1), random(0.01, 0.1));

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

  r = atan2(mouseX, mouseY);

  pushMatrix();
  translate(pos.x, pos.y);
  rotate(r);

  beginShape();
  vertex(pos.x*2, pos.y*2);
  vertex(pos.y*-2, pos.x*-2);
  endShape();

  beginShape();
  vertex(pos.x*2, pos.y*-2);
  vertex(pos.y*-2, pos.x*2);
  endShape();

  popMatrix();

  if (pos.x < 0 || pos.x > width) {

    vel.x = - vel.x;
    vel.y =- vel.y;
  }
}

高尾さんに「摩擦」とか「重力」とかの変数を付け加えると面白くなるよと言われたから，昨日のスケッチにPVector velを追加してみた．そうしたら，昨日は規則だった動きだったけど，今日のスケッチは不規則な動きをするようになった．もちろん，randomを使ったからというところもあるのだけれど，それでも，自分がこんな動きをつくれるようになったんだと，1日1スケッチをつづけることで，自分のなかでProcessingスキルと考え方が育っているなと実感した．自分で書いたコードについてどうなっているのかはまだわからないところがあるけれど，それでも動きをつくるということは少しできてきた．

PVector_vertex01

PVector pos;
PVector vel;
float r;

void setup() {
  size(500, 500);
  colorMode(HSB, 360, 100, 100, 100);
  pos = new PVector (0, 0);
  vel = new PVector(1, 1);
  background(0, 0, 100);
}

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

  pos.add(vel);

  r = atan2(mouseX, mouseY);

  pushMatrix();
  translate(pos.x, pos.y);
  rotate(r);

  beginShape();
  vertex(pos.x*2, pos.y*2);
  vertex(pos.y*-2, pos.x*-2);
  endShape();

  beginShape();
  vertex(pos.x*2, pos.y*-2);
  vertex(pos.y*-2, pos.x*2);
  endShape();

  popMatrix();

  if (pos.x < 0 || pos.x > width) {

    vel.x = - vel.x;
    vel.y =- vel.y;
  }
}

PVectorの練習．なんとなく動かすことはできてきた．PVectorのどこがそれ以外のやり方に対して便利なのかは，いまいちわからないけれど， pos.add(vel)というだけで，x yの値が決まっていくのが便利なのだろう．きっとそうなのだろう．そのためのPVectorなのだろう．

PVector_ellipse02

PVector pos;
PVector vel;
float rad;
int h =0;

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

void draw() {
  rad = radians(frameCount);
  float x = width/2 + (200* cos(rad));
  float y = height/2 + (200 * sin(rad));

  pos = new PVector(x, y);
  vel = new PVector(random(-10, 10), random(-10, 10));

  pos.add(vel);
  stroke(h, 90, 90);
  ellipse(pos.x, pos.y, 10, 10);

  println(x);

  if (x >449) {
    h += 10;
  }
  if ( h > 360) {
    h = 0;
  }
}

ゲンロンカフェでのトーク前にカフェでコーヒーを飲みながら，1スケッチ．PVectorで円を描きたくて，まずはチャレンジ．過去のスケッチを見ながら，円は描けたので，一周毎に色を変えたくなった．色の切り替え方がわからなったので，printlnで変数の値を見ながら，一周したときの値を見ていった．一周した，つまり，スタート地点がxが大体449くらいだったので，x>449として，一周したごとに色が切り替わっている風にしてみた．

だんだんPVectorが分かってきた気がする．あと，あたまの中をprocessingのコードにどうしたらできるだろうというのも，少しだけ回路ができてきた気がする．写経するだけでは，ここまで来ていないから，1日1スケッチは偉大！

Vector_rects01

PVector pos;
PVector vel;

void setup() {
  size(500, 500);
  colorMode(HSB, 360, 100, 100);
  rectMode(CENTER);
  pos = new PVector(width/2, height/2);
  background(0, 0, 100);
}

void draw() {
  vel = new PVector(random(-5, 5), random(-5, 5));

  pos.add(vel);

  noStroke();
  fill(random(360), 80, 100);
  rect(pos.x, pos.y, 100, 100);
  fill(random(360), 80, 100);
  rect(pos.y, pos.x, 100, 100);
  fill(random(360), 80, 100);
  rect(-pos.x, pos.y, 100, 100);
  fill(random(360), 80, 100);
  rect(pos.y, -pos.x, 100, 100);
  fill(random(360), 80, 100);
  rect(pos.x, -pos.y, 100, 100);
  fill(random(360), 80, 100);
  rect(-pos.y, pos.x, 100, 100);

  checkEdge();
}

void checkEdge() {
  if (pos.x > width || pos.x < 0) {
    vel.x = vel.x * -1;
  }
  if (pos.y > height || pos.y < 0) {

    vel.y = vel.y *  -1;
  }
}

昨日は名古屋から神戸に戻ってスケッチできなかった．そして，今，出張で埼玉の実家にいる．疲れているけど，昨日，スケッチを書かなかったので今日は書く．前回書いたスケッチを改変．vel　＝ new PVectorをvoid drawのなかに入れてみたというのが，今日の実験．と，ここまで書いて，translate rotate で実験するだったことを思い出した．明日，覚えていたら，実験しよう．

Vector_ellipse01

PVector pos;
PVector vel;
PVector gra;

void setup() {
  size(500, 500);
  colorMode(HSB, 360, 100, 100);
  frameRate(24);
  fill(150, 80, 100);

  pos = new PVector(width/2, height/2);
  vel = new PVector(random(-5, 5), random(-5, 5));
}


void draw() {
  background(0, 0, 100);
  gra = new PVector(random(-5, 5), random(-0.05, 0.05));

  pos.add(vel);
  vel.add(gra);

  noStroke();
  fill(random(360), 80, 100);
  ellipse(pos.x, pos.y, 100, 100);
  fill(random(360), 80, 100);
  ellipse(pos.x, pos.y, 50, 50);
  
  checkEdge();
}

void mousePressed() {
  gra.x = -5;
  gra.y = 0.05;
}

void checkEdge() {
  if (pos.x > width || pos.x < 0) {
    vel.x = vel.x * -1;
  }
  if (pos.y > height || pos.y < 0) {

    vel.y = vel.y * -1;
  }
}

高尾さんに教わったPVectorを復習．pos vel までは写経．写経してなんとなく感じを掴んで，gra は自分で追加．といっても，高尾さんのサンプルにもあったやつだけど…　サンプルは見ないで追加してみた．「どっちいこうかな？」という感じをだしたかった．すこしPVectorがわかった気がする．

array_ellipse01

int NUM = 100; //配列の数
//位置のベクトルの配列
PVector[] location = new PVector[NUM];
//速度のベクトルの配列
PVector[] velocity = new PVector[NUM];

void setup() {
  size(500, 500); //800x600pixelの画面を生成
  colorMode(HSB, 360, 100, 100, 100);
  frameRate(60); //フレームレート
  noStroke(); //枠線なし
  smooth();

  for (int i = 0; i < NUM; i++) { //配列の数だけ繰り返し
    //位置のベクトルの初期設定
    location[i] = new PVector(0, 0);
    //速度のベクトルの初期設定
    velocity[i] = new PVector(sin(frameCount), cos(frameCount));
  }
}

void draw() {
  background(0, 0, 99, 90); //背景を描画
   
  for (int i = 0; i < NUM; i++) { //配列の数だけ繰り返し
    fill(frameCount%360, random(100), random(100));
    //指定した位置に円を描画
    ellipse(location[i].x+i*5, location[i].y, mouseX, mouseY);
    //位置のベクトルに速度のベクトルを加算、次の位置になる
    location[i].add(velocity[i]);

    //もし画面の左端、または右端に到達したら
    if ((location[i].x > width) || (location[i].x < 0)) {
      velocity[i].x *= -1; //X方向のスピードを反転
    }
    //もし画面の下端、または上端に到達したら
    if ((location[i].y > height) || (location[i].y < 0)) {
      velocity[i].y *= -1; //Y方向のスピードを反転
    }
  }
}

配列の勉強をするために田所さんの 第5回 Processing実習 1 : 動きを生みだす – アニメーションとベクトル | yoppa orgをコピーして，いじる．でも，まだ全然わからない．PVectorもわからないから，ふたつわからないことがあって，全くわからない状態になっていて，スケッチを1日1スケッチ書き始めたときのように，右も左も分からない状態になっている．困った…

Wave_Clock_Modefied01

float angnoise, radiusnoise;
float xnoise, ynoise;
float angle = -PI/2;
float radius;
float strokeCol = 254;
int strokeChange = -1;

void setup() {

  size (500, 500);
  smooth();
  frameRate(30);
  background(255);
  noFill();

  angnoise = random(10);
  radiusnoise = random(10);
  xnoise = random(10);
  ynoise = random(10);
}


void draw() {

  radiusnoise += 0.005;
  radius = (noise(radiusnoise) * 550) +1;

  angnoise += 0.005;
  angle += (noise(angnoise) * 6) -3;
  if (angle > 360) { 
    angle -= 360;
  }
  if (angle < 0) {
    angle += 360;
  }

  xnoise += 0.01;
  ynoise += 0.01;
  float centerx = width/2 + (noise(xnoise)*100) - 50;
  float centery = height/2 + (noise(ynoise)*100) - 50;

  float rad = radians(angle);
  float x1 = centerx + (radius * cos(rad));
  float y1 = centery + (radius * sin(rad));

  float opprad = rad + PI/2;
  float x2 = centerx + (radius * cos(opprad));
  float y2 = centery + (radius * sin(opprad));

  strokeCol += strokeChange;
  if (strokeCol > 254) {
  strokeChange = -1;
  }
  if (strokeCol < 0) {
    strokeChange = 1;
  }
  stroke(strokeCol, 60);
  strokeWeight(1);
  line(x1, y1, x2, y2);
}

昨日は雰囲気で書いたけれど，今日は教科書『ジェネラティブ・アート』の写経．ここで教科書は一区切りにしようかなと思った．明日からは，配列を勉強してみたい．その後，また教科書にもどりたい．

雰囲気で書いたほうが，見栄えは拙いけど，勉強になる気がする．もちろん，優れたコードの写経もいいのだけれど，ああしてこうしてという試行錯誤の部分が写経ではない感じがする．変数の名前をつけるところから考えるのが重要な感じがしている．