[p5.js習作＃2] カラフルなトンネルを通り抜けるアニメーション

p5.jsを使用して作成した、カラフルなトンネルを通り抜けるアニメーションです。左上のボタンを押すと、ベースのBGMが流れ、トンネル内を移動するような体験を提供します。

アニメーションでは、トンネル内を円形のエリアで覆うように描画された線が、回転しながら動きます。

https://indepa.net/works/tunnel/index.html

画像クリックでアニメーションに遷移

//JavaScript
let l = 0;
let s = 0;
let music;
let playButton;

function preload() {
  music = loadSound('music.mp3');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  strokeCap(SQUARE);
  colorMode(HSB);

  playButton = createButton('Play Music');
  playButton.position(20, 20);
  playButton.mousePressed(() => {
    if (music.isPlaying()) {
      music.pause();
      playButton.html('Play Music');
    } else {
      music.loop();
      playButton.html('Pause Music');
    }
  });
}

function draw() {
  l++;
  background(255);
  noFill();
  let q = strokeWeight;
  scale(0.1);

  for (let i = 1500; i > 0; i -= 2) {
    let t = l / 40;
    s = 3 / (9.1 - ((t + i / 99) % 9));
    let j = i * 7 + sin(i * 4 + t + sin(t * 1.5));
    let hue = map(i, 1500, 0, 0, 360);
    stroke(hue, 255, 255);
    q(s * s * 8);
    push();
    translate(4e3 + 500 * sin(l / 100), 2500 + 500 * cos(l / 100));
    rotate(j);
    ellipse(0, 0, s * 1e3, s * 900);
    pop();
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  playButton.position(20, 20);
}

曲はGarageBandで作曲。
全てのコードはこちらから。

p5.js Web Editor