もどる
プログラミング入門
目標
- プログラミングを体験し，プログラムの作成から実行までの基本的な流れを学習する．
- Processing：データのビジュアル表示等に使われるプログラミング言語
実習の前に
- プログラミングに対する課題はありません．
- 本日の課題はひとつ前のページを見てください．
学習のポイント
- 変数，配列，制御構造（選択：if文，繰り返し：for文）
具体的な実習内容
ゴールとなる画像（動画）
- サンプル動画あり（１）
- ゴールの画像（動画）に意味はありません．
- 以下の簡単なソースコード１から順番に説明します（ソースコードをコピペして実行結果を確認する）．
実習の準備
ソースコード１：円を描く
- size()：実行画面の大きさ
- background()：背景色
- 色は光の三原色（RGB）で256段階で指定する
- noStroke()：図形に枠を付けない
- ellipse()：円を描く（位置と大きさの指定）
size(800,800);
background(0,0,0);
noStroke();
ellipse(400,400,100,100);
ソースコード２：複数の円を描く
- 変数を理解する（a_x, a_y, b_x, b_y）．
- fill：円の色を指定
size(800,800);
background(0,0,0);
noStroke();
int a_x = 400;
int a_y = 400;
fill(255,255,255);
ellipse(a_x,a_y,100,100);
int b_x = 500;
int b_y = a_y;
fill(255,255,0,100);
ellipse(b_x,b_y,200,200);
ソースコード３：繰り返し（for文）
size(800,800);
background(0,0,0);
noStroke();
int x = 400;
fill(71,234,126,100);
for( int y = 0; y <= 850; y += 50 ){
ellipse(x,y,100,100);
}
ソースコード４：繰り返し（for文）
size(800,800);
background(0,0,0);
noStroke();
int x = 400;
for( int y = 0; y <= 850; y += 50 ){
fill(71 + y*0.3, 234,126,100);
ellipse(x,y,100,100);
}
ソースコード５：動きをつける
- setup() と draw()
- frameRate()：１秒間に描画するフレーム数
- draw()内の１行目を復帰させる（background(0,0,0);）
void setup(){
size(800,800);
background(0,0,0);
noStroke();
frameRate(10);
}
int y = 0;
void draw(){
// background(0,0,0);
int x = 400;
y += 50;
fill(71 + y*0.3, 234,126,100);
ellipse(x,y,100,100);
}
ソースコード６：位置を変えながら何度も円と落とす
- if( y > 850 )：下まで落ちたら，y座標を上に戻す
- if( x > 700 )：右まで進んだら，左へ戻す
void setup(){
size(800,800);
background(0,0,0);
noStroke();
frameRate(10);
}
int y = 0;
int x = 100;
void draw(){
background(0,0,0);
y += 50;
if( y > 850 ){
y = -50;
x += 100;
}
if( x > 700 ){
x = 100;
}
fill(71 + y*0.3, 234,126,100);
ellipse(x,y,100,100);
}
ソースコード７：円の大きさを変えながら
void setup(){
size(800,800);
background(0,0,0);
noStroke();
frameRate(10);
}
int y = 0;
float x = 100;
float size = 100;
void draw(){
background(0,0,0);
y += 50;
if( y > 850 ){
y = -50;
x = random(100,700);
size = random(10,500);
}
fill(71 + y*0.3, 234,126,100);
ellipse(x,y,size,size);
}
ソースコード８：複数の円を一緒に落とす
- 配列
- int[] x = {0,100,200,300,400,500,600,700,800,900};
- ellipse(x[i], y,size,size);
void setup(){
size(800,800);
background(0,0,0);
noStroke();
frameRate(10);
}
int y = 0;
int[] x = {0,100,200,300,400,500,600,700,800,900};
float size = 100;
void draw(){
background(0,0,0);
y += 50;
if( y > 850 ){
y = -50;
}
fill(71 + y*0.3, 234,126,100);
for( int i = 0; i < x.length; i += 1){
ellipse(x[i], y,size,size);
}
}
ソースコード９：円に番号を振る
- ソースコード６とほぼ同じ
- text(n,x,y) を追加．円と同じ位置に番号(n)を描く
void setup(){
size(800,800);
background(0,0,0);
noStroke();
frameRate(10);
textSize(48);
}
int y = 0;
int x = 100;
int n = 1;
void draw(){
background(0,0,0);
y += 50;
if( y > 850 ){
y = -50;
x += 100;
}
if( x > 700 ){
x = 100;
}
fill(71 + y*0.3, 234,126,100);
ellipse(x,y,100,100);
fill(255,255,255);
text(n,x,y);
n += 1;
}
ソースコード10：完成
- ソースコード８＋ソースコード９＋α
- 乱数を使って，ゆらぎを表現
void setup(){
size(800,800);
background(0,0,0);
noStroke();
frameRate(10);
textSize(9);
}
int y = 0;
int[] x = {0,100,200,300,400,500,600,700,800,900};
float size = 100;
int c = 0;
int n = 1;
void draw(){
if(c == 3){
background(0,0,0);
c = 0;
n = 1;
}
y += 50;
if( y > 850 ){
y = -50;
c += 1;
}
for( int i = 0; i < 10; i += 1){
float r1 = random(0,50);
float r2 = random(-80,0);
if( random(0,2) > 1 ){
fill(71 + y*0.3+random(-50,50) ,234+random(-50,50),126+random(-50,50),100+random(-50,50));
ellipse(x[i]+r1,y+r1,size+r2,size+r2);
fill(255,255,255);
text(n,x[i]+r1,y+r1);
n += 1;
}
}
}
演習
課題
もどる