Processingサンプルコードをわかりやすく解説【ContinuousLines】

お絵かきプログラミングProcessingサンプルコード解説の第7弾です!
ProcessingをまだPCに導入されていない方は、こちらの記事を参考に導入してみてください!
今回は ContinuousLines というサンプルコードをみてみましょう。

難易度は ★☆☆☆☆ くらい。簡単です!!

注意!説明は全てMac版での画面を示しながら行いますが、Windows版でもほとんど同じものが現れると思います。
わからない箇所があればコメントをください。

とりあえず動かしてみよう

Processnigを起動し、サンプルコードを開きましょう。
ファイル → サンプル と選択し現れたウィンドウで Topics → Drawing → ContinuousLines と選択してください。

このようなスケッチが現れます。ウィンドウの左上にある再生ボタンをクリックして実行してみましょう。

ドラッグしてみると…線を描けます

今回のコードは、「ドラッグで絵を描くコード」です。

コードを読む

とりあえずコードの全貌を確認しましょう。

短い!実際簡単です。

まずコメントから始まっていますね。

クリック、ドラッグすると線が描けるよ。」と言っています。

ではまずsetupの中身を見てみましょう。

setup


sizeは毎度おなじみのウィンドウサイズを指定する関数です。
いつものbackgroundですね。画面全体を塗りつぶします。引数の102は灰色になりますが、値によってその濃さが変わります。気になる方は適当に値を変えて実行してみましょう。

次にdrawを見てみましょう。

draw


これも短いですね。サクッと読みましょう。

stroke描画する線の色を指定する関数です。ここでは引数を255にしていますが、になります。

ifの中身のmouserPressedマウスのクリックボタンが押されているかどうかを表す変数です。ボタンが押されている時はtrue、押されていない時はfalseとなります。
mouseX, mouseY現在のマウスカーソル位置のx座標, y座標です。同様に、mouseX, mouseY直前のマウスカーソル位置のx座標、y座標です。
そしてlineは文字通り線を描く関数です。
2点 (x1, y1)、(x2, y2) の間を結ぶ線を描く場合、引数の取り方は、 
line(x1, y1, x2, y2)
となります。
これにより図のように2点間を結ぶ線(線分)が描かれます。

この線分が無数に繋がることで、曲線を描いているように見えています。

これで終わりです!お疲れ様でした!

さいごに

今回は、ドラッグでの線の描画を扱いました。ユーザーに絵を描かせる手段としてもっともシンプルな構成だったと思います。これを応用して、ユーザーに様々な描画をさせていきましょう!

ではまた次回!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください