Help us understand the problem. What is going on with this article?

【ビジュアルコーディング】p5.jsを習得するためにやった事 まとめ(随時更新)

「p5.js」はProcessingから発展したビジュアルコーディングのJSライブラリ。Web AudioやWebGLまで、できることがとても多く可能性を感じています!習得するためにやってみたことををここにまとめます(随時更新!)

その他のJSライブラリはこちら
※参考:JSライブラリ&フレームワークを試してみたシリーズまとめ(随時更新)

2020/07/12追加Generative Design:画像 P_4_1_2_01、02

事始め

いろいろな図形を配置

SVG要素かCanvas要素か、それが問題だ。ともあれサンプルを見て純粋にワクワクできるp5.jsをやってみる!チュートリルを見ながら色んな図形を配置してみる。

※参考:p5.js事始め:いろんな図形を配置してみる

参考サイト、書籍、動画

チュートリアルを見るだけだと体系的な理解が難しそうに感じたため、ネット上の情報や書籍、動画について調べてみる。ジェネラティブデザイン、ドットインストール、Dan先生など!

※参考:p5.jsを習得するために参考になりそうなサイト、書籍、動画たち

Coding Trainのp5.jsリスト

Youtubeの自動翻訳の制度もかなり実用的になってきて、「Coding Train」のダン先生の動画がとにかく楽しい!

その1:p5.jsとは何か、から四角を描く

※参考:【p5.js】楽しく学ぶ重要性:Coding Trainのダン先生に付いていく!(p5.js 1.1〜1.2)

その2:setup(キャンバス描画)とdraw(四角、線、四角の原点)で四角の形を変える。

※参考:【p5.js】基本書式とsetup(キャンバス描画)、draw(四角、線、四角の原点) Coding Train(p5.js 1.3)

その3:色の基本を理解する。JS全般知識であるコメント、エラー、コメントも。※2019/11/24追加

※参考:【p5.js】色の基本、コメントとエラー、コメント:Coding Train(p5.js1.4〜1.6)

その4:変数を使ってペイントアプリを作る(※2019/12/30追加)

※参考:【p5.js】変数mouseX、mouseYを使ってペイントアプリを作る:Coding Train(p5.js2.1)

その5:変数の上書き、オブジェクトを作る(2020/02/24追加)

【p5.js】変数を上書き、変数にオブジェクトを設定:Coding Train(p5.js2.2-3)

クリエイティブコーディング(ドットインストール)

ドットインストールのクリエイティブコーディングにトライ!

その1:モノクロでランダムなサイズのドットを配置

※参考:【p5.js】クリエイティブコーディングに挑戦(その1)

その2:前半でドットをランダムなカラーにする。後半でマウスに合わせてドットのサイズを変えて動きを付ける。

※参考:【p5.js】クリエイティブコーディングに挑戦(その2)

Generative Design with p5.js

書籍「Generative Design with p5.js」のソースコードを読み解いてみる!

色編

色 P_1_0_01

※参考:【p5.js】Generative Design with p5.js「色 P_1_0_01」のコードを読み解く

色 P_1_0_02(2020/03/29追加)

※参考:【p5.js】Generative Design with p5.js「色 P_1_0_02」のコードを読み解く

色 P_1_0_02(2020/04/22追加)

※参考:【p5.js】Generative Design with p5.js「色 P_1_0_03」のコードを読み解く

形編

形 P_2_0_01(2020/04/29追加)

※参考:【p5.js】Generative Design with p5.js「形 P_2_0_01」のコードを読み解く

形 P_2_0_02、03(2020/05/19追加)

※参考:【p5.js】Generative Design with p5.js「形 P_2_0_02、03」のコードを読み解く

色 P_2_1_1_01、02(2020/06/13追加)

※参考:【p5.js】Generative Design with p5.js「色 P_2_1_1_01、02」のコードを読み解く

文字編

文字 P_3_0_01(2020/05/05追加)

※参考:【p5.js】Generative Design with p5.js「文字 P_3_0_01」のコードを読み解く

文字 P_3_1_1_01(2020/05/28追加)

※参考:【p5.js】Generative Design with p5.js「文字 P_3_1_1_01」のコードを読み解く

文字 P_3_1_2_01(2020/07/01追加)

※参考:【p5.js】Generative Design with p5.js「文字 P_3_1_2_01」のコードを読み解く

画像編

画像 P_4_0_01(2020/05/14追加)

※参考:【p5.js】Generative Design with p5.js「画像 P_4_0_01」のコードを読み解く

画像 P_4_1_1_01(2020/06/07追加)

※参考:【p5.js】Generative Design with p5.js「画像 P_4_1_1_01」のコードを読み解く

画像 P_4_1_2_01、02(2020/07/12追加

※参考:【p5.js】Generative Design with p5.js「画像 P_4_1_2_01、02」のコードを読み解く

今後も随時更新していきます!

i-ryo
フロントエンドエンジニア。神奈川に住まう四十路のオジキ。 DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。ブログも書いてます。 Webづくり やりたい時が 始め時!
https://www.i-ryo.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away