謎模様ジェネレータ２

元ネタ

シェイプの指定が出来る謎模様ジェネレータ

より戦闘機的ドット絵を用意する事を意図する感じ

テーブル表示でカタログから選ぶようなUI

白、黒、透明の３値のみ

インベーダーみたいなのをイメージしてる

2021/08/08

試作品

https://gyazo.com/d2cc5fcf0e2f691de6b6607cf22b7079

KEEP

新しいモバイルPCでの初めての作業

右向きの戦闘機をイメージ

PROBREM

仕上がりを見るとちょっと野暮ったい気がする

シェイプの影響が強すぎて戦闘機感があまりない

特に矩形パターンは最悪

調整項目が無い

動作速度は今は無視

根本的にアイデアが悪い可能性・・・

なんか上段3番目と中断2番目、下段1番目は同じ模様になってない？

TRY

透明と隣接する黒は消すようにするとシェイプに多様性が出るかも

インベーダーに寄せるなら、4方を白に囲まれてない黒を消す？

孤立してる白（8方に白が隣接していない）も消したほうが良い気がする？

インベーダーにもう少し寄せたい

インベーダーの敵は11x6px

三角形シェイプは縦を奇数にした方が良いかも

シェイプには、長方形（縦長、横長）を追加したい

余談

上下複製せず、三角形シェイプを2等辺三角形にすれば横から見た戦闘機が作れる？

クリックしたらそのセルをメモできる機能があるとうれしいかも

なんか機能持たせないと誤解を与えそう

透明と隣接する黒は消す

https://gyazo.com/8c97c1ae3eed84855ada0608f904e821

Photoshopでやってみたけどだいぶそれっぽいんじゃない？

何か機械モデル作る時のシェイプのアイデアに使えるかも？

これ、「4方を白に囲まれてない黒」じゃないな・・・

8方に白が隣接していない白を消すのは、1ドット孤立してるやつしか消えないのであまり意味ないかな

実装検討

消える条件

透明ピクセルに隣接している「黒の塊」

手順

黒の塊の調査

上下左右にドットを調査

削除する塊か、残す塊かの判定

塊が透明ドットに接触していたら消す

調整項目

セル数

今の性能だと16セルがギリギリかな・・・

WebWorkerの出番のような気がする

画像解像度

絵の向き

ノイズの種類

パーリンノイズの出番は無いかな・・・

参考

ファビコン回り

フォント回り

いったん完成！

v1.1に向けて

フッターにauthorの追記

ヘルプの更新について、「矢印」だと伝わらんのでボタンの埋め込み

2023/01/07

v1.2に小改造

・気持ち動作速度改善

・表示サイズの変更が、画像サイズに影響されないよう改善（画像サイズはセル数と必ず一致する）

・package.jsonが同梱されていなかったのを修正

・npmライブラリの更新

・rollupの更新に追従（rollupconfig）

やっぱ1セル1ドットの方が使いやすい