じょりじょり日記

JavaScript100サイトチャレンジを記録するブログです。

Processing vol13

こんばんは~!

パーリンノイズを自分で実装してみようと考えていました。しかし、関連サイトをみてもまだ意味がわかりませんでした。

手元の書籍でパーリンノイズについてまとまっている情報を確認することは出来たのですが「改良パーリンノイズ」というネットの記事を読んで困惑…。
まだまだ自分にはレベルが高すぎたようです(;´д`)トホホ… いつか理解できるようになりたいですね。

ということでパーリンノイズについてわかっていることを列挙すると…

  • Ken Perlinさんが開発した強力なアルゴリズム
  • 雲や炎を描画する際に特に有効
  • 自然な乱数を生み出せる仕組みがある
  • processingで実装されているnouse()は0.0-1.0の乱数を返す
  • random()との違いは引数に持たせる値が振れ幅ではないこと。
  • noise()は時間を引数に取る。

ということです。もっと深く理解できるよう頑張ります:D

f:id:zyoryzyory:20170918030131p:plain

https://processing.org/examples/noise1d.html
float xoff = 0.0;
//xの増加度合い
float xincrement = 0.01;

void setup() {
  size(640, 360);
  background(0);
  noStroke();
}

void draw() {
  //fill(rgb, alpha)
  fill(0, 10);
  //1度の描写ずつリフレッシュするためにrectで上書き
  rect(0,0,width,height);

  //xoffを基準にパーリンノイズの値がnに格納
  //パーリンノイズはオーガニック的で、前後の値を考慮してより自然な値を返すもの
  //xoffの値が増加すればするほど自由に動ける範囲が広くなる?
  float n = noise(xoff)*width;

  //1秒間に60回xoffを増加させていく
  xoff += xincrement;
  
  //パーリンノイズの値に基いてx座標を操作
  fill(200);
  ellipse(n,height/2, 64, 64);
}

Processing vol12

draw系やってみました!
徐々にですが「これができるんだったら、あれもできるかな?」と考えられるようになってきました。
とても楽しいです、どんどん続けていきますよ〜!

f:id:zyoryzyory:20170915003803p:plain

//https://processing.org/examples/continuouslines.html

void setup() {
  size(640, 360);
  background(102);
}

void draw() {
  stroke(255);
  if (mousePressed == true) {
    //currentとpreviousでverticalとhorizonの距離を取ってlineで結んでいるんだ
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

f:id:zyoryzyory:20170915003822p:plain

//https://processing.org/examples/pattern.html

void setup() {
  size(640, 360);
  background(102);
}

void draw() {
  variableEllipse(mouseX, mouseY, pmouseX, pmouseY);
} 

//currentとpreviousの距離によってellipseのサイズが変わる関数
//frameRateはdefaultで60だからビューンと早くmouseを動かせば
//それだけ1描画あたりの距離が広がる
void variableEllipse(int x, int y, int px, int py) {
  float speed = abs(x-px) + abs(y-py);
  stroke(speed);
  ellipse(x, y, speed, speed);
}

Processing vol11

明日はベクトルに関すProcessingの写経会なのでベクトル項目をやってみました!

//https://processing.org/examples/vectormath.html

void setup() {
  size(640,360);
}

void draw() {
  background(0);
  
  //マウスのの位置ベクトルを設定
  //mouseXとmouseYはmouse.xとmouse.yで参照可能
  PVector mouse = new PVector(mouseX,mouseY);
  
  //中央の位置ベクトルを設定
  PVector center = new PVector(width/2,height/2);
  //中央からマウスまでのベクトルを計算
  mouse.sub(center);
  
  //normalizeは正規化という意味
  //これをPVectorにnormalizeするとあばばばばばば!!!!!1?になる
  mouse.normalize();
  
  //mouseのベクトルの長さを1*150で150にしている。
  mouse.mult(150);
  
  //lineを描画する座標を中央にする
  translate(width/2,height/2);
  stroke(255);
  strokeWeight(4);
  line(0,0,mouse.x,mouse.y);
  
}
//https://processing.org/examples/bouncingball.html
//ベクトル使いますよ!という宣言
PVector location;
PVector velocity;
PVector gravity;

void setup() {
  size(640, 360);
  //位置
  location = new PVector(100, 100);
  //速度
  velocity = new PVector(1.5, 2.1);
  //重力
  gravity = new PVector(0, 0.2);
}

void draw() {
  background(0);

  location.add(velocity);
  velocity.add(gravity);

  //locationはx方向に1.5ずつvelocityによって加算
  //そこでellipseが右までいったらx方向を逆に1.5ずつ加算
  if ((location.x > width) || (location.x < 0)) {
    velocity.x = velocity.x * -1;
  }
  //底を超えたら反発するためにvelocityにマイナスを掛ける
  if (location.y > height) {
    velocity.y = velocity.y * -0.95;
    //下でバウンドしているように見せるためにheightを位置ベクトルに代入?
    location.y = height;
  }

  
  stroke(255);
  strokeWeight(2);
  fill(127);
  ellipse(location.x, location.y, 48, 48);
}

JavaScriptチャレンジ Processing vol10

Inputの項目が全部終わりました〜!

f:id:zyoryzyory:20170912011602p:plain

//https://processing.org/examples/keyboardfunctions.html
 
int maxHeight = 40;
int minHeight = 20;
int letterHeight = maxHeight;
int letterWidth = 20;

int x = -letterWidth;         
int y = 0;                

boolean newletter;              

//A-Zで26個
int numChars = 26;

//colorの配列インスタンスを生成
color[] colors = new color[numChars];

void setup() {
  size(640, 360);
  noStroke();
  
  //Hue Saturation BrightnessをMAX26で設定
  colorMode(HSB, numChars);
  background(numChars/2);
  
  //Hueを段階的に上げて設定
  for(int i = 0; i < numChars; i++) {
    colors[i] = color(i, numChars, numChars);    
  }
}

void draw() {
  if(newletter == true) {
    // Draw the "letter"
    int y_pos;
    //大文字の場合のyのポジション
    if (letterHeight == maxHeight) {
      y_pos = y;
      rect( x, y_pos, letterWidth, letterHeight );
    } else {
      //小文字の場合のポジション
      y_pos = y + minHeight;
      rect( x, y_pos, letterWidth, letterHeight );
      fill(numChars/2);
      rect( x, y_pos-minHeight, letterWidth, letterHeight );
    }
    newletter = false;
  }
}

void keyPressed()
{
  //押されたkeyが65〜122の間だった場合
  if((key >= 'A' && key <= 'Z') || (key >= 'a' && key <= 'z')) {
    int keyIndex;
    
    //A-Zだった場合
    if(key <= 'Z') {
      
      //格納される値は0-25のどれかになる
      keyIndex = key-'A';
      //文字の高さが最大
      letterHeight = maxHeight;
      
      //どのあたりのHueが呼ばれるか決まる
      fill(colors[keyIndex]);
    } else {
      //小文字の場合
      keyIndex = key-'a';
      letterHeight = minHeight;
      fill(colors[keyIndex]);
    }
  } else {
    //文字でない場合
    fill(0);
    letterHeight = 10;
  }
  
  newletter = true;

  //xの描画位置を更新して1個分ずらす
  x = ( x + letterWidth ); 

  //右までいったら折り返す
  if (x > width - letterWidth) {
    x = 0;
    y+= maxHeight;
  }

  //下までいったら折り返す
  if( y > height - letterHeight) {
    y = 0;      // reset y to 0
  }
}

もっとスピードアップしていきたいですね!
がんばりっます。

JavaScriptチャレンジ Processing vol9

単位円…の存在を完全に抹消しておりました。
なぜcosがx方向の座標を…、なぜsinがy方向…という疑問は残りますが、もう少し掘り下げてみる必要がありますね。
まずは三角関数と単位円の関係を勉強してみたいと思います。

f:id:zyoryzyory:20170909231213p:plain

//https://processing.org/examples/clock.html

int cx, cy;
float secondsRadius;
float minutesRadius;
float hoursRadius;
float clockDiameter;

void setup() {
  size(640, 360);
  stroke(255);
  
  //360が最小値として扱われてradisuには180が入る
  int radius = min(width, height) / 2;
  
  //秒針、長針、短針の半径を設定
  secondsRadius = radius * 0.72;
  minutesRadius = radius * 0.60;
  hoursRadius = radius * 0.50;
  
  //時計盤の半径を設定
  clockDiameter = radius * 1.8;
  
  //centerXとcenterYと予想
  cx = width / 2;
  cy = height / 2;
  
  frameRate(1);
}

void draw() {
  background(0);
  
  //時計盤を描画
  fill(80);
  noStroke();
  ellipse(cx, cy, clockDiameter, clockDiameter);
  
  //sin(), cos()は3時の時点から始まってしまうから
  //1/4スタート地点を戻すために-HALF_PIしている
  //時間に対応した角度を返すために、0-60を0から1周(TWO_PI)にマッピング
  float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI; 
  float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
  
  // 針を描画
  stroke(255);
  
  //outlineの太さを指定
  strokeWeight(1);
  
  //centerから単位円に半径を掛けると円になる
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
  strokeWeight(2);
  line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
  strokeWeight(4);
  line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);
  
  strokeWeight(2);
  beginShape(POINTS);
  
  //60回ループ
  for (int a = 0; a < 360; a+=6) {
    //6の倍数をラジアンに変換
    float angle = radians(a);
    float x = cx + cos(angle) * secondsRadius;
    float y = cy + sin(angle) * secondsRadius;
    
    //x, y座標に点を描画
    vertex(x, y);
  }
  endShape();
}