世界を動かす技術を、日本語で。

ポライン – 極座標を用いた謎めいたカラーパレットジェネレーター

概要

Poline は、 極座標 を活用した独創的なカラーパレット生成ライブラリ。 アンカー間の線引き による魔術的な色配置が特徴。 TypeScript製 のマイクロライブラリで、柔軟なカスタマイズが可能。 HSL値 や関数による色分布制御、ループ化やヒューシフトなど多彩な機能。 MITライセンス 下で公開、誰でも利用・貢献が可能。

Polineとは何か

  • Poline は、 極座標系 の魔術的なロジックで色を生成するカラーパレットジェネレーター
  • 従来のカラーモデル に縛られず、20世紀初頭の 神秘的な知識 を活用
  • アンカー間に線を引く ことで、他にない独特なパレットを作成
  • TypeScript製マイクロライブラリ、軽量かつ拡張性に優れる
  • 現代の ジェネレーティブアート制作者 必携のツール

Terminology & Working Principles(用語と原理)

  • Poline は" polar line "(極座標+線)の造語
  • アンカー :色生成の起点となるHSL値(例:[h, s, l])
  • アンカー間のポイント数 が多いほど、生成される色数が増加
  • ポジション関数 でアンカー間の色分布を定義
  • TypeScript で記述された、柔軟な設定が可能なライブラリ

召喚(基本の使い方)

  • Poline のインスタンス生成でパレット作成開始
    • 引数なしで呼ぶと、ランダムなアンカー2点で自動生成
    • HSL値リスト で任意のアンカーを指定可能
  • 最低2つのアンカー が必要、数に上限なし
  • アンカー数が増えるほど、調和のとれたパレット作成が難しくなる傾向

ポイント(色数の制御)

  • アンカー間の線上 にプロットされるポイント数がパレットの豊かさを決定
  • デフォルトは 4ポイントnumPointsプロパティで変更可能
  • パレット全体の色数は「ポイント数×アンカーペア数」で決定
  • インスタンス生成後もnumPointsで動的に変更可能

アンカーの操作

  • アンカーは HSL配列 または XYZ座標 で追加可能
  • addAnchorPointで新規アンカー追加
  • updateAnchorPointで既存アンカーの色や位置を変更可能
  • 柔軟なパレット調整が可能

ポジション関数(色分布の制御)

  • ポジション関数 は0~1の値を別の0~1にマッピング
  • デフォルトは sinusoidalPosition (正弦波型)
  • 他にもlinear, exponential, quadratic, cubic, quartic, asinusoidal, arcなどを選択可能
  • 各軸(X:ヒュー/ライト、Y:ヒュー/ライト、Z:サチュレーション)ごとに関数を指定可能
  • 関数ごとに異なるアーク(曲線)を描き、独自の色分布を実現

ループ化とヒューシフト

  • デフォルトでは パレットは非ループ (最初と最後の色が異なる)
  • closedLoopをtrueに設定すれば ループパレット 化可能
  • 生成後もpoline.closedLoopで動的に切替可能
  • ヒューシフト 機能で全色のヒューを任意量だけシフト
    • パレットのアニメーションや類似パレットの生成に最適
    • シフト量は -Infinity~Infinity の実数値

最近傍アンカーの取得

  • 指定座標や色に 最も近いアンカー を取得可能
  • poline.getClosestAnchorPoint({xyz: [x, y, null], maxDistance: .1})
  • maxDistanceを超える場合はnull返却
  • xyzやhsl値の任意成分をnull指定で無視可能

色リストの取得

  • HSL配列 または CSS文字列 形式で全色を取得
    • poline.colors(HSL配列)
    • poline.colorsCSS(CSS HSL表記)
    • poline.colorsCSSlch(LCH表記)
    • poline.colorsCSSoklch(OKlch表記)

アンカーの削除

  • removeAnchorPointでアンカー削除
    • アンカー参照またはインデックスで指定

ライトネスの反転

  • デフォルトでは ライトネス0が中心、1が外周
  • invertLightness0が外周、1が中心 に反転可能
  • パレットに神秘的な雰囲気を付与

カラーモデル

  • デフォルトで HSLモデル のみサポート
  • 他モデル利用時は culori 等の外部ライブラリ併用推奨

インストール方法

  • npmパッケージ として配布
    • npm install poline
  • GitHubクローン も可能
  • unpkg CDN からmjs/umd形式でインポート可能
    • 例:import { Poline } from 'https://unpkg.com/poline?module'

ライセンス・著作

  • MITライセンス、オープンソース
  • Anatoly Zenkov のアイデアに着想を得て開発
  • バグ報告や提案はGitHub Issueで受付
  • デスクトップ環境 での利用推奨(Playgroundの全機能発揮のため)

作者からのメッセージ

  • Poline の進化にはユーザーの協力・支援が不可欠
  • コントリビューション、コーヒー、スポンサー、口コミなど歓迎
  • 一緒に色彩の魔法を探求する旅へ

Hackerたちの意見

Firefoxではうまく動かないみたい。広告ブロッカーとトラッキング保護を無効にして試してみたけど、コンソールが文句言ってる。「Uncaught SyntaxError: The requested module 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/e...' doesn't provide an export named: 'default'」

