ねこでじ(Nekodigi)

Nekodigi’s diary

学習中の気づきをまとめています。応援よろしくお願いします

【p5.js】渦巻く肖像画!?のアートを作ってみた

www.youtube.com

渦巻く肖像画の作り方

まず、画像の明るい方を示す勾配ベクトルを生成します。それに垂直になるようにペンを動かすと、明るい場所を中心に輪を描きます。
これが渦巻く肖像画の仕組みです。
これと、なめらか線を描くパーリンノイズを組み合わせることで絵画のようなより美しい見た目になります。
また、最後にペンを真っ直ぐ動かし続けることで、爆発するような面白い効果を作り出しています。

使い方

p5.jsのエディタから開いてください。
editor.p5js.org
loadImageの部分に好きな画像のURLを入れると、画像を変えることができます。
マウスを長押しすると、肖像画が爆発します。

使用例

ベートーベン

f:id:Nekodigi:20211021234508p:plain

バッハ

f:id:Nekodigi:20211021234536p:plain