astris.design

亀甲繋ぎ JavaScriptアニメーション

亀甲繋ぎ(きっこうつなぎ)とは、正六角形を隙間なく配した幾何学模様です。英語では、ミツバチの巣の形からハニカム模様(honeycomb pattern)と呼ばれます。

日本では、亀が長寿の象徴であることから、吉祥文様として古くから親しまれてきました。
そのため、亀甲文様には、亀甲つなぎ、子持ち亀甲、亀甲花菱、毘沙門亀甲など様々なバリエーションがあります。

亀甲つなぎを題材に、インタラクションのあるJavaScriptアニメーションを制作しました。
亀甲つなぎの正六角形パターンと、色の三属性(色相・明度・彩度)を取り合わせた実験的な作品です。
3秒ごとに亀甲の色相がランダムに変わるアニメーションです。
アニメーション上でカーソル(指)を動かすと、明度と彩度が変わるようにしています。カーソルを下にするほど明度が低くなり、右にするほど彩度が低くなります。
また、アニメーション部分をクリック(タッチ)する度に、無彩色のセパレートカラーの明度が低くなるようにしています。セパレートカラーの色(白・灰・黒)によって、アニメーション全体の印象が変わることが確認できます。