p5.js ジグソーパズル崩壊

ジグソーパズルをバラバラにしてみました。

 

作品タイトル:ジグソーパズル崩壊

f:id:techty:20190711235827p:plain

 

デモページとソースコードは以下にあります。

よかったら見てみてください。

editor.p5js.org

 

ジグソーパズルの色を変えた作品も作ってみたので、

よかったらこちらの記事も見てみてください。 

techty.hatenablog.com

 

p5.js The Wave

パーリンノイズを使って「歪んだ地形」を表現してみました。

 

作品タイトル:The Wave

f:id:techty:20190709152046p:plain

 

デモページとソースコードは以下にあります。

よかったら見てみてください。

editor.p5js.org

p5.js ジグソーパズル

p5.jsを使って「ジグソーパズル」の模様を生成してみました。

 

作品タイトル:ジグソーパズル

f:id:techty:20190707191134p:plain

 

デモページとソースコードは以下にあります。

よかったら見てみてください。

editor.p5js.org

p5.js Sine Noise(続き)

前回作成したプログラムを使っていろいろな模様を作ってみました。

 

前回の記事はこちら。

techty.hatenablog.com

 

f:id:techty:20190630183158p:plain

 

f:id:techty:20190630183236p:plain

 

f:id:techty:20190630183401p:plain

 

f:id:techty:20190630183456p:plain

 

f:id:techty:20190630183526p:plain

 

f:id:techty:20190630183550p:plain

 

f:id:techty:20190630183613p:plain

 

f:id:techty:20190630183633p:plain

 

以下はcos波を使って生成した模様です。

f:id:techty:20190630183744p:plain

 

f:id:techty:20190630183807p:plain

 

f:id:techty:20190630183833p:plain

 

f:id:techty:20190630183853p:plain

 

f:id:techty:20190630183917p:plain

p5.js Sine Noise

「Sine波」と「パーリンノイズ」を使ったアート作品を作ってみました。

 

作品タイトル:Sine Noise

f:id:techty:20190630011621p:plain

 

デモページとソースコードは以下にあります。

よかったら見てみてください。

editor.p5js.org

 

上記のような模様を作る仕組みは単純です。

1.パーリンノイズを使ってsin波の高さを決める

2.sin波を横方向、斜め方向、縦方向に描く

3.手順1に戻る

これだけです。

 

実際には以下のような感じで、横方向、斜め方向、縦方向にsin波が描かれています。

f:id:techty:20190630013449p:plain

sin波を描画するときにパーリンノイズを使って波の高さをいろいろ変更してあげると、上記のような模様が出来上がります。

 

では、今日はここまで。

次回は、今回作成した作品「Sine Noise」のプログラムを使って、いろいろな模様を生成してみたいと思います。

 

次回

techty.hatenablog.com