boolean drawFlag = true;  //描画を行うタイミングかどうかを決定する。

void setup() {
  size(400, 400);
}

void draw() {
  
  if (drawFlag) {  //描画タイミングであれば
    background(255);

    float cx = width/2;  //円の中心(x)
    float cy = height/2;  //円の中心(y)
    float radius = width * 0.3;  //円の半径
    float blurMax = 30;  //最大歪み量

    for (int i = 0; i < 300; i ++) {

      
      float blur = random(2.0) - 1.0;  //歪み値 -1.0 -> 1.0
      float radian = random(TWO_PI);  //角度(ラジアン)を0-360度相当をランダムに決定する
      float blurredRadius = radius + blur * blurMax;  //半径をランダムに決定する(基本量+歪み)
      float p1x = cos(radian) * blurredRadius + cx;  //点1のx座標を決定する
      float p1y = sin(radian) * blurredRadius + cy;  //点1のy座標を決定する
      // 円運動を作る時はx座標はcos,y座標はsinを決め打ちで覚えると良いと思います
      // xはcos(ラジアン) * 半径 + 中心点のx
      // yはsin(ラジアン) * 半径 + 中心点のy
      
      float blurDistance = (1.0 - abs(blur));  //blur(-1.0 -> 0.0 -> 1.0)を0 -> 1.0 -> 0に変換する
                                               //これにより、円の当初の半径に近いほど〇〇するということが可能になる
      
      radian += blurDistance * TWO_PI * 0.1;  //角度を加算する
      blurredRadius -= blurDistance * 20;  //半径を減算する
      float p2x = cos(radian) * blurredRadius + cx;  //点2のx座標を決定する
      float p2y = sin(radian) * blurredRadius + cy;  //点2のy座標を決定する

      line(p1x, p1y, p2x, p2y);
    }
    drawFlag = false;  //描画が終了したのでフラグをfalseにしておく
  }
}
void mousePressed() {
  drawFlag = true;  //描画タイミングにする
}