トレイルトップに戻る    印刷する

まずは図形を描く

基本図形のひとつである円を描くプログラムから始めます。どこに描くか、いくつ描くか、をプログラムを使って指示します。基本図形を描くには、Processing(p5.js)の描画関数を使います。

円の描画と変数の活用

直径が20ピクセルの円を、(35, 50)の位置に描いてみましょう。
【リストT1-1-1】
  function setup() {
    createCanvas(250, 250); //250×250ピクセルの画面を用意
    noStroke();  //輪郭線は描かない
    fill(0);     //黒で塗る
  }
  function draw() {
    background(220);  //背景はグレー
    ellipse(35, 35, 20); //円を描く
  }
描画用の関数は、デフォルトで線が黒、塗りが白で描画するようになっています。上の例では、線を描かず、塗の色を黒に指定しています。リストT1-1-1は図形は動かないので、draw()の中のコードをsetup()の中に書いて、draw()を削除しても同じ結果となります。

加えて、同じ大きさの円を(55, 50)と(75, 50)の位置に描いてください。
円が3
【リストT1-1-2】
function setup() {
  ..... // リストT1-1-1と同じ
}
function draw() {
  background(220);
  ellipse(35, 35, 20);
  ellipse(55, 35, 20);
  ellipse(75, 35, 20);
}

この例では、直接座標の数値を指定して図形を描いています。これが基本ですが、柔軟性がありません。3つ並んだ円の位置を、例えば右に5ピクセル動かしたいとすると、3つの円のx座標の値35, 55, 75をそれぞれ40,60,80に変えなくてはならず、厄介な上、間違いが起こりやすいです。3つの円は、規則的に並んでいるので(間隔が20ピクセル)、次のように書くことができます。
【リストT1-1-3】
const x = 35;
function setup() {
  ..... // リストT1-1-1と同じ
}
function draw() {
  background(220);
  ellipse(x, 35, 20);
  ellipse(x+20, 35, 20);
  ellipse(x+40, 35, 20);
}
xは変数で、左の円のx座標を保持しておくためのデータ領域です。こうしておけば、xの値を変えるだけ、例えば、const x = 40とすれば、3つの円全体を5ピクセル右に描くことができます。このように変数を活用するとわかりやすく、誤りにくい書き方ができます。

たくさんの円を描く

次に円を10個描くことを考えます。リストT1-1-2の3つの円に続けて、ellipse()を全部で10回実行すると、円が10個描けます。
円が10
【リストT1-1-4】
const x = 35;
function setup() {
  ..... // リストT1-1-1と同じ
}
function draw() {
  background(220);
  ellipse(x, 35, 20);
  ellipse(x+20, 35, 20);
  ellipse(x+40, 35, 20);
  ellipse(x+60, 35, 20);
  ellipse(x+80, 35, 20);
  ellipse(x+100, 35, 20);
  ellipse(x+120, 35, 20);
  ellipse(x+140, 35, 20);
  ellipse(x+160, 35, 20);
  ellipse(x+180, 35, 20);
}

しかし、これは厄介です。10個程度ならなんとかコピーと修正でできなくはありませんが、100個となると別の方法が必要になります。上の例をよく見ると、関数ellipse()が10回実行され、その時の引数が規則的に変わっています(第一引数だけが20ずつ増加)。このように規則的に変化する処理を繰返す時に、役立つのが繰返しを行うfor文です。次のコードは、上のサンプルと同じ処理を行います。
【リストT1-1-5】
const x = 35;
function setup() {
  ..... // リストT1-1-1と同じ
}
function draw() {
  background(220);
  for(let i=0; i<10; i=i+1){  //iが10未満の間、iに1足しながら繰り返す
    ellipse(x+i*20, 35, 20);  //x座標はiの値に従って増える
  }
}
変数iは繰返した回数を覚えておく場所で、その値が10になった時、繰返しを終了します。

演習問題


10本の線
【問題T1-1-1】画面(250 X 250)に10本の線を描いてみよう。
左の線の上の点の座標は(35, 30)、下の点は(35, 220)で、線の間隔は20です。


円を100個
【問題T1-1-2】10個の円の行を、縦に(y軸方向に)10列(等間隔に10行10列に並ぶ100個の円を)描きましょう。
10個の円を横に並べるfor文を、10回繰返します。


copyright © info