はじめに

youtubeで以下の動画を見かけました。

見たところWebページでも作れそうに思ったので、勉強がてら再現してみました。

なんとなく幾何学模様の描画と宣言的UIが相性良さそうな気がしたのでReactを使ってみました。

下準備

今回はSE再生も再現するため、use-soundをインストールします。

npx create-react-app reproduce-geometric-patterns --template typescript
cd reproduce-geometric-patterns
npm i use-sound

再現

背景を描画

まずは背景の円2つと基準の線を描画します。

App.tsx

import Circle from './Circle';

function App() {
  return (
    <Circle></Circle>
  );
}

export default App;

Circle.tsx

const MAX_R = 300;
const MIN_R = 50;

const Circle = () => {
  return (
    <div style={{ textAlign: 'center' }}>
      <svg width={MAX_R * 2 + 20} height={MAX_R * 2 + 20} viewBox={`-10 -10 ${MAX_R * 2 + 20} ${MAX_R * 2 + 20}`}>
        <circle r={MAX_R} cx={MAX_R} cy={MAX_R} fill='transparent' stroke='black' />
        <circle r={MIN_R} cx={MAX_R} cy={MAX_R} fill='transparent' stroke='gray' />
        <line x1={MAX_R} y1='0' x2={MAX_R} y2={MAX_R - MIN_R} stroke='gray' />
      </svg>
    </div>
  )
}

export default Circle;

こんな感じになります。

回る点を描画（まだ回らない）

次に、回って音を鳴らす点を描画します。
(Qiitaにreactのdiff表現が無い...)

まず1つ

Circle.tsx

      <svg width={MAX_R * 2 + 20} height={MAX_R * 2 + 20} viewBox={`-10 -10 ${MAX_R * 2 + 20} ${MAX_R * 2 + 20}`}>
        <circle r={MAX_R} cx={MAX_R} cy={MAX_R} fill='transparent' stroke='black' />
        <circle r={MIN_R} cx={MAX_R} cy={MAX_R} fill='transparent' stroke='gray' />
        <line x1={MAX_R} y1='0' x2={MAX_R} y2={MAX_R - MIN_R} stroke='gray' />

+       <circle r='5' cx={MAX_R} cy='0' fill='red' />
      </svg>

動画だと18個あるので、mapで繰り返し表示します。

Circle.tsx

const MAX_R = 300;
const MIN_R = 50;

const Circle = () => {
  return (
    <div style={{ textAlign: 'center' }}>
      <svg width={MAX_R * 2 + 20} height={MAX_R * 2 + 20} viewBox={`-10 -10 ${MAX_R * 2 + 20} ${MAX_R * 2 + 20}`}>
        <circle r={MAX_R} cx={MAX_R} cy={MAX_R} fill='transparent' stroke='black' />
        <circle r={MIN_R} cx={MAX_R} cy={MAX_R} fill='transparent' stroke='gray' />
        <line x1={MAX_R} y1='0' x2={MAX_R} y2={MAX_R - MIN_R} stroke='gray' />

-       <circle r='5' cx={MAX_R} cy='0' fill='red' />
+       {getRadiuses(18).map(r => <circle r='5' cx={MAX_R} cy={MAX_R - r} fill='red' />)}
      </svg>
    </div>
  )
}
+ const getRadiuses = (pointNum: number): number[] => {
+   if (pointNum === 1) return [MAX_R];
+   if (pointNum === 2) return [MAX_R, MIN_R];

+   // 点が3つ以上の場合、最も外側の点と最も内側の点を結ぶ線をn - 1等分し、
+   // 分割点の数(n - 2)だけMIN_R + distanceすることで、各点の半径を取得
+   const middleLineNum = pointNum - 1;
+   const distance = (MAX_R - MIN_R) / middleLineNum;
+   const middlePointNum = middleLineNum - 1;
+   const rates = [...Array(middlePointNum)].map((_, i) => i + 1).reverse();
+   const middlePoints = rates.map(rate => MIN_R + distance * rate);
+   return [MAX_R, ...middlePoints, MIN_R];
+ }

きれいに点が18個並びました。
色はrgb変えるだけで簡単なので、今回はすべて赤のままでいきます。

点を回転させる（等速）

次に、すべての点を同じ角速度で回転させます。
angleはdegreeです。
x座標は初期位置を0°とし、+MAX_R ~ -MAX_Rの間で変化させます。
y座標は初期位置を90°としたいため、angle + 90します。

Circle.tsx

+ import { useState, useEffect } from 'react';

const MAX_R = 300;
const MIN_R = 50;

const Circle = () => {
+ const [angle, setAngle] = useState(-1);

+ useEffect(() => {
+   const id = setInterval(() => {
+     setAngle(angle + 1);
+   }, 3);
+   return () => clearInterval(id);
+ }, [angle]);

+ const circlePositions = getCirclePositions(angle, getRadiuses(18));

  return (
    <div style={{ textAlign: 'center' }}>
      <svg width={MAX_R * 2 + 20} height={MAX_R * 2 + 20} viewBox={`-10 -10 ${MAX_R * 2 + 20} ${MAX_R * 2 + 20}`}>
        <circle r={MAX_R} cx={MAX_R} cy={MAX_R} fill='transparent' stroke='black' />
        <circle r={MIN_R} cx={MAX_R} cy={MAX_R} fill='transparent' stroke='gray' />
        <line x1={MAX_R} y1='0' x2={MAX_R} y2={MAX_R - MIN_R} stroke='gray' />

-       {getRadiuses(18).map(r => <circle r='5' cx={MAX_R} cy={MAX_R - r} fill='red' />)}
+       {circlePositions.map(point => <circle r='5' cx={point.x} cy={point.y} fill='red' />)}
      </svg>
    </div>
  );
}

