astris.design

鱗文様 JavaScriptアニメーション

鱗文様(うろこもんよう)とは、二色の正三角形あるいは二等辺三角形を交互に配した幾何学模様です。英語の鱗模様(scale pattern)は、円弧を並べた魚の鱗のような模様を指します。

日本では、蛇や竜の鱗に似ていることから鱗文様と呼ばれ、古くから魔除けの文様として使用されてきました。
また、鱗紋は家紋にもよく使われ、三つ鱗、三つ盛り三つ鱗、七つ繋ぎ鱗など、様々なバリエーションがあります。

鱗文様を題材に、インタラクションのあるJavaScriptアニメーションを制作しました。
鱗文様の正三角形パターンと、色の三属性(色相・明度・彩度)を取り合わせた実験的な作品です。
1秒ごとに鱗の明度がランダムに変わるアニメーションです。明度を変化させる配色やアニメーションは、光の反射や、霞がかったような奥行き感を表現することができます。
アニメーション部分をクリック(タッチ)する度に、全体の色相がランダムに変わるようにしています。
また、アニメーション上でカーソル(指)を動かすと、彩度が変わるようにしています。カーソルを右にするほど、彩度が低くなります。