【P5.js】プログラミングと数学(物理)を使って遊んでみよう【初心者向け】【わかりやすさ重視】【JavaScript】 from Udemy

2020年代に入り、

ますます重要といわれているのが『データ×AI』。

『データ×AI』を扱うにはどうしても『数学』が必要になります。

『数学』と聞くと苦手意識のある方が多い印象で、

個人的にも、

学生時代『数学』はとても苦手分野でした。

大人になり、子どもが生まれた事をきっかけに、

将来の子どもに教えられるようにと『プログラミング』と『数学』を交えて取り組んでみると、

当時の苦手意識が少しずつなくなり、どんどん楽しくなっていきました。

その経験を元にこの講座では、

×テストのための数学ではなく、

〇将来につながる数学であり、

×教科書のなかだけの数学ではなく、

〇現実世界で活用できる数学を目指し、

何よりも楽しんで、

『プログラミング』を使って

『数学(物理)を動かして遊んでみる』という事をメインに扱っています。

巷では、

『クリエイティブコーディング』や

『ジェネラティブアート』と呼ばれるジャンルかと思いますが、

より数学や物理の解説に焦点をあてています。

■英語の日本語フォロー

プログラミングはどうしても英語を使う機会が増え、

『P5.js』も日本語のマニュアルがなく英語での使用になるので、

グーグル翻訳なども活用し、できるだけ日本語に変換しての解説をしています。

専門用語もできるだけ使わず、

わかりやすさ重視で作っていますので、

英語が苦手な方にこそ見ていただけたらと思います。

■扱う言語

P5.js・・Processing(プロセッシング)のJavaScript版

変数・関数・配列・オブジェクト・クラス

講座の中盤でJavaScriptの『クラス』を説明後は、

頻繁に『クラス』を使ってコードを書いています。

実際に映像を動かしながらコードを書いていくうちに、

JavaScriptの『クラス』に慣れていくこともできるかなと思います。

■扱う内容

中学・高校で扱われている数学/物理の一部

あえて数A、数Ⅱといった区分けはしていません。

学校の教科書とは全く違う順番になっていますが、

学生時代数学や物理が苦手だった方にこそ、お手に取っていただけたらなと思っています。

座標系(直交座標/極座標)/マイナスの計算/ベクトル(2次元)/三角関数

絶対値/円周率/ラジアン/バラ曲線

力(速度・加速度・重力加速度・運動方程式・万有引力の法則)

角度(角速度・角加速度)/

パーリンノイズ/map/Processing->P5.jsへの読み替え方法

クリエイティブコーディグ

※振幅はAmplitudeで表しますが、

この講座では簡易的に解説するため、半径(radius)として扱っています。

要望あれば追加検討します・・・再帰(回帰)、フラクタル、群、パーティクル、指数/対数/ネイピア数、階乗、微分、漸化式、振り子、摩擦、ベクトルの内積・外積など

■扱わない事

シェーダー(より複雑な表現をするために必要な技術)

3D表現(クォータニオンなど)

ゲーム (参考ゲームの紹介はしています。)

数学・物理のしっかりした理論

(数学・物理に興味が出ればぜひ良質の参考書をお求めいただければと思います。)

What's inside

Learning objectives

プログラミング(p5js)で数学や物理を扱う方法
数学：ベクトル(2次元)・三角関数・極座標など
物理：運動方程式・万有引力の法則など

Javascriptの文法(関数・配列・クラス)
クリエイティブコーディング

プログラミング(p5js)で数学や物理を扱う方法
数学：ベクトル(2次元)・三角関数・極座標など
物理：運動方程式・万有引力の法則など
Javascriptの文法(関数・配列・クラス)
クリエイティブコーディング

Syllabus

P5.jsに触れてみる

受講の簡単な説明

講座で扱っている資料・サンプルコード

はじめに

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Uses P5.js, a JavaScript library, making it accessible to those familiar with web development and interactive graphics, and easing the transition into creative coding

