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

コピペで 「マウスで文字を書く」ソースファイルを作成・実行・保存



  1. キャンバスの2次元座標系

    ・キャンバスの二次元の表示画面には,

     それぞれのピクセル(画素)の位置にXY座標が与えられている.

    ・この座標系は,算数や数学で習ったものとは,

     Y軸の向きが違うので,注意が必要である.

  2. 操作画面の新規[New] ボタンをクリックし,新たに白紙の操作画面を表示する.


    
    
    統合開発環境
    
     ・ この操作画面の名前「sketch_150507d」は,
    
         今日の日付(sketch _年月日d)である.
    
     ・ この日付の名前が,新規作成するソースファイルの
    
         フォルダーとファイルの名になる.
    


  3. 次のソースファイルを,白紙の操作画面にコピペする.

    ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

    ソースファイル
    //ファイル名:sketch_150507d.pde 
    //マウスボタンを押す間、カーソルの軌跡を線で描く
    
    void setup() {
      size(500, 500);//キャンバスの大きさ
      strokeWeight(10);//線の太さを10ピクセルに
    }
    
    void draw() {
    
     // マウスで線を描く
      if (mousePressed)//マウスを押した時の座標を読み取る.
      {
        /*マウスボタンを押すたびに、この処理を実行する
         pmouseX/pmouseY (1フレーム前のマウス位置の取得)
          mouseX/mouseY (マウス位置の取得) */
       //1フレーム前のマウス位置から現在のマウス位置まで線を描く
        line(pmouseX, pmouseY, mouseX, mouseY);
      }
    
    //save("drow_fig_08.jpg");// 実行結果を画像で保存する
    }
    
    
    エディタに貼付

  4. 実行[Run]すると「実行画面」が現れる.

    ・ ソースファイルをコピペしたのを確認し,ツールバーの 実行[Run] ボタンをクリックする.

    ・ ソースファイルの実行結果が,新たに,別の場所で作成された「実行画面」のなかに表示される.

    
    



  5. ソースファイルの保存と確認

    ・ 保存[Save] ボタンをクリックし,ソースファイルをデータフォルダ「Sketchbook」の中に保存する.

    ・ 保存した[sketch_150507d]フォルダを確認するために,メニュー「Sketch」->「Show Sketch Folder」を選択する.

    ・ 「ドキュメント」->「Processing」フォルダーに[sketch_150507d]フォルダと内容が示される.

    ・ [sketch_150507c]フォルダには2つのデータがあり,ソースファイル「sketch_150507d.pde」と実行結果の画像一枚を確認できる.




  6. プログラムを公開するためにWindows版の実行ファィルを出力する.

    ・ ツールバーの 出力[Export Application] を選択し,出力用の設定画面を表示する.

    ・ 設定画面にチェックを入れ,出力「Export」をクリックする..

    ・ 作成した[sketch_150507d.pde]の実行ファイルを確認するために,メニュー「Sketch」->「Show Sketch Folder」を選択する.

    ・ windows用の32ビット版と64ビット版が作成されたか確認する.

    
    
    出力用設定画面
    
    
    

[ 目次に戻る ]