ハイパーピクトッチ 例15 トランポリン

posted in: 開発者ブログ | 0

 

 

プログラム

こちらをクリックしてください

トランポリン

 

 

 

説明

 

跳ねる人のコード

1回目の動き

ブロック 説明
4 左かたを1秒で反時計回りに90度回転し、正面を向く 左肩を90度回転させながら1秒かけて動き、最後は正面を向きます。
5 1秒で右に50、上に110移動する 右へ50、上へ110移動します。
6 左かたを1秒で反時計回りに90度回転する(待ち) 左肩をさらに90度回転させます。次の動作を待ってから進みます。
7 1秒で右に50、下に110移動する(待ち) 右へ50、下へ110移動します。

2回目の動き

ブロック 説明
8 左かたを1秒で反時計回りに90度回転する 左肩を90度回転させます。
9 1秒で左に50、上に110移動する 左へ50、上へ110移動します。
10 左かたを1秒で反時計回りに90度回転する(待ち) 左肩をさらに90度回転させます。
11 1秒で左に50、下に110移動する(待ち) 左へ50、下へ110移動します。

繰り返し終了

ブロック 説明
12 繰り返し終了 ここまでの動きを1セットとして、全部で3回繰り返します。

このプログラム全体の動き

  • ピクトグラムを小さくします。
  • 左肩を90度ずつ回転させながら、
    • 右上へ移動
    • 右下へ移動
    • 左上へ移動
    • 左下へ移動
  • この一連の動きを3回繰り返すため、ピクトグラムが四角形を往復するような動きになります。
  • 肩の回転も加わるため、ジャンプや体操をしているような動きに見えるプログラムです。

トランポリンの本体(ジャンプする部分)と4本の脚を描く物体定義のコード

一行ずつ説明すると、次のようになります。

ブロック 説明
1 物体定義 これからトランポリンの形を作るための部品(物体)を定義します。
2 色を□にする これから描く図形の色を設定します。(画像では色が未設定ですが、通常はここで描画色を決めます。)
3 中心(0,40)、横220、縦15、0度回転した円を描く。 中心座標が (0,40) の位置に、横220・縦15の細長い楕円を描きます。これがトランポリンのジャンプ面になります。
4 (200,40)から(200,100)へ線引きする。 右端に縦の線を描きます。これは右側の脚です。
5 (-200,40)から(-200,100)へ線引きする。 左端に縦の線を描きます。これは左側の脚です。
6 (75,53)から(75,100)へ線引きする。 中央より右側に縦の線を描きます。これは右内側の脚です。
7 (-75,53)から(-75,100)へ線引きする。 中央より左側に縦の線を描きます。これは左内側の脚です。

完成する形

このコードを図にすると、おおよそ次のようなトランポリンになります。

      ─────────────────────
     (細長い楕円=ジャンプ面)

      │      │      │      │
      │      │      │      │
      │      │      │      │
  • 上の細長い楕円 … ジャンプする布の部分
  • 左右の2本 … 外側の脚
  • 真ん中付近の2本 … 内側の脚(支え)

この物体の役割

このプログラムは、トランポリンの見た目だけを描くためのコードです。動きはありません。実際に跳ねたり移動したりする動作は、別のプログラム(実行ボタンが押されたときのコード)で行います。

 

 

ブログ作成者 Reiko Sugiyama

ハイパーピクトッチ 例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

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

 

概要

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

 

プログラムの説明

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

 

学習ポイント

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

 

プログラム

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