p5.jsは、クリエイティブコーディングのためのJavaScriptライブラリです。アーティストや初心者プログラマにも親しみやすく、プログラミングを視覚的に楽しく学べることで人気があります。今回は、p5.jsの公式チュートリアルで学べる内容を紹介します。
- p5.jsのリュートリアルで学べる内容
- 注意点
- JavaScript初心者を脱するのに「Introduction to p5.js」は良い教材
- 「Drawing」で写真加工を学ぶ
- 「Web Design」でスネークゲームを作成する
- 「WebGL」で3DCGに入門する
- まとめ
p5.jsのリュートリアルで学べる内容
p5.jsの公式チュートリアルでは、以下のような幅広い内容を学ぶことができます。
- Introduction to p5.js
- 環境設定（p5.jsを始めるための準備）
- 最初のプログラム
- 変数、if文、for文、関数、オブジェクト
- 画像を使ったプログラム
- Drawing
- 写真の加工
- グラデーション
- カスタムシェイプと曲線
- Web Design
- HTMLとCSSでゲーム画面を作る
- スネークゲームの作成
- ウェブフォント
- Accessibililty
- スクリーンリーダー
- criticalAI
- 生成AIを使用してp5.jsのコードを記述する方法
- WebGL
- 3DCG
- 画像処理の最適化
- Advanced Topics
- デバッグ
- プログラムの最適化
- ハンドサインで図形を描画する
- 音との連携
- Node.jsを使った開発
これらの内容を通じて、基本的なプログラミングの概念から3DCGまで幅広いスキルを身に付けることができます。
注意点
p5.jsのチュートリアルに取り組む前に、以下のような注意点があります。
- HTML,CSS,JavaScriptの基本的な知識があると理解が深まる
- チュートリアルは英語で書かれている
ただし、図やコードを用いて丁寧に解説しているので、前提知識がなくても学習は可能です。また、AIを活用して翻訳することで言語の問題はクリアできます。
JavaScript初心者を脱するのに「Introduction to p5.js」は良い教材
このセクションは、JavaScript初心者にとって良い教材だと思います。以下のようなJavaScriptの基本的な内容を学べます。
- 変数
- if文
- for文
- 関数
- オブジェクト
これらの概念を図形の描画を通して学ぶことで、JavaScriptの理解が深まります。コードの変更が視覚的な結果として反映されるため、学習効果が高いでしょう。
「Drawing」で写真加工を学ぶ
このセクションでは、写真加工を学べます。
- グラデーション
- 色のブレンド
- カスタムシェイプと曲線
これらを組み合わせることで、独自の写真加工アプリを作成することも可能です。
「Web Design」でスネークゲームを作成する
このセクションでは、インタラクティブなウェブアプリケーションの作成方法を学びます。スネークゲームの作成を通して、以下のようなことを学びます。
- キーボード入力の処理
- ゲームロジックの実装
- スコア表示
- ゲームオーバー処理
「WebGL」で3DCGに入門する
このセクションでは、以下のような3DCGの基本を学びます。
- 3D形状の作成と操作
- カメラ制御
- ライティング
- マテリアル
- テクスチャマッピング
- シェーダ
まとめ
p5.jsのチュートリアルは、プログラミング初心者からクリエイティブコーディングのエキスパートまで、幅広い層に対応した充実した内容となっています。基本的なJavaScriptの概念から高度な3DCG処理まで、段階的に学ぶことができます。
ウェブで2D/3Dを表現するのに面白いかもしれません。このライブラリを使って、ビジュアルコーディングに挑戦してみてはいかがでしょうか。
