var ripples = [];

var colors = ['#FF0000','#00FF00', '#0000FF']

function setup() {

  createCanvas(400, 400);

​

  // ボールの個数を10個にして、ballsの配列に連想配列を初期化して追加する

  for (let i = 0; i < 20; i++) {

    ripples[i] = {

      x: width / 2,

      y: height / 2,

      v: 3.0,

      r: 0,

      life: 0,

      color: colors[parseInt(random(colors.length))]

    };

  }

​

  // 色が重なっているときの振る舞いを加算モードにする

  // 詳細：https://p5js.org/reference/#/p5/blendMode

  blendMode(ADD);

  // 一定時間ごとに寿命が0のオブジェクトを一つだけlife=255にする

  // この例では 500 ms に一度 rebirth()が呼び出されて、一つだけlifeが255になる

  const rebirth = () =>{

    console.log("rebirth");

    for( let ripple of ripples){

      if( ripple.life == 0){

        ripple.life = 100;

        break;

      }

    }

    setTimeout(rebirth,500);

  }

  rebirth();

  frameRate(60);

}

​

function draw() {

  // 画面の描画をすべてなくす

  clear();

​

  // 背景色の描画

  background(0);

​

  // ボールの個数分の描画処理

  for (const ripple of ripples) {

    ripple.r += ripple.v;

    ripple.life--;

​

    // 寿命が付きたら最初に戻るただし、寿命は0のままにしておく

    if (ripple.life < 0) {

      ripple.x = width / 2;

      ripple.y = height / 2;

      ripple.v = 3.0;

      ripple.r = 0;

      ripple.life = 0;

    }

​

    noFill();

    stroke(ripple.color);

    circle(ripple.x, ripple.y, ripple.r);

  }

}