JavaScript と HTML5 Canvas でインタラクティブなビジュアルを作成する

Project 1: Icy Lines

最高の結果を得るには、フルスクリーンで開く

まず、線は白いので、CSS にアクセスして、キャンバスに暗いバックグラウンドを与えてみましょう：

canvas {
background: linear-gradient(45deg, #0d1011 0% 20%, #163486);
}

Line Constructor

ここで、canvas.js に戻ります。

class Line {
constructor(x, y, offset) {
this.x = x;
this.y = y;
this.offset = offset;
this.radians = 0;
this.velocity = 0.01;
}

各線の x と y 位置を決定する以外に、ビジュアルをより面白くするために、いくつかのプロパティを用意しています。 radians プロパティで動きの角度を定義し、velocity プロパティで動きの速度を決定します。

線の描画方法

次に、線を描画したいと思います。各線の下には小さな円があり、これは arc 関数で定義できます。そして、線は画面の上部に飛び出します:

class Line {
constructor(x, y, offset) {
this.x = x;
this.y = y;
this.offset = offset;
this.radians = 0;
this.velocity = 0.01;
} draw = () => {
c.strokeStyle = 'rgba(255, 255, 255, 0.5)';
c.fillStyle = 'rgba(255, 255, 255, 0.3)'; c.beginPath();
c.arc(this.x, this.y, 1, 0, Math.PI * 2, false);
c.fill();
c.moveTo(this.x, this.y);
c.lineTo(this.x + 300, this.y - 1000);
c.stroke();
c.closePath(); this.update();
} update = () => {
// this is where we control movement and interactivity
}
}

これが機能しているかテストするには、サンプル線を作成します:

const line = new Line(250, 800, 0);
line.draw();

Generating 100 Lines

しかし、画面いっぱいに線を入れたいので、100本の線の配列を作成する方法が必要です。

const lineArray = ;for (let i = 0; i < 100; i++) { const start = { x: -250, y: 800 };
const unit = 25; lineArray.push(
new Line(
start.x + unit * i,
start.y + i * -3,
0.1 + (1 * i)
)
);
};

これらの行を表示するには、それらの draw メソッドをトリガーする必要があります。すぐにアニメーションを行うので、それを行うのに最も適した場所は animate 関数の中です。しかし、開始位置をもっと面白くすることができます。以下のコードでは、random 変数が微妙な変化を与えるのに役立ち、全体の効果をより自然に見せています。 (また、Math.sin(i)を使用して開始位置に多少のうねりを加えています。

const lineArray = ;for (let i = 0; i < 100; i++) { const start = { x: -250, y: 800 };
const random = Math.random() - 0.5;
const unit = 25; lineArray.push(
new Line(
start.x + ((unit + random) * i),
start.y + (i + random) * -3 + Math.sin(i) * unit,
0.1 + (1 * i)
)
);
};

気に入った開始パターンができるまで、数字を変えて遊んでみてください！

アニメーション

ここからは、欲しいアニメーションを追加するのは非常に簡単です。 Line クラスに戻り、update メソッドに以下を追加します:

this.radians += this.velocity;
this.y = this.y + Math.cos(this.radians + this.offset);

アニメーションフレームごとに、this.radians は this.velocity だけ増加します。次に、this.radians を使用して、Math.cos .

により円運動を作成します。Math.sin や Math.cos に出会ったことがなくても（あるいは三角法が少し苦手でも！）、ついていくことを止めないはずです。 Math.cos によって、下のグラフの紫色の線と同じパターンで、行ったり来たりする動きができることを知っておいてください：

最後に、this.offset を追加すると、線は異なる角度でループしはじめます。

これはかなりいい効果だと思います。しかし、最後の仕上げとして、いくつかのインタラクティブ性を追加してみましょう。

Interactivity

ユーザーのマウスが線の 1 つ上にあるかどうかを確認する最も簡単な方法は、canvas の組み込みの isPointInPath メソッドを使用することです。線の幅は 1 ピクセルしかないので、変更をトリガーする確率が低すぎて面白くありません！

この問題に対する素晴らしい解決策は、各線の後ろに見えない線を作成することです。見えない線はより広くする必要があり、これを使用して isPointInPath.

isPointInPath

draw メソッドの内部では、drawLinePath という関数を作成しましょう。これは、width を不可視の線に、color を (不可視の線が接触したときに可視の線になる) 受け取る必要があります:

const drawLinePath = (width = 0, color) => {
c.beginPath();
c.moveTo(this.x - (width / 2), this.y + (width / 2));
c.lineTo(this.x - (width / 2) + 300, this.y - (width / 2) - 1000);
c.lineTo(this.x + (width / 2) + 300, this.y - (width / 2) - 1000);
c.lineTo(this.x + (width / 2), this.y - (width / 2));
c.closePath();
if (c.isPointInPath(mouse.x, mouse.y) && color) {
c.strokeStyle = color;
};
};

(上記の矢印関数の使用は、this の正しいコンテキストを暗黙的に結合することに注意します。)

それから、異なる色の変更を引き起こすために、簡単に異なる幅の不可視線を加えることができます。次のコードを見れば、何が起こっているかがわかるはずです:

drawLinePath(150, 'red');
drawLinePath(50, 'yellow');

しかし、より微妙な効果を得るには、次のコードを試してみてください:

drawLinePath(150, '#baf2ef');
drawLinePath(50, '#dcf3ff');

以上です!

すべての JavaScript コードは、この gist を参照してください:

。