はてなブックマーク

概要 図形を編集できるソフトウェアなどでよく見かける、矩形オブジェクトをリサイズしたり回転したりできる機能が作りたくて先日コードを書いてみたが、想像以上に難しかったのでハマりポイントを含めた制作手順をここに書くことにした。 制作環境 Vite TypeScript PixiJS 描画ライブラリは何でもいいのだが、描画領域をクリックしたらイベントが取れるライブラリだと楽なのでPixiJSを採用した。 環境の用意 npm create vite Project name: ... sketch √ Select a framework: » Vanilla √ Select a variant: » TypeScript

この記事では上記動画のような四分木の中で最も複雑な領域を分割し続けるアルゴリズムについて解説を行う。実装例としてTypeScript + p5.jsのコードも載せている。 アルゴリズム まず元画像を用意する。 用意した画像を数学の象限のように4分割する。そして、分割した領域ごとにその領域の平均色で塗りつぶす。 分割したそれぞれの領域で、元画像の複雑さをスコアとして数値化する。 スコアが一番高い、つまり一番複雑な領域である左下を更に4分割する。 後の手順は前述の繰り返しで、分割した領域を平均色で塗りつぶし、それぞれの領域の複雑さをスコアとして表し、最も高いスコアの領域を更に分割していく。 ただし、分割対象となるのは今分割した左下領域だけではなく、それに加えて先程分割されなかった残りの3つの領域も含める。 どうやって平均色を求めるのか？ 対象領域の各ピクセルをRGBに分解し、それぞれの総和をピ

先日、ConvChainやWaveFunctionCollpaseの開発で有名なMaxim Gumin氏の新作ライブラリがGitHubに公開された。それはMarkovJuniorというライブラリで、色を置き換えるためのルールを定義しておくことで、プロシージャルに画像を生成するというものになる。 公開から1ヶ月経たずにGitHubスター4,000超えの人気レポジトリだが、この記事公開時点では、ドキュメントの整備が追いついていないようなので、簡易ながらMarkovJuniorの性質や利用方法についての解説を書くことにした。 MarkovJuniorの置き換えルール