コンピュータ基礎II　プログラムでヴィジュアルを作ろう

17. 作例1

void setup() {
  size( 730, 488 );
  background( 255 );
  smooth();
  noLoop();
  ellipseMode( RADIUS );
}

void draw() {

  int pointNum = 100;  //座標の数

  float[][] pointArray = new float[pointNum][2];  //座標用の配列

  //描画単位の軌跡を決める座標を配列に格納
  for( int i = 0; i < pointNum; i++ ) {
    pointArray[i][0] = random( width );
    pointArray[i][1] = random( height );
  }
 
  float shapeSize = width / 30;  //描画単位のサイズ

  noStroke();
  fill( 51 );
  rect( 0, 0, width, height );
  
  noFill();
  stroke( 255 );
 
  //軌跡用の座標を結ぶ直線と、描画単位を描画
  for( int i = 0; i < pointNum-1; i++ ) {
    line( pointArray[i][0], pointArray[i][1], pointArray[i+1][0],pointArray[i+1][1] );
    float lineRepeatNum = random( 1, 6 );
    makeLines( pointArray[i][0], pointArray[i][1], shapeSize, lineRepeatNum );
  }

}

//描画単位　複数の線をまとめて描く
void makeLines( float centerX, float centerY, float radius, float num ) {
  for( int i = 0; i < num; i++ ) {
    makeLine( centerX, centerY, radius );
  } 
}

//描画単位を構成する線
void makeLine( float centerX, float centerY, float radius ) {
  float leftX = centerX - radius;
  float rightX = centerX + radius;
  float topY = centerY - radius;
  float bottomY = centerY + radius;
  
  float ctlPoint = radius * 0.55;
  
  //描画範囲の中心に正円を描画
  //ellipse( centerX, centerY, radius-10, radius-10 );
  
  //中心と左右上下のポイントを少しずらす
  float centerX2 = centerX + random( -radius/3, radius/3 );
  float centerY2 = centerY + random( -radius/3, radius/3 );
  
  leftX = leftX + random( -radius/3, radius/3 );
  rightX = rightX + random( -radius/3, radius/3 );
  topY = topY + random( -radius/3, radius/3 );
  bottomY = bottomY + random( -radius/3, radius/3 );
  
  //ベジエ曲線を描画する
  beginShape();
  vertex( centerX2, topY );
  bezierVertex( centerX2 + ctlPoint, topY,
          rightX, centerY2 - ctlPoint,
          rightX, centerY2 );
  bezierVertex( rightX, centerY2 + ctlPoint,
                centerX2 + ctlPoint, bottomY,
                centerX2, bottomY );
  bezierVertex( centerX2 - ctlPoint, bottomY,
                leftX, centerY2 + ctlPoint,
                leftX, centerY2 );
  bezierVertex( leftX, centerY2 - ctlPoint,
                centerX2 - ctlPoint, topY,
                centerX2, topY );
  endShape();
}

ページの先頭へ↑

プロセス1

プロセス2

プロセス3

ページの先頭へ↑

＜　16. 描画の軌跡を考える

18. 作例2　＞