body {
  background-color: white;
}
canvas {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

let randomLines = [];
const pointCount = 10;
const width = 320;
const height = 320;
const speed = 0.001;
const pointRadius = 0.2;

function setup() {
  // キャンバスを作成します。
  createCanvas(width, height);
  // 0-1の間のランダムな数値のセットを指定の数(pointCount)作成します。この数値は後に角度として使用します。
  randomLines = Array.from(Array(pointCount).keys()).map(() => ({
      from: random(1),
      to: random(1),
  }));
}

function draw() {
  // 少し透過をもたすことで徐々にフェードアウトするような表現にしています。
  background('rgba(255,255,255,0.08)');
  // setupで作成したランダムな数値の数に応じて、線を描いていきます。
  randomLines.map(point => {
    // 線に色をつけます。
    stroke(140, 200, 255);
    
    // 線の開始点の円周上での角度をnoise関数をもとに生成します。
    const fromAngle = map(noise(point.to), 0, 1, 0, 360);
    // 円周上でのx座標とy座標を割り出します。
    const fromX = cos(radians(fromAngle)) * width/2 * 0.8 + width/2;
    const fromY = sin(radians(fromAngle)) * height/2 * 0.8 + height/2;
    // 同じように線の終了点も計算します。
    const toAngle = map(noise(point.from), 0, 1, 0, 720);
    const toX = cos(radians(toAngle)) * width/2 * 0.8 + width/2;
    const toY = sin(radians(toAngle)) * height/2 * 0.8 + height/2;
    
    // 上で計算した２つの座標をもとに、線を描きます。
    line(
      fromX,
      fromY,
      toX,
      toY
    );
    
    // 開始点と終了点に、アクセントとして点を描きます。
    stroke(0,100,200);
    ellipse(toX, toY, 1, 1);
    ellipse(fromX, fromY, 1, 1);
    
    // アニメーションさせるために、座標点を移動させます。
    point.from += speed;
    point.to += speed;
  });
}