5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-12-04

##前置き
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);
}

ダウンロード.png

他には...

こう言うのも簡単にできる
maru.gif

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

#画像を差し込むとさらに面白い
色々コード書いてみると…
###元画像
ひよこ.png
###結果
image.png
他にも動きのあるものなんかも色々あるから試してみてください。

#遊ぶだけなのにいちいち説明とか読んでられるか!?
Youtubeに動画あげている人もいます。
あしべ数学教師」さん
まさに、ジェネラティブアートをp5.js使って解説されております。

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

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

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

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

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?