« 今日は市長選挙+市議会議員補欠選挙で近所の小学校まで。 | トップページ | 「円周率πの任意の桁の値(Simon Plouffeによる)」をカシオの高精度計算サイトkeisan.casio.jpに自作式としてUP(50桁までしか計算できないけど...) »

2023年1月16日 (月)

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

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

ソースコードはこちら。

Javascriptmandel01

結果はこちら。

Javascriptmandel02

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

 

<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>

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





過去のもの

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)を計算してみる。このココログでも計算できるようにした。

« 今日は市長選挙+市議会議員補欠選挙で近所の小学校まで。 | トップページ | 「円周率πの任意の桁の値(Simon Plouffeによる)」をカシオの高精度計算サイトkeisan.casio.jpに自作式としてUP(50桁までしか計算できないけど...) »

パソコン・インターネット」カテゴリの記事

学問・資格」カテゴリの記事

日記・コラム・つぶやき」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

« 今日は市長選挙+市議会議員補欠選挙で近所の小学校まで。 | トップページ | 「円周率πの任意の桁の値(Simon Plouffeによる)」をカシオの高精度計算サイトkeisan.casio.jpに自作式としてUP(50桁までしか計算できないけど...) »

最近の記事

最近のコメント

2023年2月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28        
フォト
無料ブログはココログ