Processing入門講座の第2弾は、Processingの基本的な操作と簡単な線や円などを描くことを学習します。初心者にも簡単に使えるProcessingの良さがわかるとおもいます。
Processing入門講座 第２弾 Processingの基本を学習しよう
このProcessing入門講座の第2弾は、基本的な操作と簡単な線や円などを描くことを学習します。簡単ですので、早速、Processingを起動しましょう。
上記画面で三角の再生ボタンを押してみましょう。何もないウインドウが表示されます。何もプログラムを書いていないのに、ウインドウを表示する事ができました。
簡単なものを描いてみよう
四角形を描く
rect(0,0,100,100);先ほどの画面説明に書いてあるテキストエディタの所にコードを書いて実行してみよう。実行はツールバーの所の三角マークを押すことによって実行がされます。
四角形を描くには、始点を指定して、幅と高さを指定すれば描けます。（赤色の囲いはわからないと困るのでここに描いてありますよという意味です。）
座標ｘ：始点になるｘ軸の座標
座標ｙ：始点になるｙ軸の座標
width ：幅
height ：高さ
線を引く
line(0,0,100,100);線を描くには、始点となる座標と終点になる座標を指定してあげるだけで描くことができます。
座標ｘ１：始点になるｘ軸の座標
座標ｙ１：始点になるｙ軸の座標
座標ｘ２：終点になるｘ軸の座標
座標ｙ２：終点になるｙ軸の座標
楕円形を描く
ellipse(50,50,50,80);楕円形を描くには、中心座標と、横軸の幅と縦軸の高さを指定すれば描くことができます。
座標ｘ１：中心点になるｘ軸の座標
座標ｙ１：中心点になるｙ軸の座標
横軸の幅：中心点からの横軸の幅
縦軸の幅：中心点からの縦軸の高さ
円を描く
ellipse(50,50,50,50);円は楕円形を描いた時と同じ関数が使われています。命令が同じです。違うのが、横軸の幅と縦軸の高さが同じという事です。
図形を重ねる
ellipse(50,50,50,50);
ellipse(50,50,50,80);先に円を描いてから、楕円形を描くと楕円形だけで円が表示されていません。
ellipse(50,50,50,80);
ellipse(50,50,50,50);今度は、プログラムを一度消して、順番を変えてみましょう。楕円形を描いてから、円を描くとどちらも表示されました。これは、描く順番が関係しています。後で書いたものは、先に書いたものの上に重ねられているのがわかります。
先ほどのプログラムも、楕円形に重なって見えなくなってはいますが、描写はされています。図形が重ねられているだけです。円が楕円形にすっぽりと隠れていたという事ですね。
実行画面の幅と高さ
ellipse(50,50,50,80);
ellipse(50,50,50,50);
line(50,50,width,height);
ellipse(50,50,50,80);
ellipse(50,50,50,50);
line(50,50,100,100);widthとheightは、指定すると実行画面のサイズ幅とサイズ高になる。特別な言葉になります。もちろん、今の実行画面のサイズである、幅１００、高さ１００にしても同じサイズになります。戻しておきましょう。
実行画面のサイズを指定する
size(300,300);
ellipse(50,50,50,80);
ellipse(50,50,50,50);
line(50,50,100,100);今度は実行画面のサイズを変更してみましょう。現在、幅が１００、高さが１００です。サイズを３倍の３００と３００に変更しました。表示される面積が３×３の９倍の広さになりました。
width：実行画面の横軸の幅
height ：実行画面の縦軸の高さ
図形の塗りつぶし
size(300,300);
ellipse(50,50,50,80);
ellipse(50,50,50,50);
line(50,50,100,100);
rect(0,0,300,300);実行画面のサイズと同じサイズで四角形を描いてみましょう。塗りつぶされて白くなってしまいました。図形を描くと常に塗りつぶされるのは、少し嫌ですね。
図形の塗りつぶしを止める
size(300,300);
ellipse(50,50,50,80);
ellipse(50,50,50,50);
line(50,50,100,100);
noFill();
rect(0,0,300,300);
塗りつぶしをされないようにします。最後の四角形を描く前に四角の中を塗りつぶさないように指定します。すると、先ほどは真っ白になって何も見えませんでしたがしっかりと見えるようになりました。
この指定をした後は、図形を塗りつぶさないようになります。
size(300,300);
ellipse(50,50,50,80);
ellipse(50,50,50,50);
line(50,50,100,100);
noFill();
rect(0,0,300,300);
rect(150,150,50,50);小さな図形を描いても中は塗りつぶされてはいません。プログラムは上から順番に実行されるのでnoFill関数を実行した後は塗りつぶれていません。その前に、実行している楕円形や丸は塗りつぶれているのがわかると思います。
塗りつぶしの色を指定する
size(300,300);
ellipse(50,50,50,80);
ellipse(50,50,50,50);
line(50,50,100,100);
noFill();
rect(0,0,300,300);
fill(255,0,0);
rect(150,150,50,50);図形の塗りつぶしのための指定をします。光の三原色の指定をそれぞれ赤青緑に値を与えています。今回は、赤色になるように３つを配合しています。
黒色：０，０，０
赤色：２５５，０，０
緑色：０，２５５，０
青色：０，０，２５５
白色：２５５，２５５，２５５
ｒ：光の三原色の指定で赤色の指定
ｇ：光の三原色の指定で緑色の指定
ｂ：光の三原色の指定で青色の指定
今回は、ここまでになります。簡単に線や丸を描くことができました。
どんな感想を持たれましたか。簡単で驚かれたのではないでしょうか。
次回はもう少しプログラム的なことをやっていこうと思っています。では、次の講座でお会いしましょう。
コメント