1a-09 作品をつくる1　パターン

教科書 p.88〜p.90

• パターン（模様）を描く
• 自然なゆらぎを与える

パターン（模様）を描く

以下のような模様を描く。

じょじょに理想に近づければよい。一度に完成形を目指すとくじけてしまう。

step 1 円を並べる

まず、横一列に並べる

size(400,400);

for(int i=0; i<=10; i++){
  ellipse(i*40,0,20,20);
}

それを縦方向に繰り返す

size(400,400);

for(int j=0; j<=10; j++){
  for(int i=0; i<=10; i++){
    ellipse(i*40,j*40,20,20);
  }
}

step 2 変数を使う

描画は同じだが、後々微調整をしたい場合、簡単に修正ができる

直径

size(400,400);

int myDiameter=20; //直径(diameter)

for(int j=0; j<=10; j++){
  for(int i=0; i<=10; i++){
    ellipse(i*40,j*40,myDiameter,myDiameter);
  }
}

間隔

size(400,400);

int myDiameter=20; //直径(diameter)
int myInterval=40; //間隔（Interval）

for(int j=0; j<=10; j++){
  for(int i=0; i<=10; i++){
    ellipse(i*myInterval,j*myInterval,myDiameter,myDiameter);
  }
}

繰り返しの回数

size(400,400);

int myDiameter=20; //直径(diameter)
int myInterval=40; //間隔（Interval）
int myRepeat=int(width/myInterval); //実際はこれより1回多く繰り返す

for(int j=0; j<=myRepeat; j++){
  for(int i=0; i<=myRepeat; i++){
    ellipse(i*myInterval,j*myInterval,myDiameter,myDiameter);
  }
}

step 3 色を付ける

size(400,400);
colorMode(HSB,100);
background(99); //背景を白
smooth(); //境界を滑らかに
noStroke(); //境界線なし

int myDiameter=20; //直径(diameter)
int myInterval=40; //間隔（Interval）
int myRepeat=int(width/myInterval); //実際はこれより1回多く繰り返す

fill(55,30,99); //水色に塗色を設定

for(int j=0; j<=myRepeat; j++){
  for(int i=0; i<=myRepeat; i++){
    ellipse(i*myInterval,j*myInterval,myDiameter,myDiameter);
  }
}

step 4 位置をずらす

size(400,400);
colorMode(HSB,100);
background(99); //背景を白
smooth(); //境界を滑らかに
noStroke(); //境界線なし

int myDiameter=20; //直径(diameter)
int myInterval=40; //間隔（Interval）
int myRepeat=int(width/myInterval); //実際はこれより1回多く繰り返す

fill(55,30,99); //水色に塗色を設定

for(int j=0; j<=myRepeat; j++){
  for(int i=0; i<=myRepeat; i++){
    //条件分岐
    if (j%2==0){ //jが偶数のとき
      ellipse(i*myInterval,j*myInterval,myDiameter,myDiameter);
    }else{//jが奇数のとき、x軸方向に少しずらす
      ellipse(i*myInterval+myInterval/2,j*myInterval,myDiameter,myDiameter); 
    }
  }
}

ゆらぎ

randomでパターンに「ゆらぎ」を与える

size(400,400);
colorMode(HSB,100);
background(99); //背景を白
smooth(); //境界を滑らかに
noStroke(); //境界線なし

int myDiameter=20; //直径(diameter)
int myInterval=40; //間隔（Interval）
int myRepeat=int(width/myInterval); //実際はこれより1回多く繰り返す

int myRange=3; //ゆらぎの振幅

for(int j=0; j<=myRepeat; j++){
  for(int i=0; i<=myRepeat; i++){
    fill(55,random(10,30),99); //水色の彩度をランダムに設定
    //条件分岐
    if (j%2==0){ //jが偶数のとき
      ellipse(i*myInterval+random(-myRange,myRange),j*myInterval+random(-myRange,myRange),myDiameter,myDiameter);
    }else{//jが奇数のとき、x軸方向に少しずらす
      ellipse(i*myInterval+myInterval/2+random(-myRange,myRange),j*myInterval+random(-myRange,myRange),myDiameter,myDiameter); 
    }
  }
}