##前置き
Qiita初投稿なので優しい目線でお願いします。
あと、仕事とか全く関係ない趣味の分野のお話です。
#ジェネラティブアートとは
簡単に言うと「デジタルアート」です。だけど、ペンタブとか液タブで書いたかわいいイラストとかではなくて"アルゴリズム"や"数学"を駆使して自律的に生み出されたアートです。
ようは、プログラミングを書いてできる幾何学的なアートが「ジェネラティブアート」です。
注意:細かいことを言うと人間が書いたものも含まれます。
#p5.jsとは
JavaScriptライブラリであり、Webエディタです。
詳しくは、「Processing」というデジタルアートに用いられるプログラミング言語とその環境をJavaScriptの形に落とし込んだものです。なので、「p5.js」はJavaScriptの基礎を知っていればほとんどゼロ知識でいじれちゃいます。それに加え、そもそもプログラミング初学者向けのコーディング環境なので、小中学生でも遊べるレベルです。
個人的な感想では、プログラミングでゲーム作るのに近いイメージです。
#簡単なお絵描き説明
もともとあるものと簡単な図形のコメント
// 備考:初期装備→☆
// 初めに一回呼び出される☆
function setup() {
// キャンバスの作成(単位:ピクセル)☆
// createCanvas(x座標, y座標);
createCanvas(400, 400);
}
// 毎秒60回繰り返される☆
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
#ひとりごと
某デベロッパーエバンジェリストの方が仰るにはコードを"おかずにご飯を食べる人"や"肴にお酒飲む人"もいるくらいらしいから""遊ぶ""くらいはいかがでしょうかってことで…。