Last updated: 2016 -2014. Kajiyama                [ 目次に戻る ]

ソースファイルの基本構造


  ・参照   Processingコーディング規約
  1. Processingの開発環境

    1. 開発環境のエディタでソースファイル(プログラム)を書きプログラムを実行する.

    2. 開発環境のエディターで日本語の文字を使うには,初期設定でProcessingの言語を「MSゴシック」などの日本語にする.

    3. 開発環境の使用方法


      Processing 開発環境(PDE)
      1. Processingのアイコン をクリックし起動すると、メニュー画面が現れる.

      2. 教材のソースファイルをコピーし,これをエディタ部分に貼り付ける.

        ・ソースファイルを正確にコピーする.正確にペーストする.

         これができないことが,初心者のエラーの原因である.

      3. 作成したソースファイルは必ず保存する.

      4. 次に,ソースファイルを実行すると,その結果が表示される.

      5. ソースファイルに文法上の間違いがあれば,

        どの行が間違っているかメッセージ領域とコンソール領域に示す.

        ・初心者にとって最初はチンプンカンプンであるが,先に進めば役に立つ.

      6. ソースファイルを修正し,再度実行する.


  2. ソースファイルの基本構造

    1. ソースファイルはプログラム言語で決められた単語で作成した文章である.

      この文章の力でコンピュータを働かせる.失敗するのはあなたの文章力のなさが原因である.


    2. Processing は行指向の言語である: ソースファイルの頭から1行ごと順番に処理を行う

      1. Processingは行単位に,行頭から順に処理を進めていく言語である.

      2. ソースファイルの式や処理は1行に記述し,文頭に始まり,文末で終わるようにする.

      3. 一つの処理が複数行にわたることは避ける.

      4. この式や処理の文末には必ず,[ ; ]セミコロンを置く.


    3. Processingが使用する文字と記号と言語

      1. アスキー文字と英単語

        1. ソースファイルで使用する文字はアスキー(ASCII: American Standard Code for Information Interchange)文字である.

        2. 使用する単語は英語である.

        3. アスキー文字は,コンピュータで使われる半角の英数字や記号で構成される文字であり,

          日本語を対象にしていないので,当然,日本語の文字や全角の英数字・記号は含まれない.スペースも半角を使用する.

        4. 欧米人が発明したコンピュータで,日本語,韓国語,中国語を使用する場合には,知恵が必要になる.

      2. よく出てくる記号

        記号呼び名 記号呼び名 記号呼び名
        /スラッシュ(slash) //ダブルスラッシュ(double slash) バックスラッシュ(backslash)
        ,カンマ(comma) .ピリオド(period) !エクスクラメーション
        (exclamation mark)
        :コロン(colon) ;セミコロン(semicolon) |バーティカルバー(vertical bar)
        *アスタリスク(asterisk) +プラス(plus sign) -マイナス(hyphen / minus)
        'シングルクォート(single quote) "ダブルクォート(double quote) ~チルダ(tilde)
        スペース(space)全角は使わない @アットマーク(commercial at/ at sign)
        [ ]大かっこ・角かっこ(square brackett) { }中かっこ(curly bracket) ( )小かっこ(parenthesis)

        注意 バックスラッシュは,windowsでは「\」表示になる.


      3. Processingの「日本語」文字の設定

        1. キャンバス(実行画面)で日本語を描くためには,ソースファイルで使用する VLWフォーマットのフォントを日本語にする.

        2. 開発環境のエディターで日本語の文字を使うには,初期設定でProcessingの言語を「MSゴシック」などの日本語にする.

        3. この二つの設定は別々に行う.


    4. ソースファイルの構成

      1. ソースファイルは,次の2つで構成する.最初はこのスタイルを使う.

          @ 初期化関数 setup( ){ } と

          A メインループ関数 draw( ){ }

          { } を波カッコと呼び,波カッコで囲まれた部分をブロックという.



      2. 初期化関数 void setup ( ) { } は,Processingを初期化する処理を行う.

        ・ 最初に,直前に実行したソースファイルの内容を消去し, { } のブロック内に書いた処理を一度だけ実行する.


      3. メインループ関数 void draw ( ) { } は,setupで初期化処理した後に,

        { } のブロック内に書いた処理を行い,ストップするまで計算や描画を繰返し実行する.


      4. Processingのアニメーション(動画)は1秒間に60回繰返し描画するメインループ関数 void draw ( ) { } を使用する.


      //ソースファイル
      
      void setup ( ) {      // setup() runs once
        size(500, 500);//キャンバスの大きさを500X500にする
        textSize (10); //フォントの表示サイズ14にする命令
        fill(255,0,0); //文字の色を赤にする命令
      }
      
      int x1 = 10;//最初のHello worldの座標
      int y1 = 10;
      int x2 = 440;
      int y2 = 10;
      
      void draw ( ) { // draw() loops forever, until stopped
      //座標(x1, y1)の位置にストップを押すまでHello worldを描く
        text("Hello world", x1, y1);
      //座標(x2, y2)の位置にストップを押すまでHello worldを描く
        text("Hello world", x2, y2);
        x1 = x1 + 10;//フレームごとに座標を10移動する
        y1 = y1 + 10;
        x2 = x2 - 10;
        y2 = y2 + 10;
      }
      
      実行結果
      
      


  3. ソースファイルで使用する単語

    1. 関数(function)

      1. ソースファイルで使用する英単語,void,size(500, 500),textSize (10), fill(255,0,0), draw ( ),など

        これら英単語は,関数と呼ばれる.size(500, 500)はキャンバスの大きさを500X500にするという命令である.

      2. 英単語のカッコの中の数字 500,500 はパラメータ(引数:parameter)と呼ばれる.

        ・数字の値を変えることにより命令の内容・情報を決めていく.

      3. Processingが準備している関数は,この日本語サイト英語サイトで調べるように.

        ・関数の使用法がわからなくなったら,Processing の統合開発環境の「 Help 」メニューで関数を検索する習慣を持つ.

        ・関数をクリックすると使い方の例文が詳しく紹介されている.

      4. 関数は自作することもできる.さらに学習を進めるように.

      5. 関数の少し詳しい説明は必要ですか


    2. 変数(variable)

      1. ソースファイルで使用するHello worldを置く場所を決めるための座標x1,y1,x2,y2を変数という.

        この値は繰返し変化していく.

        変化していく値を,繰り返し書かずに,記号化し変数としてソースファイルを見やすくわかりやすくするのが作法である.

      2. 変化していく値を一定期間保存するための場所を,前もって確保し,その場所に小文字で固有の名前を付け他と区別する.

      3. 変数の少し詳しい説明は必要ですか


    3. 演算子(operator symbol)

      1. このソースファイルの中で x1 = x1 + 10, y1 = y1 + 10, x2 = x2 - 10, y2 = y2 + 10 の四則演算を行っている.

        使われる四則演算の記号を演算子という.

        演算子には四則演算子,比較演算子,論理演算子,単項演算子,算術代入演算子などがある.

        ・Processingで使われる演算子 参照1  参照2  参照3  参照4

      2. この演算子は,算数や数学の記号とは用法が異なり,右辺の計算結果を左辺の変数に代入するという内容である.

        x1 = x1 + 10は,計算式の右辺のx1に10を足し,その結果を左辺のx1の値にするという計算手続きを示している.

      3. サンプルには通常見慣れない記号も出てくるので,必ず調べること.

        単項演算子  ++ インクリメント(増分),-- デクリメント(減少分)

        算術代入演算子  += 加える,-= 引く,*= かける,/= 割る


    4. コメント・注釈(comment)

      1.  ソースファイルで使う変数の内容やプログラムの目的など,後でわかるように,注釈をソースファイルの中に入れる.

        ・注釈には,その1行だけに限定する // で始まる「コメント」文と,

         複数行にわたって注釈できる /* 〜 */ で囲んだ「ブロックコメント」の二つの形式がある.

        ・「コメント」と「ブロックコメント」は,プログラムの実行内容には反映されない.


      2. // コメント

        float a = 2.0;
        float b = 4.0;
        
        println( a + b );     // 足し算(加算)
        println( (a - b) );     // 引き算(減算)
        
        println("a-b= " + a*b + "です");     // 掛け算(乗算)
        println("a/b= " + a/b + "です");      // 割り算(除算)
        


      3. /* ブロックコメント */

        /*
         //コメントが一行だけの注釈文に対し
         ブロックコメント[/*〜*/]は,
         /*〜*/で囲まれた複数の行を,プログラムと見なさないただの注釈文として扱う.
        */

[ 目次に戻る ]