Focuses on applying mathematical and physical concepts through programming, which can deepen understanding and provide a more intuitive grasp of these subjects

Covers fundamental JavaScript concepts like variables, functions, arrays, objects, and classes, which are essential for building interactive applications and creative projects

Explores mathematical concepts such as coordinate systems, trigonometry, and radian measure, which are foundational for creating visual patterns and simulations

Examines physical concepts like velocity, acceleration, and gravitational force, which are useful for simulating realistic motion and interactions in creative projects

Requires learners to use Google Translate to convert English documentation into Japanese, which may pose a barrier for some learners who prefer native-language resources

Reviews summary

P5.jsで数学物理を楽しく学ぶ入門

受講生によると、このコースは特に数学や物理に苦手意識がある学習者にとって、P5.jsを使って概念を視覚的に捉え、楽しく学べる点が大きな positive 評価を得ています。プログラミング初心者にも配慮されており、JavaScriptの基本から学ぶことができます。一方で、数学や物理の理論的な深さには限りがあるため、本格的に学びたい場合は別途学習が必要であるという warning 意見や、JavaScriptのクラスの説明がやや難しく感じるという声も一部に見られます。全体としては、抽象的な概念を動かしながら直感的に理解するのに適した、初心者にとって非常に分かりやすい入門コースとして positive 評価されています。

プログラミングも数学物理も初心者向け。

"初心者向けと書いてありましたが、本当にプログラミングも数学も初めての人でも安心してついていけると思います。"

"全くのプログラミング初心者でしたが、JSの基本から教えてくれたので助かりました。"

"非エンジニアですが、クリエイティブコーディングに興味があり受講。P5.jsが初めてでも問題なく進められました。"

"初心者にとってこれ以上ないくらい分かりやすい講座です。P5.jsはもちろん、JSの基本的な文法（関数や配列）から教えてくれるので助かりました。"

抽象的な概念を動かして理解するのが楽しい。

"数学や物理に苦手意識があったのですが、P5.jsを使って実際に動かしながら学べるのがとても楽しかったです！"

"コードがどういう意味で動いているのか、数学・物理の概念とどう繋がるのかが視覚的に理解できて..."

"この講座は本当に「遊ぶ」感覚で学べます。数学が苦手で避けてきましたが、綺麗なビジュアルを見ながらだと抵抗なく入れました。"

"数学や物理をビジュアライズするアイデアが良い。"

"数学や物理の概念を視覚的に捉えられるのが新鮮で、苦手意識がなくなりました。"

クラス導入部分で難しさを感じる学習者もいる。

"特にクラス周りは少し複雑で、完全に理解するには別の資料も参照しました。"

"ただし、JavaScriptのクラスの説明が少し唐突に感じました。初心者向けなら、もう少し簡単な例から入るか、丁寧に時間をかけてほしかったです。"

理論は基礎的で、詳細な理解には別途学習が必要。

"数学や物理の知識は本当に基礎の基礎しかやらないので、しっかり理解するには別途勉強が必要です。"

"一部、説明が簡略化されている部分もあり、自分で調べることも必要になります。特に物理の深い理解には物足りないかもしれません。"

"P5.jsは面白かったですが、数学と物理パートはかなり浅いです。タイトルに数学(物理)とありますが、これだけで理解できるレベルではないです。"

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in 【P5.js】プログラミングと数学(物理)を使って遊んでみよう【初心者向け】【わかりやすさ重視】【JavaScript】 with these activities:

JavaScriptの基礎を復習する

Show steps

コースでJavaScriptのクラスを頻繁に使用するため、事前にJavaScriptの基礎を復習することで、よりスムーズに学習を進められます。

Browse courses on JavaScript

Show steps

JavaScriptの変数、関数、配列、オブジェクトに関する基本的な概念を復習する。
簡単なJavaScriptのコードを書いて、基本的な構文を理解する。
オンラインのJavaScriptチュートリアルやドキュメントを参照する。

『JavaScript本格入門』を読む

Show steps

