JavaFX Example FunctionGraph

Построение графика функции[]

Этот пример демонстрирует, как можно нарисовать график функции на языке JavaFX Script

Определение функции[]

function f1(x:Number):Number{
    return 6 * Math.exp( -(x * x ) / 2 );
};

function f2(x:Number):Number{
    var n = 10; 

    var sum = 0.0;
    var sign = 1.0;
    

    for(i in [1..n]){

        sign = -sign;
        sum += ((1 - sign) * Math.sin(i * x)) / i; 
    }

    return sum;
};

Изображение функции[]

 class FuncGraph extends CustomNode{

    var scale:Number = 1;
    var xMin: Number;
    var xMax: Number;
    var dx: Number = 1;
    var color: Color;

    var func: function(a: Number):Number;

    override function create():Node{

        var n = (xMax - xMin) / dx;

        Group{
            content: Polyline{
                stroke: color
                points: for(i in [0..n]) [(xMin + i * dx) * scale, - func(xMin + i * dx) * scale]
            }
        }
    }
}

Изображение координат[]

 class Coordinats extends CustomNode{

    var xMin: Number;
    var xMax: Number;
    var scale: Number;
    var color: Color = Color.GREEN;

    override function create():Node{
      var min = xMin * scale;
      var max = xMax * scale;
      var h = 7;

      Group{
        content:[
            Line{ startX: min endX: max stroke: color },
            Line{ startX: max endX: max - h endY: h stroke: color },
            Line{ startX: max endX: max - h endY: -h stroke: color },
            Line{ startY: min endY: max stroke: color },
            Line{ startY: min  endX: -h endY: min + h stroke: color },
            Line{ startY: min  endX:  h endY: min + h stroke: color },
            Group{
                content: [
                    Text{ x: min y: -3 content: "{xMin}" },
                    Text{ x: max y: -3 content: "{xMax}"}
                ]
              }
            ]
      }
    }
}

Главное окно приложения[]

 var w = 300;
var h = 300;

var xMin = -4;
var xMax = 4;

var dx = 0.1;
var scale = 20;


Stage {
    title: "Function Graph"
    width:  300
    height: 300

    scene: Scene{
     content: Group{

            transforms: Translate.translate(w/2, h/2)
            content: [
                Coordinats{
                    xMin: xMin
                    xMax: xMax
                    scale: scale
                }, FuncGraph {
                    xMin: xMin
                    xMax: xMax
                    scale: scale
                    dx: dx
                    color: Color.DARKORANGE
                    func: f1
                },FuncGraph {
                    xMin: xMin
                    xMax: xMax
                    scale: scale
                    dx: dx
                    color: Color.BLUE
                    func: f2
            }
        ]
      }
   }
}

Полный пример[]

 import javafx.scene.*;
import javafx.stage.*;
import javafx.scene.text.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.transform.*;

import java.lang.Math;


function f1(x:Number):Number{
    return 3 * Math.exp( -(x * x ) / 2 );
};

function f2(x:Number):Number{
    var n = 10;

    var sum = 0.0;
    var sign = 1.0;


    for(i in [1..n]){

        sign = -sign;
        sum += ((1 - sign) * Math.sin(i * x)) / i;
    }

    return sum;
};


class FuncGraph extends CustomNode{

    var scale:Number = 1;
    var xMin: Number;
    var xMax: Number;
    var dx: Number = 1;
    var color: Color;

    var func: function(a: Number):Number;

    override function create():Node{

        var n = (xMax - xMin) / dx;

        Group{
            content: Polyline{
                stroke: color
                points: for(i in [0..n]) [(xMin + i * dx) * scale, - func(xMin + i * dx) * scale]
            }
        }
    }
}


class Coordinats extends CustomNode{

    var xMin: Number;
    var xMax: Number;
    var scale: Number;
    var color: Color = Color.GREEN;

    override function create():Node{
      var min = xMin * scale;
      var max = xMax * scale;
      var h = 7;

      Group{
        content:[
            Line{ startX: min endX: max stroke: color },
            Line{ startX: max endX: max - h endY: h stroke: color },
            Line{ startX: max endX: max - h endY: -h stroke: color },
            Line{ startY: min endY: max stroke: color },
            Line{ startY: min  endX: -h endY: min + h stroke: color },
            Line{ startY: min  endX:  h endY: min + h stroke: color },
            Group{
                content: [
                    Text{ x: min y: -3 content: "{xMin}" },
                    Text{ x: max y: -3 content: "{xMax}"}
                ]
              }
            ]
      }
    }
}

var w = 300;
var h = 300;

var xMin = -4;
var xMax = 4;

var dx = 0.1;
var scale = 20;


Stage {
    title: "Function Graph"
    width:  300
    height: 300

    scene: Scene{
     content: Group{

            transforms: Translate.translate(w/2, h/2)
            content: [
                Coordinats{
                    xMin: xMin
                    xMax: xMax
                    scale: scale
                }, FuncGraph {
                    xMin: xMin
                    xMax: xMax
                    scale: scale
                    dx: dx
                    color: Color.DARKORANGE
                    func: f1
                },FuncGraph {
                    xMin: xMin
                    xMax: xMax
                    scale: scale
                    dx: dx
                    color: Color.BLUE
                    func: f2
            }
        ]
      }
   }
}

JavaFX Example FunctionGraph

Содержание

Построение графика функции[]

Определение функции[]

Изображение функции[]

Изображение координат[]

Главное окно приложения[]

Полный пример[]

Fan Feed