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

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

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


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

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

[ 目次に戻る ]