p5.js 繰り返しと条件分岐

p5js, 公開資料

プログラミングにおいて「繰り返し」は非常に重要な考え方です。様々な方法で繰り返し処理を行うことができますが、ここでは繰り返し実行されるdraw関数を用いた描画のパターンを紹介します。条件分岐と偶然性との組み合わせで、多様性が一気に広がることを確認できるはずです。

ヨコ方向への繰り返し

1行目の「変数x」がdraw関数内で20ずつ加算され、値がどんどん大きくなることで、円のヨコの位置が変化しています。

このように、関数の外側で宣言された変数はグローバル変数と呼ばれ、プログラム全体で共有され、値も保持しながら使うことが可能です。

プログラムを改造して縦方向に繰り返し描画してみましょう。

ナナメ方向への繰り返し
ランダム位置への繰り返し

randomは指定した範囲内の乱数を発生させる命令です。パラメータの最小値と最大値の間の数を、いわばサイコロを振るかのように適当な数字を返してきます。

グリッド状への繰り返し

プログラムでは、条件に応じて処理を変更することが可能で「条件分岐」と呼ばれています。条件分岐というと難しく感じますが、日常生活でたとえると「雨降っていたら、傘を持っていく」というようなものです。

条件分岐を実現するための最も基本的な命令が「if」です。

下記のプログラムの例では「もしxが300より大きいのなら」→「xを0に戻し、yに20加算する」という処理になっています。

前回の授業で学んだ描画の命令と、今回学んだ「繰り返し・偶然性・条件分岐」を組み合わせると、表現の多様性が一気に広がります。右のテンプレートファイルをダウンロードして展開して、自分のコンピューターでパターンのデザインを作成してみてください。作成した画像はSlackにて共有します。

Related Posts

No results found

メニュー