本文へスキップ
HELLO!
HIGASHIYUKI®.COM
0   /   100

O®b

数学的アルゴリズムで視覚伝達。数式から軌跡を描き、ブラウザで動かし、SVGで書き出す。「O®b - オーブ」Designed and Developed by HIGASHIYUKI®

SCROLL DOWN

出典のある44の数式を、動かして、組み合わせて、書き出す。ジェネレーティブ・パターンのウェブアプリケーション。

数式から軌跡を描き、SVGで書き出す。O®b.(オーブ)は、ジェネレーティブ・パターンを作るWebアプリケーションです。ブラウザだけで動き、インストールもアカウント登録も要りません。

扱うのは、6つのカテゴリに分かれた44のモデルです。葉序(Vogel, 1979)、ローレンツ・アトラクタ(Lorenz, 1963)、ペンローズ・タイル(Penrose, 1974)、ジュリア集合(Julia, 1918)など、どれも出典のある数学のモデルで、描いている数式は今の値を入れた形で常に画面に出ています。

画面全体がキャンバスです。どこをドラッグしても、そのモデルの主な2つのパラメータが変わり、絵はその場で形を変えます。

パターンの幅は、モデル(44)、プリセット(217)、対称展開(8種)の掛け合わせで広げます。対称展開は、巡回群・二面体群・壁紙群(pmm/p4)などの群論にもとづきます。さらに、線の座標そのものを変形するトランスフォーム(8種)と、画面の上で動かすモーション(8種)を重ねられます。

書き出しは、SVGコピー・SVG保存・PNG保存の3種で、どれも背景は透過です。対称展開で複製した図形も実体の図形として書き出すので、FigmaやIllustratorでそのまま編集できます。

UIはグレーだけのモノクロで、色が出るのは描いた模様とペンの色の帯だけです。見た目の元はペンプロッターの用紙で、描くのは線(一部は点や面)です。

数式と出典を、描いている絵と同じ画面に。

O®b.の44のモデルは、どれも出典のある数学のモデルです。描いている数式は、今の値を入れた形で常に画面の上部に出ており、パラメータを動かすと、絵と一緒に数式の値も変わります。

  • 数式と出典:全モデルに、値を入れた数式・出典・「何が何を決めるか」の短い解説を付けています。モデル一覧では、マウスを乗せたモデルが描き直され、数式と解説が出ます
  • 3つの掛け合わせ:モデル(44)・プリセット(217)・対称展開(8種)を組み合わせます。サイコロのボタンを押すとパラメータを振り直し、長押しすると3つをまとめて抽選する「おまかせ」になります
  • 変形と動き:トランスフォーム(揺らぎ・波・渦・墨流しなど8種)は線の座標そのものを変形するので、書き出しにも入ります。モーション(回転・振り子・呼吸など8種)は画面の上だけで動き、書き出しは止まった状態になります
  • そのまま使える書き出し:SVGコピー・SVG保存・PNG保存の3種で、範囲は見えている画面のとおり、背景は透過です。PNGは1単位を2pxとし、最大1600万画素まで書き出します。同じ値と同じ乱数の種なら、どの端末でも同じ絵になります。

O®b. - システム要件

推奨ブラウザ
Google Chrome/Microsoft Edgeの最新版O®b.は、JavaScriptを有効にしてご利用ください。
対応ブラウザ
Chrome/Edge 111以降、Safari 16.2以降(iOS 16.2以降)、Firefox 113以降O®b.のご利用は、可能な限り最新バージョンのブラウザをご利用ください。対応ブラウザ以外のご利用では、画面の表示や操作が正しく機能しない場合があります。テーマの円形の塗り替えや、ばねのような動きに対応していないブラウザでは、これらの動きを省いて動作します。
対応端末
パソコン/スマートフォンO®b.は、すべての図形を数式からSVGとして生成し、WebGLやCanvasは使いません。

O®b.は、パラメータを動かすたびに、図形を数式から計算し直して描きます。端末のCPU性能、メモリ容量、ブラウザの実装などによって、描画速度や操作レスポンスに差が生じる場合があります。
反応拡散・ニュートン法のフラクタル・アインシュタイン・タイルなどの重いモデルは、全画面でドラッグすると1コマの描画に20〜80msかかることがあり、スマートフォンでは動きが遅くなる場合があります。

O®b.はブラウザの中だけで動作し、サーバーとの通信やアカウントは不要です。操作の状態は、お使いのブラウザ(localStorage)に保存されます。

O®b.はアカウント登録など不要でどなたでも無料でご利用いただけます。

O®b.は定期的にアップデートを行い、新しいモデルや機能を追加するほか、ブラッシュアップや仕様変更、一部機能の削除を行う場合があります。

*O®b.のご利用に際し、当方の定める利用規約*の一部が適用されます。

O®b.を使ってみましょう。

モデルを選び、パラメータを動かし、対称展開を重ねて、SVGで書き出す。O®b.は、出典のある44の数式を、ブラウザの上で操作できるようにしたWebアプリケーションです。