JavaScriptの理解を深めるために、JavaScriptの入門書を読む。特に、オブジェクト指向プログラミングとクラスの概念に焦点を当てる。

View 改訂3版JavaScript本格入門 on Amazon

Show steps

JavaScriptの入門書を選び、オブジェクト指向プログラミングとクラスに関する章を読む。
サンプルコードを実際に書いて実行し、動作を確認する。
理解できない箇所があれば、オンラインのドキュメントやフォーラムで質問する。

三角関数の練習問題を解く

Show steps

コースで三角関数を扱うため、事前に三角関数の練習問題を解くことで、理解を深め、スムーズに学習を進められます。

Show steps

三角関数の基本的な公式（sin、cos、tan）を復習する。
三角関数の練習問題を解き、公式の使い方を理解する。
単位円を使って、三角関数の値を視覚的に理解する。

Four other activities

Expand to see all activities and additional details

Show all seven activities

P5.jsで簡単なアニメーションを作成する

Show steps

P5.jsの基本的な使い方を習得するために、簡単なアニメーションを作成する。これにより、コースで学ぶ内容を実践的に理解することができます。

Show steps

P5.jsの環境をセットアップする。
P5.jsの基本的な関数（ellipse、rect、lineなど）を使って、図形を描画する。
frameCount変数を使って、図形をアニメーションさせる。
マウスやキーボードのイベントを使って、アニメーションをインタラクティブにする。

『数学ガール』を読む

Show steps

数学に対する興味を高めるために、数学の概念をわかりやすく解説した書籍を読む。

View Mathematical Girls (Japanese Edition) on Amazon

Show steps

数学の概念を解説した書籍を選び、興味のある章を読む。
書籍で紹介されている問題を解いてみる。
書籍の内容について、他の人と議論する。

万有引力の法則をP5.jsでシミュレーションする

Show steps

コースで学ぶ万有引力の法則をP5.jsでシミュレーションすることで、物理法則の理解を深め、プログラミングスキルを向上させることができます。

Show steps

万有引力の法則の公式を理解する。
P5.jsで、質量を持つオブジェクトを複数作成する。
オブジェクト間の引力を計算し、オブジェクトの運動をシミュレーションする。
オブジェクトの質量や初期位置を変えて、シミュレーションの結果を観察する。

バラ曲線のパラメータを調整できるツールを作成する

Show steps

コースで学んだバラ曲線をより深く理解するために、パラメータ（花びらの数、大きさなど）を調整できるツールを作成する。これにより、数学的な概念とプログラミングを組み合わせた実践的なスキルを習得できます。

Show steps

P5.jsでバラ曲線の描画関数を作成する。
HTMLのinput要素を使って、バラ曲線のパラメータを調整できるようにする。
パラメータの変更に応じて、バラ曲線をリアルタイムに再描画する。
UIを改善し、使いやすいツールにする。

Career center

Learners who complete 【P5.js】プログラミングと数学(物理)を使って遊んでみよう【初心者向け】【わかりやすさ重視】【JavaScript】 will develop knowledge and skills that may be useful to these careers:

インタラクティブメディア開発者

インタラクティブメディア開発者として、P5.jsのようなツールを使用して、ユーザーが操作できる魅力的な体験を作り出すことができます。このコースでは、プログラミングと数学（物理）の知識を組み合わせることで、インタラクティブなビジュアルやシミュレーションを開発するための基礎が身につきます。特に、JavaScriptのクラスの扱いや、ベクトルの計算、三角関数などの知識は、インタラクティブなコンテンツを作成する上で非常に役立ちます。さらに、クリエイティブコーディングの分野にも触れているため、P5.jsのスキルを活かして、革新的なインタラクティブプロジェクトを生み出すことができるでしょう。このコースは、テストのための数学ではなく、現実世界で活用できる数学を重視しているため、インタラクティブメディア開発者を目指す方にとって、実践的なスキルを習得するのに最適なコースと言えます。

See salaries and explore the career path for インタラクティブメディア開発者

物理シミュレーション開発者