WindowsのFirefoxではちゃんと動いてるよ。このサイトは素晴らしいけど、パレットがどれだけ役に立つかはちょっとわからないな。

「poline」は神秘的な色パレットジェネレーターで、極座標の魔法を駆使してるんだ。従来の色彩科学に逆らった方法論で、20世紀初頭の秘教的な知識に根ざしてる。この魔法の技術は説明がつかないほどで、アンカーの間に線を引いて視覚的に印象的で異世界的なパレットを生み出す。現代の生成的な魔法使いには欠かせないツールで、目にも楽しい。 このイントロがちょっと理解できないんだけど、普通の色彩科学のパレットメーカーと何が違うの?でも、ビジュアルのプレゼンテーションとアニメーションはすごく好きだよ。

何がわからないの?従来の色彩科学に逆らってて、20世紀初頭の秘教的な知識に根ざしてるんだよ。すごくいいパレットジェネレーターだけど、魔法や神秘主義、魔女術の話はあんまり好きじゃないな。結局、色を生成するツールなんだから、ダンジョンマスターみたいな言葉遣いはやめてほしい。

謎めいてるから、理解できないんだよね。

科学的な根拠はないよ。これはAIが生成したテキストを読んでるんだ。俺の予想では、プロンプトはこんな感じだったんじゃないかな。「極座標の魔法を使って、きれいなカラーパレットを作るツールを説明して」って。

ちょっと皮肉っぽい感じもするし、楽しむために作られたのかな、特に以下の部分みたいな。「こうして、『ポライン』の書が書かれた。古代の秘術に満ちたその神秘的な力は、今やこのページの中に宿る。このコンペンディウムが、あなたの究極のカラーパレット探求に役立ちますように。」どちらにしても、カラーパレットメーカーの中でポーの法則に出会うとは思わなかったよ。

かっこいいね。ただ、俺が十分に現代的な生成的魔法使いかどうかはわからないけど、その不気味で神秘的な性質を楽しめるかは疑問だな。

よくできてるけど、錬金術的な要素にはちょっと戸惑ってる(まあ、それがポイントなんだろうけど)。

最後の色の名前付けには感心したよ。

ありがとう!ここ数年、集めるのが趣味になってるんだ: https://github.com/meodai/color-names

以前のHN(2年前)でクリエイターの返信もあったよ: https://news.ycombinator.com/item?id=34662722

超クール!もし作者やクリエイターが見てたら、ページの一番上にいるとき(つまり最初に読み込んだとき)、デモのホイールがいくつかの異なるカーブの間でアニメーションするようにしたらいいと思う。最初の印象(スクロールする前)は、ちょっと原始的に見えて、実際よりも面白くない感じがするから。

ここ最近見た中で、一番美しいものだよ。

ありがとう!すごく嬉しいよ。

神秘的な雰囲気が苦手な人へ:その気持ち、めっちゃわかる。偶然見つけたものが良さそうだったから、神秘的なテーマに乗っかってみようと思ったんだ。だって、実際の科学や理論は特にないし(俺が知ってる限り)。基本的には、楽しいウェブサイトを作る口実が欲しかっただけなんだ。みんなにも、優しい言葉をありがとう、本当に感謝してるよ!

新しいインターネットの見た目に「古いインターネット」の雰囲気があって、めっちゃ好き!すごくクリエイティブなアイデアだと思うし、アンチの意見はあんまり気にしないよ。大好き!

特に、私が知っている限りでは、実際の科学や理論がないからね。色相の調和に関する文献はあいまいだけど、いくつかの素晴らしいものがあるよ。彼の女性学生が着ていた色を追跡して、色の選択に影響を与える原則を特定しようとした松田をチェックしてみて。彼に対する私の批判は、RGBカラーホイールで色相分布をプロットしたこと。RYBホイールの方がずっと良い選択だったと思う。彼の論文は日本語だけど、いくつかの場所で要約されているよ。下の[2]は、私が行った講義の2ページのリンクで、彼の発見をまとめているよ。君もクエーニの古典的なカラースペースに関する本を知ってるよね。[3] 楽しくて情報満載の読み物だよ。色相の対立に関する研究はないんだ(これは補色ペアの基礎となる考え)。これはおかしいよ、調査するのはとても簡単なテーマなのに。私には、対立するペアの間には特別な関係があるのが明らかだと思う。中立に混ざるという事実を超えてね。これを支持するのは、レオナルド・ダ・ヴィンチが色相円が発明される前にこの関係を文書化していたことだよ[4]!色の調和の神秘的な次元については…これは色彩科学の始まりから仮定されてきたことだよ。ニュートン自身も、彼の色相円には7色があると信じていたのは、これが精神的に重要な値だからだよ[5]。イッテン[6]、ゲーテ[7]、カンディンスキー[8]は、みんな色の精神的次元を絶対に信じていた。個人的には、彼らの作品はアーティストやデザイナーが色を使う方法に対して、破壊的な影響しか与えていないと思う。めちゃくちゃ不一致で、あいまいで、しばしば単純に間違ってる。

エディタを設定して、プロジェクトごとに異なる構文ハイライト用のユニークなカラーパレットを生成するようにしたいな。複数のプロジェクトのファイルを同時に開いているときに、見た目が違うようにしたいんだ。もしかしたら、gitリモートのハッシュを基にするのもいいかも。