二匹の蝶アサギマダラの飛翔
アサギマダラという優雅な蝶を写真からトレースし、三次元で羽ばたいたり移動したり向きを変えたりするようにしました。
斜め上にカメラを設置していますが、簡便のため、蝶が実際に飛んでいるのは一定の高さの平面です。
若干向きがおかしいところがあるかもしれませんが、完全に三次元の飛翔とすれば解決するかと思いますが、カメラの位置の関係と、一部二次元で処理している関係かと思います。
2022/12/21
空を舞うリボン
平らなリボンを描きました。
螺旋状に空を移動しますが、移動する線の法線ベクトル方向にリボンを広げています。
半透明の赤いリボンの縁は金色っぽい色にしました。
半透明なので前後関係は厳密ではありませんが、微妙に光の効果が入っています。
2022/12/17
クリスマスの鐘
断面図を回転させることにより回転体の鐘を制作しました。
光源を設定することにより、揺れるとともに、陰影が少し変わることにご注意ください。
断片は、曲線に沿って、同じぐらいの長さになるように設定しました。
左右に揺らすため設計図段階でx-z平面における二次元回転を行っています。
2022/12/15
波紋
光源からの光の入射がカメラとどれぐらいずれているか(実際には、カメラから見て光源とどれぐらいずれているかを算定)により、色の明度を変更することにより、水面が波打ち状況を再現しています。
PCでは計算量の限界により解像度を10ピクセルとし、スマホなどサイズが960以下にのデバイスについては解像度を4ピクセルとしました。
デバイスによりスピードに差があるのかもしれません。
2022/12/13
地球
地球を10度ごとの緯線と罫線で表し、アニメーションにより回転させ、カメラを移動させました。
地球は、緯線と経線で囲まれた四辺形を一つのパスとすることで、色つけを可能にしています。
また、色は半透明ですが、背後とのパスが後から上書きされることのないように描き始めの経度を調整しています。
2022/12/13
習作: 階段
プログラムで板の組み合わせを設計し、それぞれの板の六面のうち隠れた部分が透けて見えにいように処理しました。
カメラとそれぞれのパスの間の距離を重なった点において算定することにより、どのパスがカメラに近いかの判定をしています。
まれに透けてしまっている場合がありますが、 今後は、さらに研究を進め、このような不具合を直していきたいと思います。
2022/12/11
習作: ビル街を散策
東西に並ぶ大きさと色が毎回ランダムのビルの街に入っていき、右、左、上と眺めた光景です。
プログラムで指定したシナリオに沿って人は動いていきます。
高いビルは、魚眼レンズで見るように微妙に湾曲させていますので、よりリアルな感じが出ていると思います。
2022/12/01
【注意】パソコンの電力をかなり消費しますので、しばらくしたら閉じることをお勧めします
習作: ドローンから撮影した石畳
三次元空間のアニメーションを習得する目的で、地上に作った丸い石畳を上空からドローンのようなもので撮影し、至近距離に降下後、また彗星のように離れていくという画像です。
【注意】パソコンの電力をかなり消費しますので、しばらくしたら閉じることをお勧めします
オーロラをできるだけリアルに再現
オーロラの感じをできるだけリアルに再現しようとしてみました。
パソコンの電力をかなり消費しますので、しばらくしたら閉じることをお勧めします
ストロークにグラデーション
図形はベクトルの角度と長さに周期的変化を与えたもののうちラインというより幾何学的なイラストとして興味深かったものに、さらにサインカーブの周期的変化を付け加えてみました。
コスモスの花に戯れる光
コスモスの話にパステルカラーの淡い光が蛍のように明滅するデザインです。
装飾ラインのコレクション
今回製作したプログラムで、実際のWEBサイトなどのデザインとして使ってもおかしくないものを中心に集めました。
4つの係数の組み合わせて色んな図柄が出てきますが、無数の組み合わせがありますので、比較的良さそうなものは、係数をデザインとともにメモっておく必要があります。
その意味で良さそうなもののみ、集めてみました。
ベクトルの方向と長さを周期的に変化させたライン
今度は角度だけでなく、ベクトルの長さも周期的に変化させました。
MyLine関数の4つの引数の組み合わせを変えると実にいろんな形の図柄が出てきます。
ベクトルの方向を周期的に変化させたライン
0度のベクトルを速度成分とすれば直線が描けますが、角度を周期的に変化させれば、どのような線が描けるでしょうか。
(1)-45から45度の間で変化させた場合
(2))-90から90度の間で変化させた場合
(3)-120から120度の間で変化させた場合
(4)-180から180度の間で変化させた場合
(5)-210から210度の間で変化させた場合
(5)-240から240度の間で変化させた場合
Paper.jsのonFrameを使ったアニメーション
Paper.jsのチュートリアルにあるサンプルコードを加工しました。
円を気球に見立て、ゴンドラを追加しました。
また、気球は、ランダムにカラフルな色をつけました。
さらに、移動に際しては、上下にも微妙に移動し、右向きのスピードも若干微妙に変化させています。
canvasで描いた線
canvasにPaper.jsを使って4種類のデザインのラインを描画してみました。
パターン1では最初の円をつくったあと、クローンで増やし一つずつx座標を移動させています。
パターン2では最初の円をつくったあと、クローンで増やし一つずつx座標とy座標を移動させています。
パター3では、人一つ半径が異なるため、クローンは使わず一つずつその場で作成しています。
パターン4もパターン3と同様ですが、パターン3の周期を2倍にするとともに位相をずらしています(a4/2+130のところ)。また少しずつ回転させています。
canvasで描いた花
canvasにPaper.jsを使って描画してみました。
花弁のパスは固定し、付け根のところを回転の原点として、30度ずつ回転させています。
仕上がりが少し大き過ぎたので、グループ化した上でサイズを半分にしました。
今回グラデーションを使っているとはいえ、まだまだ単純な描画ですが、徐々に高度化していきたいと思います。
jQueryの波紋エフェクトRipples
jQueryには便利なプラグインがあるものですね。
画像に波紋の動きを付けられるプラグインripplesを使っています。
マウスの動きとともに反応し、そこから波紋が広がります。
果物がより美味しく感じられないでしょうか。
フォントにはADOBEからvdl-logomarujr-pop-futolineを採用しました。
head内にあるコード付きのスクリプトはこのフォント用のものです。
pathを三重に折り重ねた雲の景色
パスを重ねただけですが、自作パスジェネレーターでたくさんの丸を合体させたことのほか、
小さめの雲3つをtransformを使って、画面いっぱいになるようにサイズを調整しています。
その一つの訓練としてご覧ください。
これでわずかに4KBですから、pathは長いとしてもとても軽いです。
水玉風のデザイン
うちの店のクッションの色合い参考にし、かつ水玉の半径が場所によって変わるようにしてみました。
今のところ、特に動きはつけていません。
vanta.jsの波
これは、vanta.jsというライブラリで提供されているアニメーションの一つです。
サイトを訪問すれば、右上の「Customize & Get Code」をクリックすれば、色合いやスピードなどカスタマイズができ、コードの取得も可能となっています。
Vivus.jsを使った一筆書き
Vivusのサイトの説明によれば、
「Vivus は軽量の JavaScript クラス (依存関係なし) で、SVG をアニメーション化して、描画されているように見せることができます。 さまざまなアニメーションが利用可能で、カスタム スクリプトを作成して SVG を好きなように描画するオプションもあります。」
とあります。
アニメーションのタイプとしては、「Delayed」、「Sync」、「OneByOne」があるようです。ここでは、OneByOneを用いています。
