【P5.js】プログラミングと数学(物理)を使って遊んでみよう【初心者向け】【わかりやすさ重視】【JavaScript】
4.6 (9 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
100 students enrolled

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

わかりやすさ重視でP5.js+数学・物理を扱っています。JavaScript基本/ベクトル(2次元)/座標(直交座標, 極座標)/速度加速度/HSB/配列/関数/三角関数/絶対値/ラジアン/クラス/運動方程式/万有引力の法則/バラ曲線
Bestseller
4.6 (9 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
100 students enrolled
Last updated 6/2020
Japanese
Current price: $12.99 Original price: $44.99 Discount: 71% off
1 day left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7 hours on-demand video
  • 1 article
  • 8 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • プログラミング(P5Js)で数学や物理を扱う方法
  • 数学:ベクトル(2次元)・三角関数・極座標など
  • 物理:運動方程式・万有引力の法則など
  • JavaScriptの文法(関数・配列・クラス)
  • クリエイティブコーディング
Requirements
  • インターネットにつながるパソコンを持っている事
  • 簡単な計算がわかること(四則演算、分数など)
Description

2020年代に入り、

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


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


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


個人的にも、

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


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


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


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



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


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

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


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

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


何よりも楽しんで、

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

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


巷では、

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

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

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


■英語の日本語フォロー

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

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

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


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

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


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



■扱う言語

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

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


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

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


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

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



■扱う内容

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

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


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

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



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

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

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

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

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

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


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

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


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


■扱わない事

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

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

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

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

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



Who this course is for:
  • 学校の先生
  • 子どもを持つ親御さん(お子さんと一緒に取り組んでいただければ幸いです)
  • 数学(物理)に苦手意識のある方
  • 新しい趣味を持ちたい方(数学や物理×プログラミング)
  • プログラミングで映像表現をやってみたい方
Course content
Expand all 89 lectures 07:03:40
+ P5.jsに触れてみる
20 lectures 01:26:47
はじめに
02:02
さっそく動かしてみよう
05:38
setupとdraw
03:00
JavaScriptとP5.js
04:01
ファイルを分ける方法
02:48
変数と定数
05:15
関数の考え方
02:37
関数の作り方
06:31
P5.jsの関数 (ellipse, circle)
05:57
位置を変数で変えてみる
07:45
if文
03:57
HSBを使ってみる
04:40
ランダムに色や位置を変えてみる
05:56
+ 加速度・ベクトル
13 lectures 01:04:27
おさらいとY軸
07:42
マイナスの計算
06:28
加速度
05:30
マイナスの加速度
04:38
重力加速度
04:40
ベクトルで書き直す
08:30
ベクトルの足し算
05:35
配列の書き方
03:56
for文
03:06
for文でベクトルを繰り返す その1
04:22
for文でベクトルを繰り返す その2
03:46
+ 三角関数
10 lectures 01:01:00
度数法の設定方法
04:46
円の大きさを変えてみる
05:02
frameCount
00:58
ふわふわさせてみる
07:56
色を変える(絶対値、切上げ)
06:00
ラジアンへの変換
02:55
サンプル:サインコサイン
07:30
サンプル:サインウェーブ(正弦波)
13:09
+ イベント・オブジェクト・クラス
10 lectures 45:19
イベント:マウス
06:59
イベント:キーボード
03:54
オブジェクト
04:42
とあるゲームの紹介
01:27
クラス その1
05:01
クラス その2
04:42
クラスと配列
04:39
インスタンスとメソッドの引数(インプット)
05:33
クラスの拡張(継承)
05:53
ファイルを複数に分ける
02:29
+ 運動方程式と万有引力
12 lectures 01:01:15
ベクトル計算の練習
06:35
ベクトルで線を書いてみる
04:19
運動方程式の下準備
04:45
運動方程式(風と重力)
08:00
運動方程式(質量を変えてみる)
03:58
Attractorクラス作成
04:42
万有引力の法則で引力を計算してみる
09:19
万有引力の法則(配列)
03:47
万有引力の法則(お互いに引き合う)
04:14
+ 回転・極座標
14 lectures 01:12:15
回転させてみる(rotateとtranslate)
05:12
push()とpop()
03:21
atan2を使ってみる
05:33
極座標を使ってみる
03:28
Vertex(頂点)の解説
03:39
星型を描画してみる
05:48
バラ曲線(RoseCurve)
06:25
桜の花びらを作ってみる
07:53
花びらをクラスにする
06:50
花びらの大きさや色を変えてみる
03:55
花びらをゆらゆら動かしてみる
07:48
花びらを回転させてみる
06:15
+ その他
5 lectures 22:53
クリエイティブコーディング
04:24
Processingコードの変換
03:30
範囲を変換する(map)
04:53
パーリンノイズ(noise)
06:26
描画の位置を変える方法(parent)
03:40
+ 補足
5 lectures 09:44
VSCodeインストール方法 その1
03:39
VSCodeインストール方法 その2
02:34
拡張子の表示方法(win)
02:07
拡張子の表示方法(mac)
01:20
参考資料
00:04