CG関連

【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっぽ〜(1)

プログラミングでアートだったりデザインを作ることを
『クリエイティブコーディング』と言うそうで、

いろんな実現方法があるのですが、

その中でも最もとっかかりやすいと思っている『P5.js』を使って遊んでみることにします。

 
『P5.js』・・『Processing(プロセッシング)』を『JavaScript(ジャバスクリプト)』で扱いやすくしたライブラリ
 
『Processing』・・MITラボで開発された、アーティストやデザイナー向けのプログラミング言語。(『Java』がベース))
  

『Java(ジャバ)』と『JavaScript(ジャバスクリプト)』は、

名前は似ているけれどメロンとメロンパンくらい違うと言われたりします。(要はまったく別の言語です。)

今回扱う『P5.js』は『JavaScript(ジャバスクリプト)』で、
グーグルクロムなどのブラウザで動く方、と思っていればOKです。

アオキ
だいぶはしょって説明しているので、細かい仕様は『P5.js』のリファレンスを参照ください。

『P5.js』リファレンス

Sponsored link

遊ぶようにプログラミングできる『P5.js』 まずは基本から setupとdraw

『P5.js(ProcessingのJavaScript版)』にはグーグルクロムなどのブラウザ上でプログラミングができる、

Webエディタがあります。

『P5.js』Webエディタ

Webエディタ上で試すのもよし、

『HTML』ファイルと『JavaScript』ファイルをつくって試すこともできます。

『HTML』で作る場合は、

『P5.js(ProcessingのJavaScript版)』を読み込んでから、『JavaScript』側で実際の動作を作っていきます。

まずは『P5.js』で円を書いてみることにします。

See the Pen
p5.js ellipse
by aoki_monpro (@suica)
on CodePen.

『JavaScript』側の説明ですが、

setup () と draw() という2つの関数があります。

  • setup() ・・初期設定
  • draw()・・実際の描画

draw関数の中で描かれる内容が1フレーム(パラパラ漫画1枚)になり、

設定を変えない限りは、 1秒間に60回draw関数が実行されます。

アオキ
60FPSですね。

参考

setup関数側

  • createCanvas() ・・ 描画範囲作成(x、y)

引数でxとyを指定します。

xは横、yは縦なんですが、

yは一番上が0で、下に行くほど値が増えるようになっています。

draw関数側

  • background() ・・背景色
  • ellipse()・・だ円・・引数は(x, y, 横幅、縦幅)

circle()という正円を描く関数もありますが、横幅、縦幅を変えられないので、
ellipse()の方が使いやすいかなと思います。

遊ぶようにプログラミングできる『P5.js』 『変数』を作って動かしてみる

draw()関数の中の処理は、

フレームレートを変えなければ、1秒間に60回も実行されるのですが、

60回実行されたところで、

draw()関数の中身に変化がないと、なにも変わっていないように見えます。

例えばボールを横に移動させようとするなら、

x座標の位置を少しずつ変えていく必要があります。

『変数』を作ることで、

ちょっとずつX座標が変わるようにすればOKです。

See the Pen
p5.js translate-move-x
by aoki_monpro (@suica)
on CodePen.

今回は、初めに

と書いて、変数『posX』をつくっています。

アオキ
変数の名前はなんでもいいんですが、できるだけ読んで意味がわかるようにした方がいいです。
アオキ
posXはpositionXの略で、Xの位置を表しています。

だ円をつくる ellipse()関数のx座標を決める位置に『posx』とつけています。

その後、下記のように書くことで、『posX』を1ずつ増やしています。

『posX』がどんどん増えると画面から見えなくなってしまうので、
画面端(今回は200px)になったら0に戻すようにしています。

Sponsored link

遊ぶようにプログラミングできる『P5.js』まとめ

最近世界中で『STEAM』教育が熱を帯びています。

プログラミングとデザインやアートを同時に、

しかも遊ぶようにつくれるということで、

『P5.js(ProcessingのJavaScript版)』などを使った『クリエイティブコーディング』は

これからますます人気が出てくるんじゃないかなと思います。

アオキ
やろうと思えばどんどん格好いいデザインがつくれるようになるので、
アオキ
数学や物理もおりまぜつつ、
アオキ
ちょっとずつ記事にしていきたいと思います。
created by Rinker
¥1,980 (2019/10/15 11:13:43時点 Amazon調べ-詳細)

『クリエイティブコーディング』関係ではこんな記事も読まれています。

1. 【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっぽ〜(1)

2. 移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

3. 【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムで使いたい(3)【P5.js】

4. 『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

5. プログラムで【加速度】【速度】の使い方をわかりやすく (5)【P5.js】

6. プログラムの【配列】をわかりやすく『ゴディバ』で例えてみる(6)【P5.js】

7. プログラムの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜(7)【P5.js】

8. プログラムで色や大きさをランダムにして遊んでみる(8)【P5.js】

9. 【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】

10. プログラムで図形の描き方~頂点と【バラ曲線】を使って〜 (10)【P5.js】

11. 【三角関数】をプログラムで使う方法をまとめてみた(11)【P5.js】

12. プログラムで数学も身につく 一石四鳥なクリエイティブコーディング

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. IoT関連

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラムの覚え方
  2. CG関連

    【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっ…
  3. CG関連

    【3Dプログラム】初心者にオススメな方法はこれ(9)【P5.js】
  4. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  5. 数学

    【三角関数】とは わかりやすくまとめてみた【動画あり】
PAGE TOP