ハイパーピクトッチ 例15 バイバイ メソッドチェーンと同じ動きを表現する

posted in: 開発者ブログ | 0

メソッドチェーンと同じ動きを表現する

 

概要

この例では、移動と回転を連続した動作として表現します。

 

プログラムの説明

元の考え方では、メソッドチェーンによって移動と回転をつなげて書きます。
HPTでは、移動ブロックと回転ブロックを連結し、同じ順序で実行されるようにしています。
書き方は違っても、複数の操作を連続して行うという考え方は同じです。

 

学習ポイント

・移動と回転を連続させる
・メソッドチェーンの考え方を確認する
・ブロックの連結で同じ動きを表す

 

 

 

プログラム

バイバイ メソッドチェーンと同じ動きを表現する

 

 

ハイパーピクトッチ 例14 バイバイ 移動と回転を順に書く

posted in: 開発者ブログ | 0

移動と回転を順に書く

 

概要

この例では、ピクトグラムを移動させた後、左上腕を1回転させます。

 

プログラムの説明

移動の命令と回転の命令を別々に並べて書く構成です。
まずピクトグラムの位置を変え、続けて腕の回転を実行します。
複数の命令を順番に並べることで、位置の変化と体の動きを組み合わせられます。

 

学習ポイント

・ピクトグラムを移動する
・左上腕を360度回転させる
・移動と回転を組み合わせる

 

 

 

 

プログラム

バイバイ 移動と回転を順に書く

ハイパーピクトッチ 例13 バイバイ 5体のピクトグラムを配列のように扱う

posted in: 開発者ブログ | 0

5体のピクトグラムを配列のように扱う

 

概要

この例では、5体のピクトグラムを横に並べ、全員にバイバイをさせます。

 

プログラムの説明

各ピクトグラムはpic1からpic5までのタブとして作成され、それぞれの中で位置調整、サイズ調整、動作byebyeの実行を行います。
元の考え方では、複数のピクトグラムを配列に入れて順番に処理します。HPTでは、それぞれのタブに同じ動作構造を持たせることで、同じ結果を表現しています。
多人数のアニメーションでは、配置、サイズ、共通動作の管理が重要になります。

 

学習ポイント

・5体のピクトグラムを配置する
・サイズを小さくして画面内に収める
・同じ動作を複数体に適用する

プログラム

バイバイ 5体のピクトグラムを配列のように扱う

ハイパーピクトッチ 例12 バイバイ 速さの違うバイバイを作る

posted in: 開発者ブログ | 0

速さの違うバイバイを作る

 

概要

この例では、2体のピクトグラムが異なる速さでバイバイします。

 

プログラムの説明

pic1は標準的な時間で腕を上げたり手を振ったりします。pic2は短い時間で同じ動きを行うため、より速いバイバイになります。
HPTでは、それぞれのピクトグラムの動作定義の中で、回転に使う秒数を変えています。
同じ動作の構造でも、時間の値を変えるだけでアニメーションの印象が大きく変わります。

 

学習ポイント

・同じ動作を異なる速度で実行する
・回転時間を調整する
・動きの印象を変化させる

 

 

プログラム

バイバイ 速さの違うバイバイを作る

ハイパーピクトッチ 例11 バイバイ 手続きとしてバイバイをまとめる

posted in: 開発者ブログ | 0

手続きとしてバイバイをまとめる

 

概要

この例では、バイバイの一連の動きを1つのまとまった動作として扱います。

 

プログラムの説明

HPTファイルでは、pic1とpic2の各タブに動作byebyeの定義を置き、それぞれの実行ブロックからその動作を呼び出しています。
動作の中身をまとめておくと、同じ処理を複数のピクトグラムで使いやすくなります。
これは、プログラムにおける手続きや関数の考え方につながる例です。

 

学習ポイント

・一連の処理を動作として定義する
・定義した動作を呼び出す
・同じ処理の重複を減らす

 

 

プログラム

バイバイ 手続きとしてバイバイをまとめる

