JavaScriptの数値計算ライブラリmathjsを使う(7) マンデルブロ集合を描く。このココログでも計算して図示できるようにしてみた。

今回はmath.jsを使うとはいうものの複素数の計算だけ（実部虚部に分けてもよかったけどせっかくなので）。

ソースコードはこちら。

結果はこちら。

テキストでも書いておきます。

<canvas class="canvasmandel" width="360" height="360" style = "background-color :black;"></canvas><br>
<label  for "Cxmax">Cxmax</label>
<input type="text" value="1" id="Cxmax">
<label  for "Cxmin">Cxmin</label>
<input type="text" value="-2.5" id="Cxmin"><br>
<label  for "Cymax">Cymax</label>
<input type="text" value="1.75" id="Cymax">
<label  for "Cymin">Cymin</label>
<input type="text" value="-1.75" id="Cymin"><br>  
<button class ="ButtonMandel">計算</button>
<script src="https://unpkg.com/mathjs@11.4.0/lib/browser/math.js"></script>
<script>
    'use strict'
    const canvasmandel = document.querySelector('.canvasmandel')
    const ctx = canvasmandel.getContext('2d')
    const CxmaxInput = document.querySelector('#Cxmax')
    const CxminInput = document.querySelector('#Cxmin')       
    const CymaxInput = document.querySelector('#Cymax')
    const CyminInput = document.querySelector('#Cymin')
    const ButtonMandel = document.querySelector('.ButtonMandel')

    ButtonMandel.addEventListener('click', MandelCalc)

    function MandelCalc() {

        const Cxmax = parseFloat(CxmaxInput.value)
        const Cxmin = parseFloat(CxminInput.value)
        const Cymax = parseFloat(CymaxInput.value)
        const Cymin = parseFloat(CyminInput.value)
        const kmax = 200
        const width = canvasmandel.width
        const height = canvasmandel.height
        ctx.clearRect(0, 0, width, height)

        for (let i = 0; i <= width; i++) {
            for (let j = 0; j <= height; j++) {
                let C = math.complex(Cxmin + (Cxmax - Cxmin)*i/width, Cymin + (Cymax - Cymin)*j/height)
                let z = math.complex(0, 0)
                for (let k = 0; k < kmax; k++) {
                    z = math.add(math.square(z),C)
                    if (math.abs(z) > 4) {
                        const Xr = width * (math.re(C) - Cxmin)/(Cxmax - Cxmin)
                        const Yr = height * (math.im(C) - Cymax)/(Cymin - Cymax)
                        ctx.fillStyle = 'hsl(' + Math.floor(360 * Math.log10(k)/Math.log10(kmax)) + ',100%,50%)'
                        ctx.fillRect(Xr, Yr, 1, 1)
                        break
                    }

                }
            }
        }

    }


</script>

このココログでも表示できるようにしてみた。こちら。

Cxmax Cxmin
Cymax Cymin

計算

過去のもの

JavaScriptの数値計算ライブラリmathjsを使う(1)　まずは行列演算。LU分解で一次方程式を解き、逆行列と行列式を求める。このココログで直接計算できる機能も付けた。

JavaScriptの数値計算ライブラリmathjsを使う(2)　次は複素数演算。四則演算や平方根、べき乗、expなどが簡単にできる。このココログで直接計算できる簡易電卓を作ってみた。

JavaScriptの数値計算ライブラリmathjsを使う(3)　Plotlyを併用して関数をグラフ表示する。ココログでもグラフ表示できるようになった。

JavaScriptの数値計算ライブラリmathjsを使う(4)　高速フーリエ変換(FFT)を計算してココログにplotlyでグラフ表示できるようにする。。

JavaScriptの数値計算ライブラリmathjsを使う(5)　複素行列の固有値・固有ベクトルを求める。ココログで計算できるようにした。

JavaScriptの数値計算ライブラリmathjsを使う(6)　特異値分解（SVD）、主成分分析（PCA)を計算してみる。このココログでも計算できるようにした。