Published Date : 2020年7月25日6:17
YouTubeにアップした動画、「【Processing】を数学のノート代わりに使えるかの実験」の補足説明の記事です。
Here's a little more about the 「experiment in using 「Processing」 as a math notebook」 video I uploaded to YouTube.
この動画とブログ記事は、以下の過去記事のまとめです。よかったら参考にしてください。
This video and blog post is a summary of the previous post. Please refer to it if you like.
https://akasatanahama.com/posts/103
https://akasatanahama.com/posts/104
https://akasatanahama.com/posts/105
無駄な説明を省いて、忙しい時でも短時間で理解できるような動画です。
It's a video that can be understood in a short period of time even when you're busy, without any unnecessary explanation.
目次
Table of Contents
プログラミングと数学を両方勉強できたら一石二鳥。
If you learn both programming and math, you might be able to accomplish two things in one thing.
という安易な考えで思いついた企画。
This project is the result of the above easy thinking.
今回は正弦波と当加速度直線運動をプログラミングしていきます。
This time, we will program the sine wave and the linear motion of uniform acceleration using processing.
仕上げはこんな感じ。
The result looks like this.
公式に数値をリアルタイムで代入して、数値の動きや図がアニメーションされたら素敵だなと。
A number is assigned to a formula in real time to animate the movement of the number and the figure.
あとこの動画は数学やプログラミングの基礎を教える動画ではないのでご了承ください。
Also, this video doesn't teach the basics of math or programming.
ではProcessingのダウンロードと基本的な使い方をサッと説明します。
provides a quick introduction to downloading Processing and its basic use.
Processingのサイトに行き、ご自身の使ってるパソコンのOS用の実行ファイルをダウンロード。
First, go to the Processing site and download the executable processing's file for your computer's operating system.
あとは実行ファイルをダブルクリックで実行してください。
Processing can then be started by simply double-clicking the downloaded executable.
Processingはセットアップ関数とドロー関数が大体セットです。
The basic style of Processing is to run with setup and draw functions.
今回はハロープロセッシングという文字を画面に表示させるだけなので、セットアップ関数のみ使います。
This time, I only want the word Hello Processing to appear on the screen, so I only use the Setup function.
実行するにはプレイボタンをクリックする。
Click the play button to execute.
止める時はウィンドウの☓ボタンかストップボタンをクリックする。
To stop, click the X button or the stop button in the window.
簡単に今のコードの説明をします。
Here is a brief description of the current code.
セットアップ関数はプログラムが起動した時一回だけ動きます。
The setup function runs only once when the program is started.
後はドロー関数が１フレーム毎に実行されていきます。
After that, the draw function is executed every frame.
丁度パラパラ漫画のような仕組みでアニメーションが作られるイメージです。
It is an image that animation is made by the mechanism just like a flip book.
サイズ関数は表示画面の横と縦のサイズを決めます。
The size function determines the horizontal and vertical size of the display screen.
バックグラウンド関数は色をRGBか単色で指定すると、背景の色がその指定された色で塗りつぶされます。
If the background function specifies a color as RGB or a solid color, the background color is filled with that specified color.
２５５は白、ＲＧＢでいうと２５５が三つ。
255 is white, and there are three 255 in RGB.
フィル関数は図形やテキストの色を決める時に使います。
Use the fill function to determine the color of a shape or text.
テキストサイズ関数はテキストの大きさを決める。
The textSize function determines the size of the text.
テキスト関数は表示させたい文字列と、表示開始位置のXとY座標を指定してあげます。
The text function displays the text on the screen by specifying the character string to be displayed and X and Y coordinates of the text display start position.
void setup(){
size(640, 360);
background(255);
fill(0);
textSize(21);
text("Hello Processing", 240, 180);
}
これだけ分かれば十分です。
I think it is enough to know only these things.
さっそく実践をしましょう。
Let's practice it right away.
では正弦波の波の部分を描画していきます。
Now we will draw the sine wave.
ポイントカウントの数は画面の横幅、つまり画面の横幅いっぱいまで点で埋めていき波を表現します。
The number of point counts is filled with dots to the width of the screen, that is, to the full width of the screen, to express a wave.
トランスレイト関数で原点を画面中央に移動させます。
Use the translate function to move the origin to the center of the screen.
バーテックス関数をビギンシェイプとエンドシェイプ関数ではさんでやれば線だけでなく様々な形の図形も表現できます。
A vertex function can be sandwiched between a bigin shape and an end shape function to represent not only lines but also various shapes.
ドロー関数にこのコードをコピペします。
Copy and paste this code into the draw function.
FPSは30、つまり一秒間に30フレームにします。
FPS is 30, or 30 frames per second.
一フレーム毎にカウントを増やしていきアニメーションっぽくします。
Increase the count variable one frame at a time to make it look more like an animation.
レイディアスを変化させると、波の高さが変わります。
Changing the radius changes the height of the waves.
マップ関数を使って画面の幅を円周率の2倍にしてやり、アングルとして使えば、画面の最初から終わりまでが波の１周期になります。
You can use a map function to make the width of the screen twice Pi, and use it as an angle to make the beginning and end of the screen a cycle of waves.
ポイントカウントとトランスレイトを調整して波の始まりの位置を調整。
Adjust the point count and translation to adjust the position of the wave start.
ファイは位相、つまり、波の始まり位置の高さをずらす。
Phi shifts the phase, that is, the height of the wave's starting point.
位相とは要するに波の時間差です。
Phase is essentially the time difference between the waves.
同じ波でも時間差があれば情報として扱えます。
Even if it is the same wave, if there is a time difference, it can be treated as information.
位相を応用しているのがPMと言われる電波の変調です。
Phase is applied to modulation of radio waves called PM.
詳しくはググってください。
Please google the details.
波と動きが連動する円を横に描画する関数を作成します。
Creates a function that draws a circle that interacts with the wave's motion.
円の半径は当然、波の高さと同じです。
The radius of the circle is, of course, the same as the height of the waves.
コサインも使ってやれば時計周りに円周上と原点を結ぶ直線がグルグルと回るようになります。
If you use the cosine, the line connecting the circumference and the origin will rotate clockwise.
円周上の開始地点として、位相を表現する為に、ファイXとファイYをエリプス関数に入れて適当な見やすい半径を指定します。
As a starting point on the circumference, phi X and phi Y are placed in the ellipses function to specify a suitable visible radius to represent the phase.
色や線の太さなどのスタイルを決める関数は、プッシュスタイルとポップスタイルで囲われた箇所の中でのみ適用されます。
If you use a function that determines a style, such as color or line weight, within the bounds of the push and pop styles, the style is applied only in this context.
他に色等を干渉させたくない時に使うと便利です。
This is useful when you don't want to interfere with other colors.
アーク関数は最初に円の中心のXとY、次に半径を二つ指定、後は中心角の始めと終わりを指定します。
The arc function first specifies the X and Y center of the circle, then the two radii, and then the start and end of the included angle.
arc(200, 100, 150, 150, TWO_PI-PI/2, TWO_PI);
ラディアンの説明と概念を視覚化してノートみたいに確認できるようにします。
Visualize the description and concept of the radian and make it look like a notebook.
後はひたすら細かいテキストの位置の調整が入ります。
After that, you only need to adjust the position of the fine text.
早送りします。
Fast forward.
ちなみに一瞬でてきたNF関数は小数点第何位までを表示するかを決めることができます。
By the way, the NF function that appears in the video for a moment can determine the number of decimal places to be displayed and the number of zeros to be padded.
一つ目のゼロは数字をゼロ埋めしない、二つ目の6は小数点第6位まで表示させるという意味です。
The first zero in the function's argument means that the number should not be padded, and the second six means that the number should be displayed to six decimal places.
ほぼ完成ですが、ボタン操作等で振幅や周波数、位相を変えると楽しいので、その関数を作成します。
It is almost complete, but it is fun to change the amplitude, frequency, and phase by button operation, so you create the function.
周波数を1倍2倍3倍としていきます。
Increase the frequency by 1, 2, or 3.
マックス関数は指定した周波数が１より大きければその数を返します。
Max returns the number of frequencies above 1.
デフォルトに０や－1等の数値がうっかり入らないようにするための、エラーに対する保険です。
This is an insurance against errors to prevent inadvertent default values such as 0 or -1.
後は半径で振幅、右と左で位相、エンターとタブキーでリセットです。
The rest are amplitude by radius, phase by right and left, and reset by enter and tab keys.
続いては、等加速度直線運動の第一式の数値の動きを視覚化していきましょう。
Next, let's visualize numerical values of The first equation of motion of constant acceleration linear motion.
速度は初速度に、時間と加速度をかけたもの、という公式を文字と矢印、球体が落ちる等のアニメーションで、視覚化していきます。
The formula for velocity is time times acceleration plus initial velocity. So let's visualize this expression with animations, such as text, arrows, and sphere falls.
タイトルの位置と大きさを決めます。
First, determine the position and size of the title.
PFont型とクリエイトフォント関数を使って、スケッチの画面に、日本語を表示できるようにします。
Use the PFont type and the createFont function to display Japanese on the sketch screen.
カラー型と、カラー関数を使えば、変数をそのまま色の情報として、扱えるようにできます。
You can use color functions to allow variables to be treated as color information.
今回のように、沢山の色を一片に、そして、何度も使う際に便利です。
This is a convenient way to use many colors in many times.
FPSは60、この数を増やすと、動きがなめらかになりますが、一秒間の間の処理の数が、増えるので、当然マシンに負担がかかります。
FPS is 60. if increasing this number will make the motion smoother, but it will increase the number of processing per second, which naturally puts a strain on the machine.
公式名のクラスを作り、この公式を、様々な表現に再利用できるようにします。
Create a class with the formula name so that you can reuse the formula for various scene.
ちなみに実世界と、スケッチの画面上の長さや、時間は当然違うので、時間や距離を、調整するための、変数を別途用意しなければいけません。
By the way, the length of the sketch on the screen and the time are different from the real world, so you have to prepare variables to adjust the time and distance.
例えば、プログラミング実行環境では、時間が一つ進むのは、１フレームが進む時になってしまいます。
For example, in a programming execution environment, 60 frames are advanced per second, but if the count variable is increased every frame, 1 second is calculated in 60 seconds.
そういった数を調整していく必要があります。
We need to adjust those numbers.
初期値を設定して、オブジェクトのパラメータを更新するための、アップデート関数、そして、オブジェクト用の配列も準備します。
It also provides an update function to set the initial value and update the parameters of the object, as well as an array for the object.
グローバル変数や、オブジェクト等を、初期化していきます。
Initialize global variables, objects, etc.
後は、どうでもいいような細かい位置の調整を行います。
After that, you need to make fine adjustments to the position.
リセットした時の動作を、ブーリアン変数で感知して、分岐させます。
A boolean variable [switchOn] senses the reset behavior and causes it to branch.
ディスプレイメソッドで、実際の文字や図等の、描画を行えるようにします。
Allows the display method to draw actual text, graphics, etc.
複数のオブジェクトに、分けることで、同じ公式を利用する、様々な形の、表現が可能になります。
By dividing them into multiple objects, you can express them in various forms using the same formula.
また細かい位置の調整を行います。
It also makes fine adjustments to the position.
続いて、矢印、つまりベクトルで、動きの描画をするための関数を用意します。
Next, we'll provide a function to draw the motion with arrows, in other words vectors.
ベクトルとしての表現なので、PVectorを使用すると、簡単に計算ができます。
These are represented as vectors. Therefore, if you want to determine the vector magnitude, vector direction, and so on, you can use the methods of the PVector class to easily calculate them.
アークタンジェント２関数は、二点間の距離から、角度を導くことができます。
The arctangent 2 function can derive an angle from the distance between two points.
ベクトルの方向の角度が分かれば、ロテイト関数と、トライアングル関数を利用して、ベクトル方向側に、矢印の先の部分を描くことができます。
Once you know the angle of the vector direction, you can use the Rotate and Triangle functions to draw the tip of the arrow along the vector direction.
後は、矢印が進む方向の速度を、公式を使って求めるようにして、テキストの位置等の微調整を行うだけです。
All you have to do is use a formula to determine the speed of the arrow in the direction it travels, and fine tune the position of the text.
この時、カラーは進んだ距離によって、変化するようにすれば見た目も楽しいです。
At this time, if you change the color according to the distance you advance, it will be fun to look at.
最後に落ちる球の表現も作成しましょう。
You will also create a representation of the final falling sphere.
リセットした時に、ランダムな数値を入れてみたら、さらに変化ができて、面白いとおもいます。
When you reset it, if you input a random number, it will change more and it will be interesting.
完成です。
It's done.
以上です。お疲れ様です。
That's all. Thank you for your hard work.