P5.jsの続きです。javascriptで絵を描いて見ます。意外と簡単でした。
資料はこちら → p5_jsその2
p.1 円は「circle」で描きますが楕円の「ellipse（横軸、縦軸、横幅、縦幅）」でも描けます。「function draw(){」と「}」で囲まれた部分が、1分間に60回実行されます。横がｘで左端が０，右端が400です。インクリメント演算子「++」を変数xの後ろに「x++;」とすると、１つずつxが増えていきます。「--」とすると１つずつ減っていきます。変数の前にインクリメント演算子をつける場合もあります。演算は一緒ですが、どの部分に演算子が掛かるか注意が必要です。最初x=0にしてありますが、「function draw(){」内の「x++;」でxの値が１つづつ増えていきます。では、再生ボタン▶を押してみてください。円が右側に移動していきます。
p.2「x++;」の代わりに「x+5=;」とするとxが５個ずつ増えた動きになります。次に、「x>400」となったら、x=0と設定すると、円はx=0にリセットされて、動き出します。
p.3 「rect（横軸、縦軸、横幅、縦幅）」とすると四角形が描けます。y方向にランダムな数値を加えてやるとy方向に図形を振動させることができます。
p.4 上述の基本が理解できれば、絵を描くことが可能となります。先ず方眼パターンを「for」文を用いて作成します。縦横に10ずつおきに線を描きます（４～７行）。続いてパーツ毎に色と形状と位置を指定するだけで絵が描けます。「fill(R, G, B)」でカラーコードを指定して色を付けます。三角形は「triangle」で頂角の座標を入れます。順番は、積み重ねですので、下のパーツからコードを書き込みます。
明日は、この図形を動かしてみます。