カレイドスコープメーカー

使い方

キャンバス上でポインターを動かすと、模様の焦点が移動します。クリックやドラッグは必要なく、マウスを乗せて動かすだけで形が変わります。キャンバスを選択してから矢印キーを押しても、同じように焦点を少しずつ動かせます。

対称数、回転、色を調整すると、その場で作品に反映されます。模様を動かしたい場合だけ「動きをオンにする」を選んでください。初期状態では動きません。

何を作るか迷ったら「おまかせ」を押すと、設定と焦点をまとめて選び直します。気に入るまで何度でも押せます。「最初に戻す」を押すと、模様の設定と焦点が開いたときの状態に戻ります。

各設定で変わること

• 焦点（ポインターの位置）：上下の位置で花びらの長さが変わります。キャンバスの下側ほど長く、上側ほど短くなります。左右の位置では花びらの幅と先端の曲がり方が変わります。右側ほど幅が広くなり、中央から左右に離れるほど先端が大きく曲がります。
• 対称数：4〜12 の整数です。初期値は 6 です。中心のまわりに同じ形を何回並べるかを決めます。
• 回転：0〜360 度を 1 度刻みで指定します。模様全体を中心のまわりに回します。0 度と 360 度は同じ見た目です。
• 色：いちばん外側の大きな層の色です。初期値は紫（#7C3AED）です。
• 動き：オンにすると模様全体が一定の速さで回り続け、約18秒で1周します。「動きを止める」を押すと、そのときの角度で止まります。
• おまかせ：対称数（4〜12）、回転（0〜359 度）、色、焦点をランダムに選び直します。色は鮮やかな色の中から選び、青のように暗く見える色は、紺色の背景とのコントラスト比が 3:1 以上になるまで明るくします。焦点は矢印キーで動かせる位置（2.5% 刻み）の中から選びます。動きのオン・オフはそのままです。
• 最初に戻す：対称数 6、回転 0 度、色は紫、動きはオフ、焦点は中央に戻します。動きで回った角度も 0 に戻ります。「保存する大きさ」の選択は変わりません。

矢印キーでは、1回押すごとにキャンバスの幅の 2.5% ずつ焦点が動きます。中心から端までは 20 回分です。焦点はキャンバスの端より外へは出ません。

模様のしくみ

模様は、花びらのような形を中心から放射状に並べて描いています。写真や画像を読み込んで反射させるのではなく、設定から図形を計算して描く方式です。

• 対称数の数だけ、円を等分した向きに同じ形を並べます。
• それぞれの向きで、花びらと、それを反転した鏡像を1組にして描きます。鏡像は中心をはさんだ反対側へ伸びます。
• 対称数が偶数で、焦点が左右の中央にあるときは、向かい合う花びらどうしが重なり、対称数と同じ数の方向に伸びて見えます。対称数が 6 なら、12 枚の花びらが 6 方向に並びます。焦点を左右に動かすと花びらの先端がずれ、重なり方が変わります。
• 対称数が奇数のときは、鏡像が花びらの間に入り、対称数の2倍の方向に伸びて見えます。
• 花びらは5層の重ね描きです。外側から、選んだ色、紫、水色、ローズ、琥珀色の順に、内側ほど小さくなります。選べるのは外側の1色だけで、内側の4色と紺色の背景は固定です。
• 各層は少し透けていて、淡い色の輪郭線が付きます。層や花びらが重なった部分は色が混ざって見えます。

模様の描画には乱数を使っていないため、同じ設定と同じ焦点であれば、いつでも同じ模様になります。乱数を使うのは「おまかせ」で設定を選ぶときだけです。

操作と書き出し

「PNGをダウンロード」を選ぶと、現在の作品を kaleidoscope.png として保存します。ダウンロードが完了しなかった場合も、作品と設定は画面に残るため、そのまま操作や再試行ができます。

保存される画像は正方形で、紺色の背景を含みます。大きさは「保存する大きさ」で次の3つから選べます。

• 画面と同じ（初期値）：表示中のキャンバスの幅に、画面のピクセル比を掛けた大きさです。選択肢の横に、今の画面での値が表示されます。たとえばキャンバスが幅 400 px で表示されていて、ピクセル比が 2 の画面では、800 × 800 px のPNGになります。ウィンドウの幅を変えると、この値も変わります。
• 1080 × 1080 px：SNS の正方形の投稿などに合わせやすい大きさです。
• 2048 × 2048 px：壁紙や印刷など、大きな画像が必要なときに選びます。

1080 px と 2048 px を選んだときは、画面の画像を引き伸ばすのではなく、同じ設定と焦点の模様をその大きさで描き直して保存します。花びらの形や輪郭線の太さは画像の大きさに合わせて変わるので、画面と同じ見た目のまま、線がぼやけずに大きくなります。「PNGをダウンロード」を押すと、保存する画像の大きさがボタンの下に表示されます。

「共有」は、画像ファイルの共有に対応したブラウザでのみ利用できます。共有される画像も「保存する大きさ」で選んだ大きさです。ブラウザが対応していない場合はPNGをダウンロードしてください。共有画面をキャンセルしても作品は変わりません。

プライバシー

描画、操作、PNGの作成はすべてこのブラウザ内で行われ、外部APIへ送信されません。設定、焦点、作品画像はReactのメモリだけに保持され、Cookie、データベース、localStorageには保存されません。ページを再読み込みすると初期状態に戻ります。

FAQ

スマートフォンでも操作できますか？

ポインター操作に対応したブラウザでは、タッチ操作で焦点を動かせます。キャンバスの上を指でなぞっても、ページはスクロールせず焦点が動きます。共有できるファイル形式や共有先はブラウザと端末によって異なります。

動きを止めても作品を保存できますか？

はい。動きがオフの状態でも、表示中の静止した作品をPNGとして保存できます。動きがオンのときに保存すると、ボタンを押した時点の1コマが画像になります。

自分の写真から万華鏡の模様を作れますか？

作れません。画像を読み込む機能はなく、対称数、回転、色、焦点の設定から図形を描きます。

背景の色や内側の色は変えられますか？

変えられません。色の設定で変わるのは、いちばん外側の層だけです。背景の紺色と、内側の紫、水色、ローズ、琥珀色は固定です。

保存される画像の大きさを指定できますか？

「保存する大きさ」で、画面と同じ大きさ、1080 × 1080 px、2048 × 2048 px の3つから選べます。それ以外の数値は指定できません。初期値の「画面と同じ」は、表示中のキャンバスの幅と画面のピクセル比で決まり、ウィンドウの幅を変えると変わります。

設定を最初の状態に戻すには？

「最初に戻す」を押すと、対称数 6、回転 0 度、色は紫、動きはオフ、焦点は中央の状態に戻ります。ページを再読み込みしても同じ状態になります。元に戻す（直前の操作の取り消し）機能はないので、気に入った作品は「おまかせ」や「最初に戻す」を押す前にPNGで保存してください。