物理シミュレーション開発者は、現実世界の物理現象をコンピュータ上で再現するシミュレーションを開発します。このコースでは、P5.jsを使って運動方程式や万有引力の法則などの物理法則をプログラムで表現する方法を学ぶことができます。特に、ベクトルや加速度などの概念を理解し、コードで実装することで、物理シミュレーションの基礎を習得できます。コースでは、JavaScriptのクラスを使ってコードを構造化する方法も学ぶため、より複雑なシミュレーションを開発する準備ができます。物理シミュレーション開発者は、科学研究、ゲーム開発、教育など、さまざまな分野で活躍しています。このコースは、数学と物理の知識をプログラミングに応用する方法を学べるため、物理シミュレーション開発者を目指す方にとって理想的なコースです。

See salaries and explore the career path for 物理シミュレーション開発者

ジェネラティブアーティスト

ジェネラティブアーティストは、アルゴリズムとコードを使用して、独自の視覚的な作品を生成します。このコースでは、P5.jsを使って数学や物理の概念を視覚化する方法を学べます。特に、座標系、三角関数、ベクトルなどの数学的な知識は、ジェネラティブアートの作成に不可欠です。また、パーリンノイズやmap関数などのテクニックも紹介されているため、より複雑で興味深いパターンを生成することができます。コースではJavaScriptのクラスも扱うため、コードの構造化と再利用性を高めることができます。このコースは、プログラミング初心者でも理解しやすいように構成されているため、ジェネラティブアートの世界に足を踏み入れるための素晴らしい第一歩となるでしょう。

See salaries and explore the career path for ジェネラティブアーティスト

クリエイティブテクノロジスト

クリエイティブテクノロジストは、技術と創造性を組み合わせて、新しい体験やソリューションを開発します。このコースで学ぶP5.jsのスキルは、インタラクティブなインスタレーション、ジェネラティブアート、データビジュアライゼーションなど、さまざまなクリエイティブプロジェクトに応用できます。特に、JavaScriptの知識と数学的な知識（三角関数、ベクトルなど）は、クリエイティブな表現を実現するために重要です。コースでは、パーリンノイズやmap関数などのテクニックも紹介されており、より複雑で興味深いパターンを生成することができます。クリエイティブテクノロジストは、新しい技術を積極的に学び、創造的なアイデアを形にする役割を担います。このコースは、技術と創造性を融合させるためのスキルを習得できるため、クリエイティブテクノロジストを目指す方にとって有益です。

See salaries and explore the career path for クリエイティブテクノロジスト

デジタルアーティスト

デジタルアーティストは、コンピュータを使用して芸術作品を制作します。このコースで学ぶP5.jsのスキルは、インタラクティブアート、ジェネラティブアート、アニメーションなど、幅広いデジタルアート作品の制作に役立ちます。特に、数学的な知識（三角関数、ベクトルなど）を活用することで、複雑で美しい視覚効果を生み出すことができます。コースでは、座標系やラジアンといった概念も扱っており、正確な表現を実現するための基礎を築けます。デジタルアーティストは、創造性と技術的なスキルを組み合わせて、新しい表現の可能性を追求します。このコースは、P5.jsを使ってデジタルアート作品を制作するためのスキルを習得できるため、デジタルアーティストを目指す方にとって理想的なコースです。

See salaries and explore the career path for デジタルアーティスト

データビジュアライゼーションエンジニア

データビジュアライゼーションエンジニアは、複雑なデータを理解しやすい視覚的な形式に変換します。このコースで学ぶP5.jsの知識は、動的なデータビジュアライゼーションを作成するのに役立ちます。特に、JavaScriptのスキルと数学的な知識（三角関数、ベクトルなど）は、データをインタラクティブに表現するために重要です。コースでは、座標系やラジアンといった概念も扱っており、正確なビジュアライゼーションを実現するための基礎を築けます。データビジュアライゼーションエンジニアは、数値データを視覚的に表現することで、より深い洞察を提供し、意思決定をサポートします。このコースは、データと数学の知識を結びつけ、現実世界で活用できるスキルを習得できるため、データビジュアライゼーションエンジニアを目指す方にとって非常に有益です。

