「情報」授業用　プログラミング演習：図形描画プログラムを作ろう

 ← 「実行」すると，ここに絵が出ます．
← 右クリックで「名前をつけて画像を保存」とかすると，生成した画像が保存できます．多分．


サンプル集

プログラムをコピー＆ペーストして，どんな図形が表示されるか調べてみよう．

例1：四角

background(0, 0, 0);

for(i = 0; i < 25; i = i + 1) {
  for (j = 0; j < 25; j = j + 1) { // 二重ループ
    fill(random(255), random(255), random(255)); // 色をランダムに
    rect(i*10, j*10, 10, 10);
  }
}

例2：円

background(0, 0, 0); // 背景色を黒に
for(i = 0; i < 25; i = i + 1) {
  fill(random(255), random(255), random(255));
  ellipse(i * 10, i * 10, 10, 10);
}

例3：正弦波


background(0, 0, 0); // 背景色を黒に
for(i = 0; i < 250; i = i + 1) {
  stroke(random(255), random(255), random(255));
  line(i, 125, i, 125 + sin(i/(250/(2*3.14))) * 125);
}

例4：四角で円を描く（極座標系を利用）

background(0, 0, 0); // 背景色を黒に

n = 32; // 32 個の四角で円を描く

for(i = 0; i < n; i = i + 1) {
  stroke(random(255), random(255), random(255));
  theta = i * (2 * 3.14 / n);
  rect(cos(theta)*120 + 120, sin(theta)*120 + 120, 10, 10);
}

例5：渦巻き（極座標系を利用）

background(0, 0, 0); // 背景色を黒に

n = 32; // 32 個の四角で1つのうずを書く
m = 3;  // 3 回巻く

for(h = 0; h < m; h = h + 1) {
  for(i = 0; i < n; i = i + 1) {
    stroke(random(255), random(255), random(255));
    theta = i * (2 * 3.14 / n);
    r = 120 / (m * n) * i + 120 / m * h;
    rect(cos(theta)*r + 120, sin(theta)*r + 120, 10, 10);
  }
}

例6：ドラゴン曲線（フラクタル図形）

px = py = 50;

void dragon(i, dx, dy, sign) {
  if (i==0) {
    line(px, py, px+dx, py+dy);
    px = px+dx; py = py+dy;
  }
  else {
    dragon(i-1, (dx-sign*dy)/2, (dy+sign*dx)/2,  1);
    dragon(i-1, (dx+sign*dy)/2, (dy-sign*dx)/2, -1);
  }
}

order = 8; // この数字を 1 ～ 16 に変えてみよう

dragon(order, 200, 0, 1);

例7：配列を使った例

scores = [43, 54, 32, 98, 10, 100]; // 点数リスト

line(0, 200, 250, 200);

for (i=0; i<scores.length; i = i+1) {
  x = i*20 + 10;
  y = 200;

  // scores[0], scores[1], ... の棒グラフを作成
  // 0 から始まることに注意
  rect(x, y, 10, -scores[i]);
}

例8：渦巻き2

関数 go(n) と right(d) を定義．

px = py = 128;
pd = 0;

void go(n) {
  dx = cos(pd)*n;
  dy = sin(pd)*n;
  line(px,py,px+dx,py+dy);
  px = px+dx; py = py+dy;
}

void right(d){
  pd=pd+d;
}

for(i=0;i<100;i=i+1){
   go(2*i);
   right(1);
}

例9：マンデルブロ集合（フラクタル）

描画にちょっと時間がかかります．

background(0, 0, 0); // 背景色を黒に

m = 100;

// 250 回の繰り返し
for (y = 0; y < 250; y = y + 1) {
  for (x = 0; x < 250; x = x + 1) {
    xx = 3*x/250 - 2;
    yy = 3*(1 - y/250) - 1.5;

    zx = 0;
    zy = 0;
    for (i = 0; zx*zx + zy*zy <= 4 && i < m; i = i + 1) {
      w = zx*zx - zy*zy + xx;
      zy = 2*zx*zy + yy;
      zx = w;
    }
    if (i == m) {
      stroke(0, 0, 0);
    }
    else {
      stroke(random(255), random(255), random(255));
    }
    point(x, y);
  }
}

使い方

図形の書き方

Processing プログラムの書き方（のごく初級）

注意事項