1.はじめに

最近、何か作りたいと思い何がいいかなあと悩んでいたのですが、
昔数学の課題を解くのにウルフラムアルファを使っていたのを思い出したので少し自分でもやってみようと思い作ってみました。

2.環境

windows 10
VScode
plotly(グラフ描画)

3.プログラム

HTML

<!DOCTYPE html>
<html>
<head>
    <title>数式グラフ化</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="app">
        <input type="text" id="equation-input" placeholder="数式を入力（例: x^2）">
        <button id="plot-button">グラフ描画</button>
        <div id="graph"></div>
    </div>

    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/9.4.4/math.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
}

#app {
    margin: 20px;
}

#graph {
    width: 600px;
    height: 400px;
}

数式パースと検索し
上記のようなサイトを色々見ながら学びました

JavaScript

const circleMatch = equation.match(/x\^2 \+ y\^2 = (\d+(?:\.\d+)?)/);

例えば、上記はx^2+y^2=r^2のような方程式を判別するものです

JavaScript

function plotGraph(equation) {
    var xValues = [];
    var yValues = [];
    for (var x = -10; x <= 10; x += 0.1) {
        xValues.push(x);
        yValues.push(math.evaluate(equation.replace(/x/g, `(${x})`)));
    }

    var trace = {
        x: xValues,
        y: yValues,
        type: 'scatter'
    };

    var data = [trace];
    Plotly.newPlot('graph', data);
}

こんな感じで方程式にグラフを描画させます。

JavaScript

document.getElementById('plot-button').addEventListener('click', function() {
    const equation = document.getElementById('equation-input').value.trim();

    // 円の方程式の形式にマッチするかチェック
    const circleMatch = equation.match(/x\^2 \+ y\^2 = (\d+(?:\.\d+)?)/);

    if (circleMatch) {
        plotCircleFromEquation(equation);
    } else {
        try {
            plotGraph(equation);
        } catch (e) {
            alert('数式の解析に失敗しました: ' + e.message);
        }
    }
});

function plotGraph(equation) {
    var xValues = [];
    var yValues = [];
    for (var x = -10; x <= 10; x += 0.1) {
        xValues.push(x);
        yValues.push(math.evaluate(equation.replace(/x/g, `(${x})`)));
    }

    var trace = {
        x: xValues,
        y: yValues,
        type: 'scatter'
    };

    var data = [trace];
    Plotly.newPlot('graph', data);
}
function plotCircleFromEquation(equation) {
    // 方程式から半径 r の値を抽出する
    const radiusMatch = equation.match(/x\^2 \+ y\^2 = (\d+(?:\.\d+)?)/);
    if (!radiusMatch) {
        alert('無効な方程式です。方程式は x^2 + y^2 = r の形式である必要があります。');
        return;
    }

    const radius = Math.sqrt(parseFloat(radiusMatch[1]));
    var xValues = [];
    var yValuesPos = [];
    var yValuesNeg = [];

    for (var x = -radius; x <= radius; x += 0.01) {
        const y = Math.sqrt(radius * radius - x * x);
        xValues.push(x);
        yValuesPos.push(y);
        yValuesNeg.push(-y);
    }

    var trace1 = {
        x: xValues,
        y: yValuesPos,
        mode: 'lines',
        name: 'Positive Half'
    };
    var trace2 = {
        x: xValues,
        y: yValuesNeg,
        mode: 'lines',
        name: 'Negative Half'
    };

    var data = [trace1, trace2];
    Plotly.newPlot('graph', data);
}

4.結果

動画

5.最後に

改めてウルフラムアルファのすごさを感じました。線形代数とか微分方程式とか論理数学とか色んなのが解けてすごいですわ。
ちなみに、昔500円くらいの有料アプリを買ったら全部の機能が使えたんだけど、今は月額になってるんですかね？

数式を入力してグラフ化してくれるサイトを作ってみよ

1.はじめに

2.環境

3.プログラム

4.結果

5.最後に