はてなブックマーク

描画ライブラリを使える環境ならば、たとえば円を描くのに書くコードは一行で済むだろう。ただ、コード一行でほぼ完全な真円を描いてもなにかつまらない。そこであえて意図的に雑な図形をコードで描きたいと考えて試行錯誤した結果、ある程度満足するところまでいったのでその技法について解説を行う。 意図的に雑な線を描く まずは雑な線をコードで表現するために、実際に適当な線を何度も描いてみて特徴を探してみる。そうすると下記のような特徴が現れた。 始点と終点の位置が多少バラける 途中から位置が上下にずれているのに気づきそれを元の位置に直そうとする 上記の内容を3次ベジェ曲線程度で表現するために色々と試行錯誤した結果、下記の手順になった。 始点と終点を用意する 始点から終点までの20%〜40%の地点に点を置く 更に上記の倍の地点に点を置く 4つの点を少しずらす 4つの点をもとに3次ベジェ曲線を描く 以前、Twit

概要 この記事では2次ベジェ曲線のバウンディングボックスを求める方法を解説する。 求めるバウンディングボックスは2つあり、2次ベジェ曲線の3つの制御点（始点・制御点・終点）を囲む最小の矩形範囲（上記の青線）と、実際に引かれるベジェ曲線を囲む最小の矩形範囲（上記の橙線）になる。 まずは、計算が簡単な前者から解説する。 3つの制御点を囲む最小の矩形範囲を求める type Point = { x: number; y: number; }; const min = (a: Point, b: Point): Point => { return { x: Math.min(a.x, b.x), y: Math.min(a.y, b.y) }; }; const max = (a: Point, b: Point): Point => { return { x: Math.max(a.x, b.x)

概要 図形を編集できるソフトウェアなどでよく見かける、矩形オブジェクトをリサイズしたり回転したりできる機能が作りたくて先日コードを書いてみたが、想像以上に難しかったのでハマりポイントを含めた制作手順をここに書くことにした。 制作環境 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に分解し、それぞれの総和をピ

先日、なんとなくGIF画像の仕組みが知りたくなって、GIFのフォーマットを調べながらTypeScriptでデコード処理を書いてみたが、自分で書いたコードでGIFアニメーションが再生すると結構感動したので、そのときの知見を共有したい。 GIFのフォーマット GIFデータがGIFであるためには、データ先頭の3byteが "GIF" で、次の3byteにバージョンが入っていて…と明確にフォーマットが決まっており、フォーマットの詳細は下記のサイトが参考になる。 とにもかくにも、GIFをバイナリデータとして読み込まなければならないのでまずはそのやり方からスタートする。 バイナリデータとしての読み込み const response = await fetch("xxx.gif"); const arrayBuffer = await response.arrayBuffer(); const buff

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

概要 WaveFunctionCollapse（WFC）はMaxim Gumin氏が公開している描画ライブラリで、用意したタイル画像を自動で繋ぎ合わせて新たな画像を生成する機能を持つ。 もとはC#で書かれたライブラリであり、現在は多数の他言語に移植されているが、この記事では本家のWFCの特徴と内部のアルゴリズムについて解説を行う。 WFCを利用している代表的なアプリケーション Steam等で公開されている上記2つのゲームはWFCを内部で利用している。特に下側の、水上で町を作るゲームである「Townscaper」は2021年12月にブラウザ向けのデモ版が無料で公開されたことにより話題になった。 WFCのモード WFCには SimpleTiledModel と OverlappingModel の2つのモードがあり、それぞれのモードに合わせて素材となる画像を用意する必要がある。 SimpleT