이 페이지에서

수학 방정식

수학 방정식 시각화.

'수학 방정식' 섹션에서는 QML에서 사용 가능한 모든 그래프 유형을 활용하여 수학 방정식을 시각화하는 방법을 설명합니다. 또한 QtQuick3D 장면을 그래프에 통합하는 방법과 ExtendedSceneEnvironment 를 사용하여 그래프의 외관을 조정하는 방법도 보여줍니다.

빛나는 효과와 제어 기능이 적용된 수학 방정식이 표시된 3D 표면

기본 QML 애플리케이션 기능에 대한 자세한 내용은 ‘간단한 산점도’를 참조하십시오.

예제 실행

다음에서 예제를 실행할 수 있습니다.

설정

모든 그래프 유형에 대한 데이터는 공통의 ListModel 에 저장할 수 있습니다:

ListModel {
    id: dataModel
}

모델은 그래프 계열 내의 각 그래프 유형별로 설정됩니다:

Surface3DSeries {
    id: surfaceSeries
    itemLabelFormat: "(@xLabel, @zLabel): @yLabel"

    ItemModelSurfaceDataProxy {
        itemModel: dataModel
        columnRole: "xPos"
        yPosRole: "yPos"
        rowRole: "zPos"
    }
}
...
Bar3DSeries {
    id: barSeries
    itemLabelFormat: "@colLabel, @rowLabel: @valueLabel"

    ItemModelBarDataProxy {
        itemModel: dataModel
        columnRole: "xPos"
        valueRole: "yPos"
        rowRole: "zPos"
    }
}
...
Scatter3DSeries {
    id: scatterSeries
    itemLabelFormat: "(@xLabel, @zLabel): @yLabel"
    mesh: Abstract3DSeries.Mesh.Point

    ItemModelScatterDataProxy {
        itemModel: dataModel
        xPosRole: "xPos"
        yPosRole: "yPos"
        zPosRole: "zPos"
    }
}

역할을 설정하면 모델의 데이터를 해당 축에 자동으로 매핑할 수 있습니다.

방정식 구문 분석

다음 연산자 및 수학 함수, 그리고 해당 함수를 사용하는 데 필요한 문자를 사용하여 텍스트 필드에 방정식을 입력할 수 있습니다:

연산자함수문자
+ - * / % ^sin cos tan log exp sqrt( ),

x 및 y 를 매개변수로 사용할 수 있습니다. 이는 처리되는 데이터가 두 축과 값으로 구성되기 때문입니다. 방정식에서 연산자 주위에 공백이 있을 수 있으므로, 다음 두 가지 형식 모두 허용됩니다:

  • x^2+y^2
  • x ^ 2 + y ^ 2

방정식은 QML로 임포트된 JavaScript 방정식 파서 및 계산기를 사용하여 구문 분석됩니다:

import "calculator.js" as Calc

이 계산기는 tanguy_k 이 TypeScript로 작성하여 Stack Overflow에 게시한 것으로, QML에서 사용할 수 있도록 JavaScript로 변환되었습니다.

방정식 매개변수는 방정식이 변경되거나 열 또는 행 수가 업데이트될 때마다 채워집니다.

행과 열을 순회하기:

for (i = xValues.first.value; i <= xValues.second.value; ++i) {
    for (j = zValues.first.value; j <= zValues.second.value; ++j)
        addDataPoint(i, j)
}

x 및 y 에 값을 채우는 방법:

