前置き

Qiita初投稿なので優しい目線でお願いします。
あと、仕事とか全く関係ない趣味の分野のお話です。

ジェネラティブアートとは

簡単に言うと「デジタルアート」です。だけど、ペンタブとか液タブで書いたかわいいイラストとかではなくて"アルゴリズム"や"数学"を駆使して自律的に生み出されたアートです。
ようは、プログラミングを書いてできる幾何学的なアートが「ジェネラティブアート」です。
注意:細かいことを言うと人間が書いたものも含まれます。

p5.jsとは

JavaScriptライブラリであり、Webエディタです。
詳しくは、「Processing」というデジタルアートに用いられるプログラミング言語とその環境をJavaScriptの形に落とし込んだものです。なので、「p5.js」はJavaScriptの基礎を知っていればほとんどゼロ知識でいじれちゃいます。それに加え、そもそもプログラミング初学者向けのコーディング環境なので、小中学生でも遊べるレベルです。
個人的な感想では、プログラミングでゲーム作るのに近いイメージです。

簡単なお絵描き説明

もともとあるものと簡単な図形のコメント

// 備考：初期装備→☆
// 初めに一回呼び出される☆
function setup() { 
  // キャンバスの作成（単位：ピクセル）☆
  // createCanvas(x座標, y座標);
  createCanvas(400, 400);
}

// 毎秒６０回繰り返される☆
function draw() {
  // 背景色（無彩色:黒 0~255 白）
  // background(数);☆
  background(220);

  // x:円中心x座標, y:円中心y座標, r:円の半径
  // circle(x,y,r);
  circle(200,200,100);

  // x:楕円中心x座標, y:楕円中心y座標
  // w:横幅, h:縦幅
  // ellipse(x,y,w,h);
  ellipse(100,100,75,50);
}

他には...

こう言うのも簡単にできる

詳しい機能は自分で調べてださい＿|￣|○

画像を差し込むとさらに面白い

色々コード書いてみると…

元画像

結果

他にも動きのあるものなんかも色々あるから試してみてください。

遊ぶだけなのにいちいち説明とか読んでられるか!?

Youtubeに動画あげている人もいます。
「あしべ数学教師」さん
まさに、ジェネラティブアートをp5.js使って解説されております。

「ヘロンの数学 Heron's math」さん
アートではないのですが、p5.jsを使ってゲームを作っています。

他にも、ドットインストールとかにも動画上がってました。

その他

ジェネラティブアート作品公開サイト: OpenProcessing

ひとりごと

某デベロッパーエバンジェリストの方が仰るにはコードを"おかずにご飯を食べる人"や"肴にお酒飲む人"もいるくらいらしいから""遊ぶ""くらいはいかがでしょうかってことで…。

ジェネラティブアートとp5.jsって何？

前置き