タートルグラフィクス(Promise版)のサンプルその３　複数カメでカメ視点

タートルグラフィクス(Promise版)のサンプルに、カメを中心に据えた画像を同時に表示。２つのカメで同期して描き始めて、途中でもう１度同期してカメ増やして続きを描く。

エディタ

プログラム

# タートルグラフィクス(Promise版)を取り込む
!「https://n3s.nadesi.com/plain/792.js」を取り込む

一時キャンバス = 「canvas_temp」のDOM要素取得
もし、一時キャンバス=NULLならば、
　一時キャンバス = 「CANVAS」のDOM要素作成
　一時キャンバス["id"] = 「canvas_temp」
　描画中キャンバス["parentNode"]に一時キャンバスをDOM子要素追加
ここまで
一時キャンバス["width"] = 描画中キャンバス["width"]
一時キャンバス["height"] = 描画中キャンバス["height"]

カメ描画先 = 一時キャンバス

主観描画処理

●主観描画処理
　「主観描画処理」を画面更新時実行
　全描画クリア
　もし、カメ数取得＝0ならば、戻る。

W = 描画中キャンバス["width"]
　H = 描画中キャンバス["height"]
　表示エリアリスト４ = [
　　{left: 0, width: W/2,top: 0,height: H/2}
　　{left: W/2, width: W/2,top: 0,height: H/2}
　　{left: 0, width: W/2,top: H/2,height: H/2}
　　{left: W/2, width: W/2,top: H/2,height: H/2}
　]

表示エリアリスト２ = [
　　{left: 0, width: W/2,top: 0,height: H}
　　{left: W/2, width: W/2,top: 0,height: H}
　]

もし、カメ数取得≦２ならば、
　　表示エリアリスト = 表示エリアリスト２
　違えば、
　　表示エリアリスト = 表示エリアリスト４
　ここまで

TID = 0
　表示エリアリストを反復する
　　表示エリア = それ

もし、TID≧カメ数取得ならば、
　　　続ける
　　ここまで

XY = TIDからカメ位置取得
　　D = ((TIDからカメ角度取得)+90) % 360

キャンバス状態保存
　　黒色に線色設定
　　空に塗色設定
　　1に線太さ設定
　　[表示エリア["left"],表示エリア["top"],表示エリア["width"],表示エリア["height"]]に四角描画
　　描画中コンテキストの"beginPath"を[]でJSメソッド実行
　　描画中コンテキストの"rect"を[表示エリア["left"],表示エリア["top"],表示エリア["width"],表示エリア["height"]]でJSメソッド実行
　　描画中コンテキストの"clip"を[]でJSメソッド実行

キャンバス状態保存
　　[表示エリア["left"]+表示エリア["width"]/2, 表示エリア["top"]+表示エリア["height"]/2]に描画起点設定
　　 (360-D)に描画回転
　　一時キャンバスを[-XY[0],-XY[1]]に画像描画
　　キャンバス状態復元
　　黒色に線色設定
　　黒色に塗色設定
　　1に線太さ設定
　　[表示エリア["left"]+表示エリア["width"]/2,表示エリア["top"]+表示エリア["height"]/2]へ3の円描画

キャンバス状態復元

TID = TID + 1
　ここまで
ここまで

同期カウンタ = 0

カメ全消去

T0 = カメ作成
赤色にカメペン色設定
オフにカメペン設定
150だけカメ進む
(90+60)だけカメ右回転
オンにカメペン設定の成功時には
　２で同期チェック後には
　　魔法円描画共通A
　ここまで
ここまで

T1 = カメ作成
青色にカメペン色設定
オフにカメペン設定
-150だけカメ進む
(30)だけカメ左回転
オンにカメペン設定の成功時には
　２で同期チェック後には
　　魔法円描画共通A
　ここまで
ここまで

●(CALLBACKをNで)同期チェック後
　同期カウンタ = 同期カウンタ + 1
　もし、同期カウンタ＜Nならば、戻る。
　同期カウンタ = 0
　CALLBACK()
ここまで

●魔法円描画共通A
　２回繰り返す
　　TID = 回数-1
　　TIDにカメ操作対象設定
　　２回繰り返す
　　　150*SQRT(3)だけカメ進む
　　　120だけカメ右回転
　　ここまで
　　150*SQRT(3)だけカメ進む
　　60だけカメ右回転
　　黒色にカメペン色設定
　　180回繰り返す
　　　1だけカメ右回転
　　　(150*PI/180)だけカメ進む
　　ここまで
　　オフにカメペン設定
　　90だけカメ左回転
　　10だけカメ進む
　　90だけカメ左回転
　　オンにカメペン設定
　　黒色にカメペン色設定
　　30回繰り返す
　　　1だけカメ左回転
　　　(160*PI/180)だけカメ進む
　　ここまで
　　オンにカメペン設定の成功時には
　　　２で同期チェック後には
　　　　魔法円描画共通B
　　　ここまで
　　ここまで
　ここまで
ここまで

●魔法円描画共通B
　２回繰り返す
　　TID = 回数-1
　　TIDからカメ複製
　　オフにカメペン設定
　　90だけカメ左回転
　　110だけカメ進む
　　90だけカメ左回転
　　オンにカメペン設定
　　180回繰り返す
　　　1だけカメ右回転
　　　(48*PI/180)だけカメ進む
　　ここまで
　　カメ非表示
　　TIDにカメ操作対象設定
　　150回繰り返す
　　　1だけカメ左回転
　　　(160*PI/180)だけカメ進む
　　ここまで
　　カメ非表示
　ここまで
ここまで

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