プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
Processing、マウスをドラッグすると四角を描くサンプル
気分転換に作ってみました。
マウスをドラッグすると、ドラッグ開始位置とドラッグ終了位置を結んだ線を
対角線に持つ四角を描くプログラムです。

言葉で説明すると分かりにくいですが、
実際に動かして、ドラッグしてみると、すぐに分かると思います。

ソースコードは、こんな感じφ(--)

int startX, startY, endX, endY;
boolean drawFlg;

void setup(){
    size(640, 480);
    background(255);
    
    //初期値設定
    drawFlg = false;
}

void draw(){
    background(255);
    
    if(drawFlg == true){    //四角を描くよ!に設定されている場合
        int x, y, w, h;
        
        //【開始位置-横】決定
        if(startX < endX){    
            x = startX;
        }else{
            x = endX;
        }
        
        //【開始位置-縦】決定
        if(startY < endY){    
            y = startY;
        }else{
            y = endY;
        }
        
        //【幅】決定
        w = int(dist(startX, 0, endX, 0));
        
        //【高さ】決定
        h = int(dist(0, startY, 0, endY));
        
        //四角を描く
        rect(x, y, w, h);
        
        //対角線を引く
        line(startX, startY, endX, endY);
        
    }
}

void mousePressed(){    //マウスのボタンを押したとき
    drawFlg = false;    //四角を描かないよ!に設定
    startX = mouseX;
    startY = mouseY;
}

void mouseReleased(){    //マウスのボタンを離したとき
    drawFlg = true;    //四角を描くよ!に設定
    endX = mouseX;
    endY = mouseY;
}

ドラッグ開始地点の横位置とドラッグ終了地点の横位置を比較し、
値の小さい方(左にある方)を四角を描くときの【開始位置-横】にしています。

ドラッグ開始地点の縦位置とドラッグ終了地点の縦位置を比較し、
値の小さい方(上にある方)を四角を描くときの【開始位置-縦】にしています。

ドラッグ開始地点の横位置とドラッグ終了地点の横位置の距離を求め
【幅】として使っています。

ドラッグ開始地点の縦位置とドラッグ終了地点の縦位置の距離を求め
【高さ】として使っています。

あとは「rect()」関数を使って四角を描いているだけです。
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:Processing  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事