Processingで学ぶ 実践的プログラミング専門課程

第1回 開発環境の使い方と基本的文法のおさらい

この記事を読むのに必要な時間:およそ 2.5 分

導入

今回と次回,2回にわたってProcessingの基本的な使い方をおさらいします。特に新しいコンピュータサイエンスを必要としない内容です。おさらいをしたら演習問題に取り組んでください。

演習は簡単なものから難しいものまで用意しています。なるべく自力で演習の要求するsketchを作成し,それから解答を参照してください。

なお,この連載で初めてProcessingに触れる方は,まず『Getting Started with Processing』⁠以下,GSWPと略します。邦訳はこちらをご一読ください。1時間もあれば目を通すことができる,大変やさしく分かりやすい書籍です。

お詫び:
記事公開時に書籍ダウンロードサイトへのリンクを張っていましたが、こちらは正規に取り扱ったサイトではないと読者の方から連絡を受けました。筆者が再度確認したところ指摘の通りでしたので、該当部分を削除しました。関係各位・読者の方にはお詫びいたします。

展開

Processingの公式サイトのチュートリアルを読んで,Processingの開発環境(今後はPDEと呼びます)の使い方を身につけてください。英語ですが,簡単に書かれています。

[作業] PDEの使い方を身につけよう。

Hello, World!

Processingにとって最も簡単なプログラムは,次のように書けます。

PDEを起動して,次のコードを入力してください。 座標(50,50)に幅80,高さ80の円を描くメソッドです。 ファイル名はDrawAnEllipse.pdeとしましょう。

DrawAnEllipse.pde

ellipse(50, 50, 80, 80);

このコードはGSWPの9ページに記載されています。

実行(RUN)ボタンをクリックすると,図1.1のような出力が得られます。

図1.1 DrawAnEllipse.pdeの出力結果

画像

[作業] 円の直径を100ピクセルに変更してください。

左側の円が表示されているウィンドウを「ディスプレイウィンドウ」と呼びます。このようなProcessingのウィンドウ各部の名称は,図1.2を参照してください。

図1.2 Processingの開発環境

画像

もちろん,古典的なHello,World!プログラムも簡単です。

HelloWorld.pde

print("Hello,World!");

この場合,Hello, World!の文字列は,ディスプレイウインドウではなくPDE下部のコンソールに表示されます(図1.3)⁠

図1.3 HelloWorld.pdeの出力結果

画像

いかがでしょうか。Processingが敷居の低いプログラミング言語であることを感じられましたか?

[作業] 読者の氏名をローマ字でコンソールに表示しましょう。

Processingの文法,一巡り

読者はCやRuby,BASIC等,何らかのプログラミング言語の入門書を一通り読んだことがあるという前提で,Processingの文法が一通り入っているコードを紹介します。

なお,今後この連載ではProcessingで書かれたソースコードのことをsketch(スケッチ)と呼びます。

次のコードForAndIf.pdeは,GSWPのP.43に記載されているコードに手を加えたものです。このsketchを入力して実行してください。エラーなく実行できるでしょうか(図1.4)⁠

ForAndIf.pde

size(480, 120);
strokeWeight(8);
for ( int i = 20; i < 400; i += 60) {
  if ( ((i-20)/60 % 2) == 0 ) {
     stroke(255,0,0);
  } else {
     stroke(0,255,0);
  } 
  line(i, 40, i + 60, 80);
}

図1.4 ForAndIf.pdeの出力結果

画像

このコードを解説します。

  • size(480, 120)はディスプレイウインドウの大きさを設定するメソッドで,ここでは幅480ピクセル,高さ120ピクセルに設定しています。
  • strokeWeight(8)は線の太さを8ポイントに設定するというメソッドです。
  • for(A;B;C){ D }は繰り返しの構文です。Aは初期条件。Bが繰り返し実行の継続判定。Cが実行1回終了後におこなう処理。そしてDが繰り返される命令ブロックです。
  • if(A){ B } else { C }は条件判断文です。条件Aが成り立てば命令ブロックBが実行され,Aが成り立たなければ命令ブロックCが実行されます。
  • stroke(255,0,0)は線の色を設定するメソッドで,3つの引数はそれぞれ色の三原色,赤・緑・青の強さを表し,この順に整数値で指定します。0が最も弱く,255が最も強い値になります。
  • line(i,40, i+60, 80)が線を描くメソッドです。引数は線の始点と終点の(x,y)座標です。

プログラムの動きを作る仕組みを 制御構造といいます。大きく3つに分類されます。参考文献『プログラム書法』のP.42から読んでみることをお勧めします。