const getRadiuses = /* 省略 */

+ const getCirclePositions = (angle: number, radians: number[]): CirclePosition[] => {
+   return radians.map(radius => getPosition(angle, radius));
+ }
+ const getPosition = (angle: number, radius: number): CirclePosition => {
+   const xradian = Math.PI / 180 * angle;
+   const yradian = Math.PI / 180 * (angle + 90);
+   const xpos = radius - Math.sin(xradian) * radius + (MAX_R - radius);
+   const ypos = radius - Math.sin(yradian) * radius + (MAX_R - radius);
+   return {
+     x: xpos,
+     y: ypos
+   };
+ }

export default Circle;


+ type CirclePosition = {
+   x: number,
+   y: number
+ }

こんな感じで動きます。
(fps低いですが、本来はもっとなめらかに動いています)

点と点を線で結ぶ

隣り合う点の座標を線の始点・終点とします。
各点の座標はcirclePositionsに入っているので、reduceで圧縮します。

Circle.tsx

/* 省略 */
  const circlePositions = getCirclePositions(angle, getRadiuses(18));
+ const linePositions = getLinePositions(circlePositions);
/* 省略 */
        {circlePositions.map((point, i) => <circle key={'circle' + i} r='5' cx={point.x} cy={point.y} fill='red' />)}
+       {linePositions.map((point, i) => <line key={'line' + i} x1={point.first.x} y1={point.first.y} x2={point.last.x} y2={point.last.y} stroke='black'></line>)}
/* 省略 */
+ const getLinePositions = (circlePositions: CirclePosition[]): LinePosition[] => {
+   return circlePositions.reduce((acc, cur, i) => {
+     if (i === 0) return [];
+     acc.push({
+       first: circlePositions[i - 1],
+       last: cur
+     });
+     return acc;
+   }, [] as LinePosition[]);
+ }
/* 省略 */
+ type LinePosition = {
+   first: CirclePosition,
+   last: CirclePosition
+ }

速度差をつけて点を回転させる

動画だと各点の角速度が異なっており、一番外側の点は回り始めてからすべての点が基準線で揃うまでに22周していました。
その1つ内側の点は21周、そのもう1つ内側の点は20周、...、一番内側の点は22 - 17 = 5周となっていました。
その周回数になるようにangleを割り、速度差をつけます。

Circle.tsx

/* 省略 */
const Circle = () => {
  const [angle, setAngle] = useState(0);
+ const delays = [...Array(18).keys()].map((_, i) => (i + 5) / 22).reverse();
/* 省略 */
+ const circlePositions = getCirclePositions(angle, delays, getRadiuses(18));
  const linePositions = getLinePositions(circlePositions);
/* 省略 */
- const getCirclePositions = (angle: number, radians: number[]): CirclePosition[] => {
+ const getCirclePositions = (angle: number, delays: number[], radians: number[]): CirclePosition[] => {
-   return radians.map(radius => getPosition(angle, radius));
+   return radians.map((radius, i) => getPosition(angle / delays[i], radius));
}
/* 省略 */

これで、動画のようなズレで点を移動させられました🥳

描画部分はこれでほぼ再現完了です！

音を再生

動画では、点が基準線を通過した際に対応するSEを再生していました。

まず、18個の音声ファイルを用意して配置します。

次に、mp3をインポートするためにsrc\@typesディレクトリを作成し、中にaudio.d.tsファイルを作成します。

audio.d.ts

declare module '*.mp3';

次に音声ファイルをすべてインポートし、useSoundで準備します。
(全部同時に鳴る瞬間かなりうるさいので、volume: 0.2で抑えています)

Circle.tsx

import { useState, useEffect } from 'react';
+ import useSound from 'use-sound';
+ import C4 from './sound_ド4.mp3';
+ import B3f from './sound_シ♭3.mp3';
... // 省略

const Circle = () => {
  const [angle, setAngle] = useState(0);
  const delays = [...Array(18).keys()].map((_, i) => 22 / (i + 5)).reverse();
+ const [playC4] = useSound(C4, { volume: 0.2 });
+ const [playB3f] = useSound(B3f, { volume: 0.2 });
+ const [playA3] = useSound(A3, { volume: 0.2 });
  ... // 省略

そして、angle / delayが0に近い場合に音を鳴らします。
※一番外側の点に関してはdelays[0] == 1のため% 360で確実に0になりますが、それ以外の場合は小数点になる場合があり% 360 === 0が期待するタイミングでtrueにならないことがあるため、% 360 < 1としています。

Circle.tsx

  if (angle / delays[0] % 360 === 0) playC4()
  if (angle / delays[1] % 360 < 1) playB3f()
  if (angle / delays[2] % 360 < 1) playA3()

これでSE再生部分も再現完了です！

完成品

GitHub Pagesで公開しましたので、ぜひ見てみてください！
https://uma0626.github.io/reproduce-geometric-patterns/

GitHubリポジトリは以下です。

おわりに

おもしろかった～