p5.jsを使って「雲」を描くプログラムを作ってみました。 青空に雲が漂っているイメージです。 デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org 雲を描く仕組みは単純です。 １．キャンバスの背景色を青色にする …

p5.jsを使って「オーロラ」を描くプログラムを作ってみました。 黒い影が「山」、白い点が「星」、緑と紫の線が「オーロラ」を表現しています。 デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org 上記のようなオー…

p5.jsを使って「アーク」をベースにした模様を作ってみました。 デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org 上記のような模様を作る仕組みは簡単です。 １．キャンバス上にグリッドを配置する ２．各グリッ…

p5.jsを使って「幾何学模様」を作ってみました。 デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org アルゴリズムの説明 上記のような幾何学模様を生成する仕組みは単純です。 四角形のまわりに４つの四角形を次々…

p5.jsを使って「ボロノイ図」を描画するプログラムを作ってみました。 以下が完成したボロノイ図です。 デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org アルゴリズムの説明 上記のようなボロノイ図を描画する仕…

今回は、前回作成したプログラムからいろいろな経路を生成して、 どういう性質をもった経路が生成されるのか考察してみたいと思います。 ちなみに前回の記事は以下です。 techty.hatenablog.com とりあえずいろいろと経路を生成してみました。 生成された経…

サンゴ礁を使って経路探索するプログラムを作成してみました。 イメージとしては スタート地点にあるサンゴ礁がどんどん成長していき、ゴール地点に到達する という感じです。 左の画像はプログラムの実行結果。 右の画像は、左の画像に経路（黄色の線）を手…

p5.jsを使って「シダの葉」を生成するプログラムを作ってみました。 ・参照元 <https://en.wikipedia.org/wiki/Barnsley_fern> このような図形を「バーンスレイのシダ(Barnsley fern)」と呼ぶみたいです。 デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org アル</https://en.wikipedia.org/wiki/barnsley_fern>…

Daniel Shiffmanという方が作成した以下の動画を参考に サンゴ礁のようなものを作成するプログラムを作ってみました。 作成したといっても、動画で紹介されていたものを少し修正しただけですが。 ・参考にした動画 <https://www.youtube.com/watch?v=Cl_Gjj80gPE&list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH&index=38> 出来上がった作品 デモページとソースコー</https://www.youtube.com/watch?v=cl_gjj80gpe&list=plrqwx-v7uu6zizxtddrci6uhfth4filph&index=38>…

泡（バブル）が下から上に向かって上昇（アップ）していく感じのアニメーションを作ってみました。 バブルがアップしていくので、作品のタイトルは「バブルアップ」です。 デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.…

p5.jsでバブルソートのアニメーションを作成してみました。 ※バブルソート：並び替えのアルゴリズム デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org

p5.jsで凸包(とつほう)を作成するプログラムを作ってみました。 凸包は英語ではconvex hullといいます。 凸包とは、与えられた点をすべて包含する最小の凸多角形のことをいいます。 以下は作成した凸包プログラムです。 キャンバスをマウスでクリックすると…

p5.jsでボール同士の衝突アニメーションを作成してみました。 デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org

p5.jsで波紋が広がるアニメーションを作ってみました。 デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org

今日は「シェルピンスキーのギャスケット」を紹介します。 「シェルピンスキーのギャスケット」とは、以下のような三角形のことをいいます。 デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org アルゴリズムは以下…

前回はp5.jsライブラリを使うための準備として 開発環境のセットアップ方法について紹介しました。 前回の記事 techty.hatenablog.com 今回は、前回作成したプログラムの説明と p5.jsライブラリの基本的な仕組みについて紹介したいと思います。 前回作成した…

今日からp5.jsライブラリの使い方に関する記事を書いていこうと思います。 ・p5.js公式ページ <http://p5js.org/> 今日は初回ということで 「開発環境のセットアップ方法」 についてみていきます。 セットアップ方法といっても大したことはないです。 以下4つを用意するだけで</http://p5js.org/>…