5.2 Developing the Model files

I know it has been a number of steps to get to this point, but, this is where we start working on the frontend part of the simulation. All of the procedures up until this point were required to setup our development phase. Now, with all that out of the way, let’s talk about the model files for our newton-raphson simulation.

5.2.1 Graph.js

The role of this file is essentially to act as a placeholder for all the properties related to a graph and the graphing mechanism. For example, from the basic structure of our simulation explained in Developing Newton-Raphson Method Simulation, we know that we need a radio button group for choosing our functions, another radio button group for choosing the number of iterations, and last but not the least - a slider for the \(x_0\) value. Each of these components has to be referred later in the simulation to adapt some functionality based on certain input values. Therefore, there should be an attribute associated with each for ease of access. In that context, let me introduce you to properties.

The basic idea is to associate a property that is linked with the component. For example, a slider in this case could have a property called xProperty. This property is then updated whenever there is a change to the slider through the user.

Note

• To access the value of a property, you can do something like graph.xProperty.value

5.2.2 Code for Graph.js

Now that we have a foundational understanding of what properties are and why they are being used for this simulation, let’s dive into the code I have written and go step by step talking about the different values.

/**
 * Model of a rectangular graph and all the functions and values related to it.
 * @author Mayank Pandey
 */

import NumberProperty from '../../../../axon/js/NumberProperty.js';
import Property from '../../../../axon/js/Property.js';
import newtonRaphson from '../../newtonRaphson.js';

class Graph {

  constructor( ) {

    // property for storing the x value.
    this.xProperty = new NumberProperty( 0.01 );

    const iterationValues = [ '0', '1', '2', '3', '4', '5' ];
    // property for choosing value of iterations. Initial value is 0.
    this.iterationValuesProperty = new Property( iterationValues[ 0 ] );

    const functionValues = [ 'x<sup>2</sup> - 2 = 0', 'cos(x) = 0',
    'x<sup>3</sup> - 7 = 0', 'x<sup>3</sup> - 3x<sup>2</sup> + x - 1 = 0'];
    // property for choosing function. Initial value is x^2 - 2 = 0.
    this.functionValuesProperty = new Property( functionValues[ 0 ] );

    // stores current function to be used.
    this.currFunc = '';

    // stores the current dataSet function to be used for plotting.
    this.currFuncDataSet = '';
  }

  /**
   * Reset the visibility of the lines as well as the input and output boxes.
   * @public
   */
  reset() {
    this.currFunc = '';
    this.currFuncDataSet = '';
    this.xProperty.reset();
    this.iterationValuesProperty.reset();
    this.functionValuesProperty.reset();
  }

}
newtonRaphson.register( 'Graph', Graph ); // registering the component

export default Graph;

We define our properties with the this keyword in the constructor to denote that these properties are specific to that instance of the graph class. The xProperty is initialized with a starting value of 0.01.

Note about radio buttons

• The cool thing about the radio button group is that all values for that group are part of a set of mututally-exclusive choices. Therefore, all the choices go in an array which is fed to the radio button group. In this case, we are even initializing the radio button with the first choice respectively for function and iterations.

After the radio button properties, we have

    // stores current function to be used.
    this.currFunc = '';

    // stores the current dataSet function to be used for plotting.
    this.currFuncDataSet = '';

I am using this as a graph attribute to standardize the actions for all functions by just storing the currently active selection in these properties.

To end it off, we have a reset() function that resets the values of all our properties when the reset button is pressed.

5.2.3 NewtonRaphsonModel.js

This file is rather simple in our case due to the nature of our simulation i.e since we only have one model which is the Graph.js. However, this may not always be the case and so it is better to still have a model file for convention. To see an example of the case where we can have multiple model files, checkout What is a model folder?

5.2.4 Code for NewtonRaphsonModel.js

So, without further adue, here’s the code for this file:

/**
 * Contains all of the model logic.
 *
 * @author Mayank Pandey
 */

import newtonRaphson from '../../newtonRaphson.js';
import Graph from './Graph.js';

class NewtonRaphsonModel {
  constructor() {

    // Creating a new Graph object which is now a part of this instance.
    this.graph = new Graph();

  }

  /**
   * Resets values to their original state
   * @public
   */
  reset() {
    this.graph.reset();
  }


}

newtonRaphson.register( 'NewtonRaphsonModel', NewtonRaphsonModel );

export default NewtonRaphsonModel;

All we are doing inside the constructor here is creating a new instance of the Graph class and assigning it to the graph attribute of this instance of the model class. Additionally, we have a reset() function that resets the graph properties.