See salaries and explore the career path for データビジュアライゼーションエンジニア

モーションデザイナー

モーションデザイナーは、アニメーションや視覚効果を作成し、映像作品やインタラクティブコンテンツに動きを加えます。このコースで学ぶP5.jsの知識は、プログラミングによって動きを制御し、独自の視覚的な表現を生み出す上で非常に役立ちます。特に、JavaScriptのクラスの扱いや、ベクトルの計算、三角関数などの知識は、複雑なアニメーションを作成するために重要です。コースでは、運動方程式や万有引力の法則といった物理の概念も扱っており、よりリアルな動きをシミュレーションすることも可能です。モーションデザイナーは、視覚的なストーリーテリングを通じて、視聴者を引き込む魅力的なコンテンツを作り出します。このコースは、プログラミングと数学の知識を組み合わせて、モーションデザインのスキルを向上させるための素晴らしい機会となるでしょう。

See salaries and explore the career path for モーションデザイナー

フロントエンドエンジニア

フロントエンドエンジニアは、ウェブサイトやアプリケーションのユーザーインターフェースを開発します。このコースで学ぶJavaScriptの知識は、インタラクティブで魅力的なウェブ体験を作成する上で非常に役立ちます。特に、P5.jsを使ってアニメーションや視覚効果を実装することで、ユーザーエンゲージメントを高めることができます。コースでは、JavaScriptのクラスや関数、配列などの基本的な概念を学ぶだけでなく、数学的な知識（三角関数、ベクトルなど）も活用して、より高度な表現を実現できます。フロントエンドエンジニアとして、ユーザーが直接触れる部分を開発する上で、このコースで得られる知識は非常に貴重です。

See salaries and explore the career path for フロントエンドエンジニア

ビジュアルエフェクトアーティスト

ビジュアルエフェクトアーティストは、映画、テレビ、ゲームなどの映像作品に特殊効果を追加します。このコースで学ぶP5.jsの知識は、プログラミングによって視覚効果を作成し、映像作品にリアリティと迫力を加える上で役立ちます。特に、運動方程式や万有引力の法則などの物理法則を理解し、シミュレーションすることで、より自然な視覚効果を生み出すことができます。コースでは、JavaScriptのクラスを使ってコードを構造化する方法も学ぶため、複雑なエフェクトを効率的に作成する準備ができます。ビジュアルエフェクトアーティストは、映像作品の品質を向上させ、視聴者を魅了する役割を担います。このコースは、物理とプログラミングの知識を組み合わせて、ビジュアルエフェクトのスキルを向上させるための良い機会となります。

See salaries and explore the career path for ビジュアルエフェクトアーティスト

ゲーム開発者

ゲーム開発者は、コンピュータゲームを設計し、開発します。このコースでは、P5.jsを使ってゲームの基本的な要素をプログラミングする方法を学ぶことができます。特に、運動方程式や万有引力の法則などの物理法則をゲームに取り入れることで、よりリアルなゲーム体験を提供できます。コースでは、JavaScriptのクラスを使ってコードを構造化する方法も学ぶため、より複雑なゲームを開発する準備ができます。また、キーボードやマウスなどのイベントを処理する方法や、オブジェクトの概念も学ぶことができます。ゲーム開発者は、創造性と技術的なスキルを組み合わせて、ユーザーを楽しませるゲームを作り上げます。このコースは、ゲーム開発に必要な数学とプログラミングの基礎を学べるため、ゲーム開発者を目指す方にとって有益です。

See salaries and explore the career path for ゲーム開発者

物理教師

