スクリーンショット_2019-08-07_21

LiveCodeLab を触ってみる

オープンキャンパスで用いたテキストです.模擬授業ではなく体験コーナーなので,ほんのさわりだけです.

はじめかた

LiveCodeLab のwebサイトにアクセスし,“Go Play !” をクリック.手元の Mac では Safari でなぜかうまく動作しなかったので,Google Chrome で試しました.

操作確認

rotate
box 1, 1, 1

入力したプログラムが即座に実行され,描画されます.

・box の後ろの数字を 3, 1, 1 に変えてみましょう.
・box の後ろの数字を 3, 0.5, 0.5 に変えてみましょう (小数点とコンマを間違えないように注意)
・box を ball に変えてみましょう.
・rotate の後ろに time * 2 と加えて,rotate time * 2 としてみましょう.

位置を指定する

rotate
box 1, 1, 1
move 1, 1, 1
box 1, 1, 1

・move の後ろの数字を 0.5, 0.5, 0.5 としてみましょう
・立方体を3つにするにはどうすればいいでしょう?
(答)
いまあるプログラムの後に
move 0.5, 0.5, 0.5
box 1, 1, 1
を追加するとよい.

たくさん並べる

インデント (字下げ) は tabキーで出来ます.画面では「▶」が表示されます.

background 0
10 times
▶rotate
▶box 1, 1, 1

以下,少しずつ変化させてゆきます.

枠だけにする

background 0
10 times
▶rotate
▶noFill
▶box 1, 1, 1

少しずつずらす

background 0
10 timesrotatebox 1, 1, 1
▶move 0.1, 0.1, 0.1

直方体のサイズを変える

background 0
10 timesrotatebox 0.1, 0.1, 3
▶move 0.1, 0.1, 0.1

直方体ではなく球にする

background 0
10 timesrotateball 0.1, 0.1, 3
▶move 0.1, 0.1, 0.1

応用編

background 0
rotate time * 0.5
for i in [0...10]
▶for j in [0...10]
▶▶for k in [0...10]
▶▶▶pushMatrix
▶▶▶move i/2, j/2, k/2
▶▶▶rotate
▶▶▶box 0.3, 0.3, 0.3
▶▶▶popMatrix

・background の後ろの数字を 255 にしてみましょう.
・box の前の行に noFill を追加してみましょう.
・box を ball または peg に変えてみましょう.
・box の後ろの数字を自由に変えてみましょう.
・move i/2, j/2, k/2 の数字の部分を自由に変えてみましょう.
・3つある for の [0...10] の 10 は大きくすると動きが鈍くなってしまうので注意.

もっと知りたい

画面上部メニューバーの Demos からいろいろ見てみましょう.

日本語での書籍はこちらを.


この記事が気に入ったらサポートをしてみませんか?