アニメーション動画 「BallPicture」 シリーズ − 「Stripes」

トップページへ、 BallPicture トップへ

「BallPicture − Stripes」は、Ball の表面と内面に着色した縞状の帯(Stripe)を形成し、この Stripe の形状を変化させたり、Stripe と Stripe の間の領域に各種の要素を展開させたりするアニメーション動画です。

この動画は、YouTubeで公開しています。

 動画の作成方法

1.開発環境
IDE : Visual Studio 2010 Professional Edition − WPF(C#)
.NET Framework : .NET Framework 3.5 Client Profile

2.Ball の構成方法
David Sackstein's Blog」で紹介されている SphereMeshGenerator クラスを使って、Ball の3Dオブジェクトを作成しました。
その Material と BackMaterial に、Stripe を描画したベース画像を ImageBrush として取り込んで、Ball の表面画像、内面画像としました。

3.Stripe の種類と構成方法
Type1: 2 本 Stripe
 
Type1の 2 本 Stripe は上左図のように赤と青の Stripe で構成したものです。
上右のベース画像を Ball の Material に適用し、不透明度を 50%にしたベース画像を Ball の BackMaterial に適用して構成しました。

Type2: 10 本 Stripe
 
Type2の 10 本 Stripe は上左図のように 10 色の Stripe で構成したものです。
上右のベース画像を Ball の Material に適用し、不透明度を 50%にしたベース画像を Ball の BackMaterial に適用して構成しました。

4.BGM
BGMには、フリー音楽素材サイト HURT RECORD の『ベテルギウス』を使用させていただきました。

 動画の構成

1.2 本 Stripe を形成するアニメーション
 
Ball の表面と内面に赤と青の Stripe を形成していきます。
Stripe 形成のアニメーションは、ベース画像のアニメーションによって行いました。
Ball の回転と移動のアニメーションは、Timer を使って、AxisAngleRotation3D と TranslateTransform3D の値を変更することによって行いました。

2.10 本 Stripe を形成するアニメーション
 
Ball の表面に 10色の Stripe を形成していきます。
Stripe 形成のアニメーションは、ベース画像のアニメーションによって行いました。
Ball を回転するアニメーションは、Timer を使って、AxisAngleRotation3D の値を変更することによって行いました。

3.10 本 Stripe でのアニメーション
10 本 Stripe の形成後、以下のアニメーションを行いました。

Stripe 幅を拡縮するアニメーション
 

Stripe を分割して別方向に回転させるアニメーション
 

Ball 内面に Stripe を形成するアニメーション
 

Stripe 間の領域に各種要素を展開していくアニメーション

満ち欠けする月を展開しました。


内側の円が拡縮するリングを展開しました。


一部が点滅する十字星を展開しました。


回転する多数の五芒星を展開しました。


 公開・更新履歴

 2017/11/17 ページを公開しました。

 ご質問・ご意見・ご感想

ご質問、ご意見、ご感想等の連絡は、 こちらへ

トップページへ、 BallPicture トップへ