物理教師は、生徒に物理学の概念とスキルを教えます。このコースで学ぶP5.jsを使った物理のシミュレーションは、生徒の理解を深めるための効果的な教材となります。特に、運動方程式や万有引力の法則などの物理法則をインタラクティブなビジュアルで体験させることで、生徒は物理現象をより直感的に理解できます。コースでは、加速度、ベクトル、重力などの概念をプログラムで表現する方法を学ぶことができます。物理教師は、実験やデモンストレーションを通じて、生徒に物理学の面白さを伝えます。このコースは、物理の知識を視覚的に表現する方法を学べるため、物理教師にとって授業の質を向上させるための貴重なリソースとなります。

See salaries and explore the career path for 物理教師

数学教师

数学教師は、生徒に数学の概念とスキルを教えます。このコースで学ぶP5.jsを使った数学の視覚化は、生徒の理解を深めるための強力なツールとなります。特に、ベクトル、三角関数、座標系などの概念をインタラクティブなビジュアルで説明することで、抽象的な数学をより具体的に理解させることができます。コースでは、中学校や高校で扱われる数学の範囲をカバーしており、先生が授業で活用できるアイデアやテクニックが満載です。数学教師は、生徒の学習意欲を高め、数学の楽しさを伝える役割を担います。このコースは、数学の知識を視覚的に表現する方法を学べるため、数学教師にとって新しい教育手法を習得する絶好の機会となります。

See salaries and explore the career path for 数学教师

AIエンジニア

AIエンジニアは、人工知能システムを開発し、機械学習モデルを実装します。このコースは直接的にAI技術を扱うものではありませんが、AIの分野で重要な数学的基礎を学ぶ上で役立ちます。特に、線形代数、確率統計、微積分などの数学の知識は、機械学習アルゴリズムを理解し、改善するために不可欠です。コースでは、ベクトル、三角関数、座標系などの数学的な概念をP5.jsを使って視覚化する方法を学ぶことができます。AIエンジニアは、データ分析、モデル開発、システム構築など、幅広いタスクを担当します。このコースは、AIエンジニアが数学的基礎を強化し、より高度なAI技術を習得するための準備となるでしょう。

See salaries and explore the career path for AIエンジニア

データサイエンティスト

データサイエンティストは、大量のデータを分析し、洞察を引き出す専門家です。このコースは、直接的にデータサイエンスのスキルを教えるものではありませんが、データ分析に必要な数学的基礎を学ぶ上で役立つ可能性があります。特に、統計学、線形代数、微積分などの数学の知識は、データ分析アルゴリズムを理解し、適切に適用するために重要です。コースでは、ベクトル、三角関数、座標系などの数学的な概念をP5.jsを使って視覚化する方法を学ぶことができます。データサイエンティストは、ビジネス上の意思決定を支援するために、データに基づいた洞察を提供します。このコースは、データサイエンティストが数学的基礎を強化し、データ分析のスキルを向上させるための補助となるかもしれません。

See salaries and explore the career path for データサイエンティスト

グラフィックデザイナー

グラフィックデザイナーは、視覚的なコミュニケーションを通じてメッセージを伝えます。このコースは、直接的にグラフィックデザインのスキルを教えるものではありませんが、P5.jsを使ってインタラクティブなデザインやアニメーションを作成する上で役立ちます。コースでは、座標系、色、図形などの要素をプログラムで制御する方法を学ぶことができます。グラフィックデザイナーは、ロゴ、ポスター、ウェブサイトなど、さまざまな媒体で視覚的なコンテンツを制作します。このコースは、グラフィックデザイナーが新しい表現方法を探索し、インタラクティブなデザインを取り入れるための刺激となるかもしれません。

See salaries and explore the career path for グラフィックデザイナー

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in 【P5.js】プログラミングと数学(物理)を使って遊んでみよう【初心者向け】【わかりやすさ重視】【JavaScript】.

改訂3版JavaScript本格入門

Save

この本は、JavaScriptの基礎から応用までを網羅的に解説しています。特に、オブジェクト指向プログラミングの概念やクラスについて詳しく解説されているため、コースで扱うJavaScriptのクラスの理解を深めるのに役立ちます。コースの予習として読むことで、よりスムーズに学習を進めることができます。また、リファレンスとしても活用できます。