ハイパーピクトッチ 例10 バイバイ 2体のピクトグラムでバイバイする

posted in: 開発者ブログ | 0

2体のピクトグラムでバイバイする

 

概要

この例では、2体のピクトグラムを左右に配置し、それぞれにバイバイの動きを行わせます。

 

プログラムの説明

pic1とpic2は別々のタブとして作成され、それぞれの中に「動作byebyeをする」ブロックと、動作byebyeの定義が入っています。
動作の定義は、腕を上げる、ひじを振る、腕を戻すという流れです。
複数のピクトグラムを使う場合でも、各ピクトグラムに同じ動作定義を持たせることで、同じジェスチャーを並行して表現できます。

 

学習ポイント

・2体のピクトグラムを配置する
・それぞれのタブで動作を実行する
・同じバイバイ動作を複数体に適用す

 

 

プログラム

バイバイ 2体のピクトグラムでバイバイする

ハイパーピクトッチ 例9 バイバイ 4つの部位からランダムに選ぶ

posted in: 開発者ブログ | 0

4つの部位からランダムに選ぶ

概要

この例では、左手、右手、左足、右足のいずれかでバイバイのような動きをします。

 

プログラムの説明

複数の条件分岐を組み合わせることで、4つの候補の中から1つを選ぶ構造になっています。
選ばれた部位に応じて、上側の部位と下側の部位を対応させ、回転方向も調整します。
条件分岐を増やすことで、単純なランダム動作から、より多様なアニメーションへ発展させられます。

 

学習ポイント

・複数の条件を組み合わせる
・手と足の候補を切り替える
・ランダム性のある動作を作る

 

 

 

 

 

プログラム

バイバイ 4つの部位からランダムに選ぶ

ハイパーピクトッチ 例8 バイバイ 条件分岐で左右どちらかの手を振る

posted in: 開発者ブログ | 0

条件分岐で左右どちらかの手を振る

 

概要

この例では、条件分岐を使って、左手または右手のどちらかでバイバイします。

 

プログラムの説明

確率分岐により、実行するたびに左手で振る場合と右手で振る場合が切り替わります。
右手を使う場合は、対象となる部位を右上腕と右ひじに変え、回転方向も左右に合うように調整します。
同じバイバイの動きでも、条件によって使う部位や角度を変えられることが分かります。

 

学習ポイント

・条件分岐を使う
・左手と右手を切り替える
・実行ごとに異なる動きを作る

 

 

 

プログラム

バイバイ 条件分岐で左右どちらかの手を振る

 

ハイパーピクトッチ 例7 バイバイ 繰り返しでバイバイを短く

posted in: 開発者ブログ | 0

繰り返しでバイバイを短く書く

 

概要

この例では、同じような手振りの処理を繰り返しブロックでまとめています。

 

プログラムの説明

左ひじを片方向に回転させ、続けて反対方向に回転させる処理を3回繰り返します。
繰り返しを使うことで、同じ命令を何度も並べる必要がなくなります。
バイバイのように同じパターンを何度か行う動作では、繰り返しを使うとプログラムを簡潔にできます。

学習ポイント

・同じ処理を3回繰り返す
・手振りの処理をまとめる
・プログラム量を減らす

 

 

プログラム

バイバイ 繰り返しでバイバイを短く

ハイパーピクトッチ 例6 バイバイ 変数で手の振り幅を変える

posted in: 開発者ブログ | 0

変数で手の振り幅を変える

 

概要

この例では、手を振る角度を変数として扱い、動きの途中で値を変化させます。

 

プログラムの説明

最初は小さめの振り幅で動かし、その後に角度を加算することで、次の振りではより大きく動きます。
定数は固定された値を表すのに向いていますが、変数は途中で変化する値を表すのに向いています。
アニメーションの中で動きに変化を付けたい場合、変数を使うと段階的な変化を表現できます。

 

学習ポイント

・変数を使って角度を保持する
・値を加算して振り幅を変える
・動きに変化を付ける

 

プログラム

バイバイ 変数で手の振り幅を変える