こんにちは。 前回、次は図形を描くと書きましたが、よくよく考えるとその前段階ができていなかったので今回はそこから始めます。 それではスタート! まずはなにも考えず左上の方にある再生っぽいボタンを押してみましょう。 こんな感じで、ちまっこい謎のウィンドウが出てきたと思います。これが基本です。 Processingでは、プログラムを書いたら左上の再生ボタンをクリックしてプログラムを動かします。今はまだ何も書いていないので、何もない小さいウィンドウのみ表示されます。 ちなみに、停止するときは再生ボタンの右の停止ボタンを押すか、できたウィンドウの✖ボタンをクリックしてください。 さぁ、このままではあまりにも殺風景というか、そもそも何かを描く場もできていませんね。ウィンドウはもっと大きく表示したいものです。 というわけで、次は図形を描く準備です。以下のプログラムをエディタ(文字を打つところ)に打ち込んでみてください。 size(600,400); background(255,255,255); 打ち込んだら、例のごとく再生ボタンをポチッ。 さっきまでの灰色のちまっとしたウィンドウではなく、全体が白色の少し大きめのウィンドウを表示することができました。 上のプログラムの解説です。 ・size(width,height); ウィンドウのサイズを決めます。widthに入れた数字が横のピクセル数、heightに入れた数字が縦のピクセル数となります。 ・background(red,green,blue); 背景色を決めます。red,green,blueそれぞれに入れた数字がそのまま色の値を表します。何も設定をしない状態(デフォルト)だと、0~255の範囲で設定できます。色についてはまた後日詳しく解説しますね。 今回のプログラムでは、 1.横幅600px、縦幅400pxのウィンドウを作る 2.背景色を白色(red,green,blue全て最大にすると白になる)にする という風に動かしています。これをしないと例の灰色のちびウィンドウしかでてこないので覚えといてください。 ここで少しプログラムの基本について書いときます。 文の最後の「;」はプログラムのお決まりのようなもので、簡単に言うと「ここで区切って読みますよ」的な感じです。忘れると動かないので気を付けましょう。 もう一つ、ここでプログラミングの勉強を挫折する人がかなり多いのですが、パソコンは素直なのでちゃんと言われたとおりにしか動きません。何が言いたいかというと、スペルミスや大文字小文字などのミスがあった瞬間プログラムは動きません。試しに「size」を「sizE」と打ってみてください。ウィンドウ下の方の灰色の部分が赤く染まり「んなもんねぇよ馬鹿野郎」と言ってくるでしょう。 これ、そんぐらい何とかしてくれよと思うかもしれませんが、極解すると「丸描いて~」って言ってるのに「それっぽい風に書いてあったからデータ全部消しといたよ♡」とかやられるみたいなもんです。そういう風に勝手に解釈されないようにちゃんと作られています。慣れればそんなの当たり前じゃんと思うようになるので頑張りましょう。 さて、長々と書きましたがようやく絵を描きます!まずは線を書きましょう! 前のプログラムの次に、下の文を追加してください。 stroke(255,0,0); strokeWeight(5); line(200,200,400,200); すると下のようになると思います。 再び解説。 ・stroke(red,green,blue); backgroundの線バージョン。これ以降に描く線の色を決めます。値の決め方、範囲などは基本backgroundの時と同じ。 ・strokeWeight(weight); 線の太さを決めます。weightに入れた数字のピクセル数の太さにします。 ・line(x1,y1,x2,y2); 線を引きます。座標(x1,y1)と座標(x2,y2)を結ぶように線を引きます。 ここで座標の話。 普通の座標については小学校だか中学校の算数・数学なので割愛。なぜそんな話をここでするかというと、Processingでは普通の座標と比べて座標軸が違います。まぁ他のPC関係のいろいろなツールと似たようなもんです。 Processingでは、画面の左上が原点(0,0)となります。そしてX軸は右向きが正、Y軸は下向きが正となっています。原点の場所とY軸の向きが変わっているので注意が必要です。特にこのY軸の向きが曲者で、三角関数を使おうとしたときいろいろ向きがごちゃごちゃになったりとかするんですよね...え?三角関数って何かって?サインコサインタンジェントです。中学数学なのでググりましょう。その辺のProcessingでの使い方はまた後日。 それでは次に四角形を描きましょう。先ほど線を描く時に追加した3行の文を消して、新たに次の文を書いてください。 stroke(0,0,255); strokeWeight(5); fill(255,0,0); rect(width/2,height/2,200,100); そして再生ボタンをぽちり。 毎度おなじみの解説~。
・fill(red,green,blue); それ以降に描く図形の塗りつぶしの色を決めます。backgroundとかstrokeとかと一緒。 ・rect(x,y,width,height); 四角形を描きます。座標(x,y)を左上隅にした、widthを横幅のピクセル数に、heightを縦幅のピクセル数に設定した四角形を描きます。 一つ前にやったstrokeとstrokeWeightは残していますが、strokeでの色の指定を青にしています。そうした結果は見ての通り。四角形の淵が線として青く描かれていますね。これは他の図形にも言えることで、すべての図形は「線」と「塗りつぶし」で色などを設定します。例外は上の「line」と、「point」という点を書くプログラムです。これらには塗りつぶしはなく、線の指定でいろいろ決めます。 そして見ない単語。プログラム内にwidth,heightと書かれていますね。これは、それぞれ横と縦のウィンドウサイズになります。今回の場合、widthは600、heightは400です。 つまり今回は、「枠線の色は青、太さは5px、塗りつぶしの色は赤の、横幅200px、縦幅100pxの四角形を、左上隅が中央に来るように描く」というプログラムになります。「左上隅が中央に来る」のは、左上隅のX座標をウィンドウの横幅の半分の位置、Y座標をウィンドウの縦幅の半分の位置にすると、自然に中央に来ることになりますね。 さて、長々と書いてしまいましたが今回はここまで。次回はもっといろいろな図形を描いていけたらな~と思います。 ではでは。
0 コメント
こんにちは。中田です。 最近「プログラミングでもっと簡単に見た目が面白い作品を作りたいな」と思い立ち、いろいろ探してみたところどうやら「Processing」なるものがあるらしいことを知りました。 Processingは、アーティスト、デザイナー、学生などでも簡単にプログラミングで視覚的な表現をすることができるプログラミング言語です。めっちゃ簡単にデジタルアートを作れるツールってこと。 ということで、早速導入していきます! まず導入の大まかな手順から。 1.Processingのホームページからダウンロードする。 2.終わり。 はい。終わりです。この導入が超絶簡単なところもまたいいですね。 さすがにこれだけだと怠慢もいいところなので、もう少し細かく説明しますね(笑) まずProcessingのホームページに飛びます。グーグル先生とかで「Processing」と打てば一発で出てきます。 オールイングリッシュですが心配無用。ものすごくわかりやすいところに「Download Processing」という文字が見えますね。そこをクリックします。 クリックしたらこんな感じのページに飛びます。ただ違う箇所が1点。はじめは中央の金額を選択するところが選択されておらず、「Download」の部分に「Donate&Download」とあります。金のない学生の身としては無料で使いたいので画像のように「No Donation」を選択。すると画像と同じようになるので、「Download」をクリックします。 このような画面になります。ここで自分のパソコンのOSの種類を選択します。すると勝手にzipファイルのダウンロードが始まるので待機、ダウンロードが完了したらファイルを開きます。すると... はい、Processingのダウンロードが完了しました。やったね。ここまで5分もかかりません。あ、ダウンロード時間は知らないですよ。 どうせなので起動までいっておきましょう。ダウンロードしたフォルダを開きます。 中身はこんな感じです。1つだけそれっぽいアイコンの「processing.exe」をダブルクリックします。 起動しました。やったね。 ここでいろいろコードを書いて作品を作っていきます。とはいっても、個人的な印象だと他の言語より直感的でやりやすいと思うので、「私プログラミングとか全然わからな~いこわ~い!」とか言う人も大丈夫です。気楽に始めてみましょう。 今回はこのあたりで。次回は実際にコードを書いていこうかなと思います。 点とか線とか三角形とか四角形とか円とかを、プログラミングで描いてみましょう。 それでは。 |