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

[演習]     指先でランダムに変化させる長方形

   画面上で,マウスを上下左右に動かしてください.


  1. 最初は,カーソルの位置を読み取り,その位置に長方形を描くプログラム作成する.

       画面上で,マウスを動かしてください.
    
    
    
    //  Processingのプログラム
    
    void setup ( ) {
      size(400, 250);//キャンバスの大きさ(横幅, 高さ)
      background(255);//キャンバスの背景色を白(255)
      frameRate(15);//1秒間に画面を15回描画する
    }
    
    void draw( ) {
    
      rect(mouseX, mouseY, 30, 20);
      //長方形(x座標, y座標, 横幅, 縦幅)
      //カーソルの位置を読み取りそこに,長方形を描く
    }
    


  2. 長方形の内部を赤,縁を青にするプログラムを付け加える.

       画面上で,マウスを動かしてください.
    
    
    
    //  Processingのプログラム
    
    void setup ( ) {
      size(400, 250); //キャンバスの大きさ(横幅, 高さ)
      background(255);//キャンバスの背景色を白(255)
      frameRate(15);//1秒間に画面を15回描画する
    }
    
    void draw( ) {
    
       fill(255, 0, 0, 255);
         //面の色(赤, 緑, 青, 透過度)
       stroke(0, 0, 255, 255);
         //線の色(赤, 緑, 青, 透過度)
    
     rect(mouseX, mouseY, 30, 20);
      //長方形(x座標, y座標, 横幅, 縦幅)
      //カーソルの位置を読み取りそこに,長方形を描く
    }
    


  3. 長方形の内部と縁の色がランダムに変化するプログラムに変える.

       画面上で,マウスを動かしてください.
    
    
    
    //  Processingのプログラム
    
    void setup ( ) {
      size(400, 250); //キャンバスの大きさ(横幅, 高さ)
      background(255);//キャンバスの背景色を白(255)
      frameRate(15);//1秒間に画面を15回描画する
    }
    
    void draw( ) {
    
       fill(random(255), random(255), random(255), random(255));
            //面の色(赤, 緑, 青, 透過度)
       stroke(random(255), random(255), random(255), random(255));
            //線の色(赤, 緑, 青, 透過度)
    
      rect(mouseX, mouseY, 30, 20);
      //長方形(x座標, y座標, 横幅, 縦幅)
      //カーソルの位置を読み取りそこに,長方形を描く
    }
    


  4. 長方形の横幅と縦幅をランダムに変化するプログラムに変える.

       画面上で,マウスを動かしてください.
    
    
    
    //  Processingのプログラム
    
    void setup ( ) {
      size(400, 250); //キャンバスの大きさ(横幅, 高さ)
      background(255);//キャンバスの背景色を白(255)
      frameRate(15);//1秒間に画面を15回描画する
    }
    
    void draw( ) {
    
       fill(random(255), random(255), random(255), random(255));
            //面の色(赤, 緑, 青, 透過度)
       stroke(random(255), random(255), random(255), random(255));
            //線の色(赤, 緑, 青, 透過度)
    
      rect(mouseX, mouseY, random(1,30), random(1,20));
      //長方形(x座標, y座標, 横幅, 縦幅)
      //カーソルの位置を読み取りそこに,長方形を描く
    }
    

[ 目次に戻る ]