function addDataPoint(i, j) {
    var filledEquation = equation.text.replace("x", i)
    filledEquation = filledEquation.replace("y", j)
    ...

그런 다음 방정식을 JavaScript 계산기에 전달하여 결과를 얻은 후, 정의된 역할에 삽입하여 데이터 모델에 추가합니다:

try {
    var result = Calc.calculate(filledEquation)
    dataModel.append({"xPos": i, "yPos": result, "zPos": j})
}

수식에 오류가 있거나 알 수 없는 연산자 또는 수학 함수가 포함된 경우, 계산기에서 발생된 오류를 포착하여 오류 대화 상자를 표시합니다:

MessageDialog {
    id : messageDialog
    title: qsTr("Error")
    text: qsTr("Undefined behavior")
    ...

계산기에서 발생한 오류 메시지 표시:

catch(msg) {
    messageDialog.informativeText = msg.toString()
    messageDialog.open()
}

그래프

세 가지 그래프 유형 모두 동일한 데이터 모델을 사용합니다. 다만 그래프 설정 방식에는 몇 가지 차이가 있습니다.

표면

표면 그래프는 데이터를 특별한 변형 없이 표시하는 데 사용됩니다. 이 그래프는 각 행과 열에 방정식을 계산 결과와 함께 렌더링합니다.

유일한 변경 사항은 축 구간 수를 설정하는 것입니다:

axisX.segmentCount: 10
axisZ.segmentCount: 10
axisY.segmentCount: 10

테마에 범위 그라데이션을 설정하여 높은 값과 낮은 값을 강조 표시합니다:

theme : GraphsTheme {
    id: surfaceTheme
    colorStyle: GraphsTheme.ColorStyle.RangeGradient
    baseGradients: [ gradient1 ]
    plotAreaBackgroundVisible: false
}

이 그라디언트 자체는 다른 테마에서도 사용할 수 있도록 별도의 위치에서 정의되어 있습니다.

막대 그래프

막대 그래프의 경우에도 범위 그라데이션이 사용됩니다. 이 그라데이션은 약간의 투명도를 활용하여 그래프를 크게 회전시키지 않고도 값을 더 쉽게 확인할 수 있도록 합니다. 투명도 수준을 조절할 수 있는 슬라이더가 추가되었습니다.

산점도

산점도의 경우, QtQuick3D 통합을 대비하여 테마가 조금 더 조정되었습니다.

첫째, 다른 두 차트와 다른 그라데이션을 사용합니다. 둘째, 시스템 기본 설정을 따르는 다른 두 차트와 달리 어두운 색상 구성으로 강제 설정됩니다. 마지막으로, 플롯 영역의 배경, 레이블 및 격자선을 가시성을 false로 설정하여 숨깁니다.

산점도는 많은 수의 데이터 포인트를 표시하는 데 적합하기 때문에, 각 “행”과 “열”마다 3개의 데이터 포인트가 추가되었습니다. 산점도에는 행과 열이라는 개념이 없기 때문에 다음과 같은 처리가 가능합니다:

for (var i = xValues.first.value; i <= xValues.second.value; i += 0.333) {
    for (var j = zValues.first.value; j <= zValues.second.value; j += 0.333)
        addDataPoint(i, j)
}

산점도는 다른 두 그래프보다 데이터 점이 훨씬 많기 때문에, 점에는 사용 가능한 가장 밝은 mesh type 를 사용하는 것이 좋습니다:

mesh: Abstract3DSeries.Mesh.Point

QtQuick3D 장면 통합

QtQuick3D 유형을 사용할 수 있게 하려면, 이를 QML로 임포트해야 합니다:

import QtQuick3D

QtQuick3D 장면은 ` importScene ` 속성을 사용하여 그래프에 가져올 수 있습니다. 이 장면은 루트 ` Node`에 포함된 `Models`, ` Light`, ` reflection probes` 및 기타 ` Node`의 조합일 수 있습니다. 이 예제에서는 불투명도 맵이 적용된 사각형만 추가됩니다:

importScene: Node {
    Model {
        scale: Qt.vector3d(0.1, 0.1, 0.1)
        source: "#Rectangle"
        y: -2
        eulerRotation.x: -90
        materials: [
            PrincipledMaterial {
                baseColor: "#373F26"
                opacityMap: Texture {
                    source: "qrc:/images/opacitymap.png"
                }
            }
        ]
    }
}

QtQuick3D를 사용하여 외관 변경하기

ExtendedSceneEnvironment 를 사용하려면 다음 임포트가 필요합니다:

import QtQuick3D.Helpers

그래프의 기본 장면 환경을 재정의하려면 ExtendedSceneEnvironment 를 사용하여 environment 속성을 추가합니다. 이 경우 backgroundMode, clearColor 및 tonemapMode 가 설정됩니다. 또한 glow 가 활성화됩니다. 글로우와 같은 후처리 효과를 추가하려면 톤 맵 모드를 TonemapModeNone 로 설정해야 합니다.

environment: ExtendedSceneEnvironment {
    backgroundMode: ExtendedSceneEnvironment.Color
    clearColor: scatterTheme.backgroundColor
    tonemapMode: ExtendedSceneEnvironment.TonemapModeNone
    glowEnabled: true
    ...

글로우 효과를 강하게 만들기 위해 몇 가지 다른 관련 속성도 설정됩니다.

예제 프로젝트 @ code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.