ジグソーパズルの色を変えてみました。 上記のようなジグソーパズルを生成するプログラムは以下の記事にあります。 よかったら見てみてください。

ジグソーパズルをバラバラにしてみました。 作品タイトル：ジグソーパズル崩壊 デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org ジグソーパズルの色を変えた作品も作ってみたので、 よかったらこちらの記事も見て…

タイルを多角形にして配置してみました。 色は「ポケモンのポリゴン」を参考にしました。 作品タイトル：Polygon Tile デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org

パーリンノイズを使って「歪んだ地形」を表現してみました。 作品タイトル：The Wave デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org

p5.jsを使って「ジグソーパズル」の模様を生成してみました。 作品タイトル：ジグソーパズル デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org

前回作成したプログラムを使っていろいろな模様を作ってみました。 前回の記事はこちら。 techty.hatenablog.com 以下はcos波を使って生成した模様です。

「Sine波」と「パーリンノイズ」を使ったアート作品を作ってみました。 作品タイトル：Sine Noise デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org 上記のような模様を作る仕組みは単純です。 １．パーリンノイズ…

対角線を使ったアート作品を作ってみました。 作品タイトル：Diagonal デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org 上記のような模様を描く仕組みは単純です。 １．n = 1とする ２．n×nのグリッドを用意する …

サークルとグリッドを組み合わせたアート作品を作ってみました。 作品タイトル：Circle in Grid デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org 上記のような模様を描く仕組みは単純です。 １．n = 2とする ２．…

「ブラシを使って描いたような絵」をプログラムで描いてみました。 作品タイトル：ブラシグラデーション デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org 絵を描く仕組みは単純です。 キャンバスの上から下に向か…

三角形を使ったアート作品を作ってみました。 作品タイトル：三角形で埋め尽くす デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org

長方形を使ったアート作品を作ってみました。 作品タイトル：長方形で埋め尽くす デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org

プラス記号「＋」を使って絵を描いてみました。 作品タイトル：プラスアート 絵を描く仕組みは単純です。 １．プラス記号の線色、太さ、長さをランダムに決める ２．ランダムな場所にプラス記号を描画する ３．手順１に戻る これだけです。 デモページとソー…

p5.jsを使って「幾何学模様」を生成するプログラムを作ってみました。 以下の模様は「円の接線」を利用して描いています。 デモページとソースコードは以下にあります。 よかったら見てみてください。 editor.p5js.org 上記のような模様を描く仕組みは単純で…

前回の記事の続きです。 ちなみに前回の記事はこちら。 techty.hatenablog.com １ ２ ３ ４ ５ ６ ７ ８ ９ １０ １１ １２ １３ １４

前回の記事をもとに、いろいろな模様を作ってみました。 ちなみに前回の記事はこちらです。 techty.hatenablog.com １ ２ ３ ４ ５ ６ ７ ８ ９ １０ １１ １２ １３ １４ １５ １６ 今日はここまで。 続きはこちら。 techty.hatenablog.com

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 アルゴリズムの説明 上記のような幾何学模様を生成する仕組みは単純です。 四角形のまわりに４つの四角形を次々…

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

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

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