void setup()
{
  size(400, 400);
  background(255);
  ellipseMode(CENTER);    //中心に描画
  rectMode(CENTER);    //中心に描画
  
}

void draw() 
{
  //ここは画面の描画だけをしている
}

void mouseDragged() 
{  
  //pmouseとは、現在のマウスの位置の一つ前のマウスの位置を指します。
  //よって、現在の位置から前の位置を引くことによってマウスの移動の早さを検出することができます
  
  variableEllipse(mouseX, mouseY, pmouseX, pmouseY);  //様々な大きさ、色の円を描くメソッド
  variableRect(mouseX, mouseY, pmouseX, pmouseY);  //様々な大きさ、色の長方形を描くメソッド
}

/////////円の描画メソッド////////////////////
void variableEllipse(int x, int y, int px, int py) 
{
  float speed = abs(x-px) + abs(y-py);  //マウスの早さを検出
  stroke(speed);  // マウスの早さを線の色にする
  fill(random(0, 255), random(0, 255), random(0, 255), random(0, 255));  //ランダムにR, G, B, Alphaを決定

  ellipse(x, y, speed, speed);  //マウスの位置で円を描画
}

/////////長方形の描画メソッド////////////////////
//長方形の描画も、円の描画とほぼ同じ
void variableRect(int x, int y, int px, int py) 
{
  float speed = abs(x-px) + abs(y-py);
  stroke(speed);
  fill(random(0, 255), random(0, 255), random(0, 255), random(0, 255));  //ランダムにR, G, B, Alphaを決定

  //注意 オブジェクトを回転させるときは、基準点の座標が(0,0)で回転してしまうので、
  //基準点をマウスの位置に移動させる 
  translate(x, y);  //中心点を移動
  rotate(PI/random(0.0, 6.28318));  //0~360度の中でランダムに回転
  rect(0, 0, speed, speed);  //基準点を移動させたので、長方形の座標は(0, 0)でOK
}