LoT ラブオンテック

非モテ男の、非モテ男による、【女の子にモテたい】非モテ男のためIT活用ブログ

プログラミング

【JS】オイラーの公式を色々な方法で描画する!

投稿日:



Javascriptを使ってオイラーの公式を

2次元、3次元ともに描画していきます。

CanvasとSVGの各々に描画しました。



一応オイラーの公式を確認しておこう。


e ix = con(x) + i sin(x)



複素数です。



2次元の場合は

実部と虚部をそれぞれ描画します。



3次元の場合は、

xの変化に応じて実部と虚部の値を

空間上でプロットすることで描けます。



ちなみにオイラーの公式は、

3次元空間で表現すると螺旋になります。



それでは実際に描いてみましょう!

3パターンの描画を用意しましたので、

それぞれソースを紹介していきます。



まずhtmlの方は以下になります。



これから紹介するJavascriptのコードは、

</body>と</html>の間に挿入してください。



Javascriptを使ってオイラーを描画する -Canvas編①-



canvasにオイラーの公式を2次元で描画します。

chart.jsを使用してます。

ソースは以下になります。



構造自体はとてもシンプルで、

drawEuler2D()関数を定義して、

それをコールしているだけです。


やっていることは、

conとsinのそれぞれを取得して、

その値を線で結合しているだけです。



conとsin関数のサンプリングは、

drawEuler2D()の引数の値によって決まります。





それでは次いってみましょう!


Javascriiptでオイラーを描画する -Canvas編②-



Canvasにオイラーを3次元で描画します。

three.jsを使用しています。

ソースはこちらです。



drawEuler3D()関数は、

drawEuler2D()関数の引数に加えて、

3つ目にscale成分も指定します。

描画した際に小さくなるので、それの調整用です。






それでは次に行ってみましょう!


Javascriptでオイラーを描画する -SVG編-


SVGタグを使用してオイラーの2次元を描画します。

ライブラリは使用してません。


pathのd属性によってグラフを描画します。

" M " で初期位置をセットして、

" l " で点と点を結んでいきます。


M0となっているのは、

M (スペース) 0と記入するところを、

スペースを省略したためです。





3つのパターンを紹介しましたが、

どれもやらんとしていることは同じです。

点を取得してそれを結ぶだけです。




最後まで読んでいただきありがとうございました。


-プログラミング

Copyright© LoT ラブオンテック , 2021 All Rights Reserved Powered by STINGER.