順次 : 上から下へ単純にコードを実行する構造です。
選択 : if文で作られる構造です。 
反復 : for文やwhile文で作られる制御構造です。

for文とif文がどのように作用して動作するのか,トレースをおこなってください。

トレースとは,コード中の変数やオブジェクトの値を追跡することです。一覧表を作り,実行ステップにしたがって値を更新します。トレース作業をすることで,コードに対する理解が深まります。意図した動きをするかどうかの確認のために,努めておこないましょう。

[作業] ForAndIf.pdeをトレースしましょう。

[作業] ForAndIf.pdeを変更して,左下がりの斜線を7本表示しましょう。

トレースすると表1.1のように各値が更新されていることがわかります。

表1.1 トレースの例

実行ステップ i (i-20)/60%2 stroke
1 20 0 赤 (以後R)
2 80 1 緑 (以後G)
3 140 0 R
4 200 1 G
5 260 0 R
6 320 1 G
7 380 0 R
8 440 実行無し 実行無し

手を動かして紙の上でトレースし,体でコードの動きを確認すると,わからないと感じられていたコードが不思議と納得できます。⁠プログラムが読めない,わからない」と感じる人は,そのコードを2度3度とトレースしましょう。登山者が山頂でひらけた景色に感動するように,⁠はっ!」とする感覚を味わうことでしょう。

著者プロフィール

平田敦(ひらたあつし)

地方都市の公立工業高等学校教諭。趣味はプログラミングと日本の端っこ踏破旅行。やがては結城浩氏のような仕事をしたいと妄想している。

Twitter : @hirata_atsushi

コメント

  • Re:

    コメント#1です。ご対応いただきまことに幸いです。
    もう少し別の言い方・連絡手段があったかと思い、恥ずかしく思っておりましたが、
    今後もいち読者として楽しんでいけたらと思います。

    Commented : #4  コメント#1 (2014/09/26, 03:12)

  • 【お詫びとお礼】ご指摘ありがとうございました。

    ご指摘ありがとうございました。

    おっしゃる通りの状況ですので早速記事を修正させて頂きました。
    インターネット上にアップされている著作物の利用に関して、もっと注意深く行動すべきでした。
    今回の事を十分に反省し、今後リンクを記載する場合には正当なものかどうか確認の上掲載させて頂きます。

    ご指摘に関してお礼申し上げますとともに、今回ご心配をおかけした事、関係の方々には不快な思いをさせてしまいました事をお詫びいたします。申し訳ありませんでした。

    Commented : #3  平田敦 (2014/09/25, 17:56)

  • ご指摘について

    ご指摘いただきまして、ありがとうございます。
    第0回にも記載の通り、原著者からコード利用は確認を取っておりますが、it-eboooks.infoについては確認不足でした。
    該当リンク、文章は削り、取り急ぎの対応とさせていただきました。

    Commented : #2  gihyo.jp編集部 (2014/09/25, 10:37)

  • ダウンロードリンクの案内について

    こんにちは。
    月2回の遊びにしよう、と新たな連載を楽しみにさせていただいております。
    ちょっと気になることがあり、コメントいたします。

    it-ebooks.info を案内するのは、出版社のウェブサイトとして不適切なことではないでしょうか。
    まず、it-ebooks.info は、一見よさそうなサイトなのですが、プログラミング Q&A サイトのStackOverflow にて著作権違反ではないかという議論になり、結果、このドメインを含む投稿はできなくなりました (下記で確認できます)。

    Should we add it-ebooks.info to the Stack Overflow URL blacklist?
    http://meta.stackoverflow.com/questions/255032/should-we-add-it-ebooks-info-to-the-stack-overflow-url-blacklist

    また、O'Reilly のサイトでも有料ダウンロード販売されているものです。
    http://www.oreilly.co.jp/books/9784873115153/

    技術評論社様の書籍にはお世話になっており、同様の形で違法アップロードできていたら一人のファンとして大変悲しいです。
    とりあえず、上記の状況をご確認いただきたく存じます。

    また、もし原著者が許可したアップロードである場合は、このコメントは間違いであり杞憂なのですが、
    その旨リンクとともに記述していただければ幸いです。
    案内していいと原著者から言われた・ほのめかされたなどの事情でしたら、書きにくいと思いますので、gihyo.jp のサイトでダウンロード可能にするなどしていただけたらと思います。

    Commented : #1  通りすがり (2014/09/25, 03:43)

コメントの記入