![moiré](https://cdn-ak.f.st-hatena.com/images/fotolife/k/kimizuka/20240326/20240326194606.gif)
moiré
2012.11
干渉縞を思う存分鑑賞できるウェブサイト
概要
moiréは、干渉縞を思う存分鑑賞できるウェブサイトです。
試したこと
- ディスプレイ上でのモアレ
展示の準備でアルミパンチングを買いに出かけた時のことです。
![](https://images.microcms-assets.io/assets/a9ce2ee259884164951be5f0b178c800/a824d3779a434b0fbb5cf9a53097d425/moire-1.png)
アルミパンチングを棚から1枚取り出す際に、かっこいいモアレが発生し、衝撃を受けました。
早速、HTML上でアルミパンチングを模した画像を重ね、回転させると同じようなモアレを発生させることができたため、Canvasで画像を動的生成するように改良し、干渉縞(モアレ)を干渉できるウェブサイトの誕生に至りました。
考えたこと
- 錯視を使ったコンテンツ
モアレを使わずに同じようなジェネラティブアートを作ろうとすると結構大変な気がするのですが、モアレという現象を使うとものすごく簡単に実装できるのがとても興味深いと考えました。
モアレを錯視に分類するかは意見の分かれるところかもしれないですが、錯視を活用することで実装工数と驚きのコストパフォーマンスを大幅に向上できる可能性を感じています。
![](https://images.microcms-assets.io/assets/a9ce2ee259884164951be5f0b178c800/4838619015b243738d075f0f7e306cbb/moire-2.png)