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

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

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

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

2019/11/24追加
色の基本、コメントとエラー、コメント

事始め

いろいろな図形を配置

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

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

参考サイト、書籍、動画

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

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

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

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

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

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

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

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

Generative Design with p5.js

書籍「Generative Design with p5.js」のソースコードが公開されていたので、読み解いてみた!

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

Coding Trainのp5.jsリスト

Youtubeの自動翻訳の制度もかなり実用的になってきて、「Coding Train」のダン先生の動画がとにかく楽しい!Coding Trainのp5.jsリストの副読本を目指して記事にしています!

その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)

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

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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