// > CustomCode.functionSelect:12 algebriteintegral = Algebrite.eval('integral('+fTyp+')').toString(); // > CustomCode.functionSelect:13 algebriteintegralprintfull = Algebrite.run('printfull('+algebriteintegral+')').toString(); // > CustomCode.functionSelect:14 // > CustomCode.functionSelect:15 } else if (option=="a*sin(n*x)") { // > CustomCode.functionSelect:16 fTyp = a+"*sin("+n+"*x)"; // > CustomCode.functionSelect:17 min = 0; // > CustomCode.functionSelect:18 max = 2*Math.PI; // > CustomCode.functionSelect:19 fTypS = (-a/n)+"*cos("+n+"*x)"; // > CustomCode.functionSelect:20 // need this to work // > CustomCode.functionSelect:21 // // > CustomCode.functionSelect:22 algebriteintegral = Algebrite.eval('integral('+fTyp+')').toString(); // > CustomCode.functionSelect:23 algebriteintegralprintfull = Algebrite.run('printfull('+algebriteintegral+')').toString(); // > CustomCode.functionSelect:24 } else if (option=="a*sin(n*x) + b*cos(n*x)") { // > CustomCode.functionSelect:25 fTyp = a+"*sin("+n+"*x) + "+b+"*cos("+n+"*x)"; // > CustomCode.functionSelect:26 min = 0; // > CustomCode.functionSelect:27 max = 2*Math.PI; // > CustomCode.functionSelect:28 fTypS = (b/n)+"*sin("+n+"*x) + "+(-a/n)+"*cos("+n+"*x)"; // > CustomCode.functionSelect:29 // need this to work // > CustomCode.functionSelect:30 // // > CustomCode.functionSelect:31 algebriteintegral = Algebrite.eval('integral('+fTyp+')').toString(); // > CustomCode.functionSelect:32 algebriteintegralprintfull = Algebrite.run('printfull('+algebriteintegral+')').toString(); // > CustomCode.functionSelect:33 } // > CustomCode.functionSelect:34 else if (option=="b*cos(m*x)*sin(n*x)") { // > CustomCode.functionSelect:35 fTyp = b+"*cos("+m+"*x)*sin("+n+"*x)"; // > CustomCode.functionSelect:36 min = 0; // > CustomCode.functionSelect:37 max = 2*Math.PI; // > CustomCode.functionSelect:38 fTypS = (b/(m*m-n*n))+"*("+m+"*sin("+m+"*x)*sin("+n+"*x) + "+n+"*cos("+m+"*x)*cos("+n+"*x))"; // > CustomCode.functionSelect:39 //no solutuon algebrite // > CustomCode.functionSelect:40 algebriteintegral = fTypS; // > CustomCode.functionSelect:41 } else if (option=="a*cos(m*x)*cos(n*x)") { // > CustomCode.functionSelect:42 fTyp = a+"*cos("+m+"*x)*cos("+n+"*x)"; // > CustomCode.functionSelect:43 min = 0; // > CustomCode.functionSelect:44 max = 2*Math.PI; // > CustomCode.functionSelect:45 fTypS = (a/(m*m-n*n))+"*("+m+"*sin("+m+"*x)*cos("+n+"*x) + "+(-n)+"*cos("+m+"*x)*sin("+n+"*x))"; // > CustomCode.functionSelect:46 //no solutuon algebrite // > CustomCode.functionSelect:47 algebriteintegral = fTypS; // > CustomCode.functionSelect:48 } else if (option=="b*sin(m*x)*sin(n*x)") { // > CustomCode.functionSelect:49 fTyp = b+"*sin("+m+"*x)*sin("+n+"*x)"; // > CustomCode.functionSelect:50 min = 0; // > CustomCode.functionSelect:51 max = 2*Math.PI; // > CustomCode.functionSelect:52 fTypS = (b/(m*m-n*n))+"*("+n+"*sin("+m+"*x)*cos("+n+"*x) + "+(-m)+"*cos("+m+"*x)*sin("+n+"*x))"; // > CustomCode.functionSelect:53 //no solutuon algebrite // > CustomCode.functionSelect:54 algebriteintegral = fTypS; // > CustomCode.functionSelect:55 } else if (option=="cos(m*x)*(a*cos(n*x) + b*sin(n*x))") { // > CustomCode.functionSelect:56 fTyp = "cos("+m+"*x)*("+a+"*cos("+n+"*x) + "+b+"*sin("+n+"*x))"; // > CustomCode.functionSelect:57 min = 0; // > CustomCode.functionSelect:58 max = 2*Math.PI; // > CustomCode.functionSelect:59 fTypS = (n/(m*m-n*n))+"*cos("+m+"*x)*("+b+"*cos("+n+"*x)-"+a+"*sin("+n+"*x)) + "+(m/(m*m-n*n))+"*sin("+m+"*x)*("+a+"*cos("+n+"*x)+"+b+"*sin("+n+"*x))"; // > CustomCode.functionSelect:60 //no solutuon algebrite // > CustomCode.functionSelect:61 algebriteintegral = fTypS; // > CustomCode.functionSelect:62 } // > CustomCode.functionSelect:63 } // > CustomCode.functionSelect:64 _model.addToInitialization(function() { if (!__pagesEnabled["axes"]) return; _view.plottingPanel.getAxisX().setPosition([0,0.5]); // > Initialization.axes:1 //_view.plottingPanel.getTitleX().setPosition([0.9,0.5]); // > Initialization.axes:2 _view.plottingPanel.getAxisY().setPosition([0.10,0]); // > Initialization.axes:3 //_view.plottingPanel.getTitleY().setPosition([0.5,0.95]); // > Initialization.axes:4 }); _model.addToInitialization(function() { if (!__pagesEnabled["Init Page"]) return; a = 1.0; // > Initialization.Init Page:1 b = 1.0; // > Initialization.Init Page:2 m = 1.0; // > Initialization.Init Page:3 n = 2.0; // > Initialization.Init Page:4 functionSelect(); // > Initialization.Init Page:5 }); _model.addToFixedRelations(function() { _isPaused = _model.isPaused(); _isPlaying = _model.isPlaying(); }); _model.addToFixedRelations(function() { if (!__pagesEnabled["FixRel Page"]) return; //functionSelect(); // > FixedRelations.FixRel Page:1 if (m==n) { // > FixedRelations.FixRel Page:2 m = 1; // > FixedRelations.FixRel Page:3 n = 2; // > FixedRelations.FixRel Page:4 } // > FixedRelations.FixRel Page:5 }); _model.addToFixedRelations(function() { if (!__pagesEnabled["axes"]) return; _view.plottingPanel.getAxisX().setAbsoluteY(_view.plottingPanel.getGrid().getFixedTickY()); // > FixedRelations.axes:1 _view.plottingPanel.getAxisY().setAbsoluteX(_view.plottingPanel.getGrid().getFixedTickX()); // > FixedRelations.axes:2 }); _model.addToFixedRelations(function() { _isPaused = _model.isPaused(); _isPlaying = _model.isPlaying(); }); _model._fontResized = function(iBase,iSize,iDelta) { _view._fontResized(iBase,iSize,iDelta); }; // end of _fontResized function _getViews() { var _viewsInfo = []; var _counter = 0; _viewsInfo[_counter++] = { name : "Simulation View", width : 800, height : 600 }; return _viewsInfo; } // end of _getViews function _selectView(_viewNumber) { _view = null; _view = new e_Fourier_1_View(_topFrame,_viewNumber,_libraryPath,_codebasePath); var _view_super_reset = _view._reset; _view._reset = function() { _view_super_reset(); switch(_viewNumber) { case -10 : break; // make Lint happy default : case 0: _view.label.linkProperty("Font", function() { return font; }, function(_v) { font = _v; } ); // Simulation View linking property 'Font' for element 'label' _view.functionSelect.linkProperty("Options", function() { return ["a*cos(n*x)", "a*sin(n*x)", "a*sin(n*x) + b*cos(n*x)", "b*cos(m*x)*sin(n*x)", "a*cos(m*x)*cos(n*x)", "b*sin(m*x)*sin(n*x)", "cos(m*x)*(a*cos(n*x) + b*sin(n*x))"]; } ); // Simulation View linking property 'Options' for element 'functionSelect' _view.functionSelect.setAction("OnChange", function(_data,_info) { functionSelect (); }); // Simulation View setting action 'OnChange' for element 'functionSelect' _view.functionSelect.linkProperty("Font", function() { return font; }, function(_v) { font = _v; } ); // Simulation View linking property 'Font' for element 'functionSelect' _view.showIntegral.setAction("OnCheckOff", function(_data,_info) { showINT = false; }); // Simulation View setting action 'OnCheckOff' for element 'showIntegral' _view.showIntegral.linkProperty("Checked", function() { return showINT; }, function(_v) { showINT = _v; } ); // Simulation View linking property 'Checked' for element 'showIntegral' _view.showIntegral.setAction("OnCheckOn", function(_data,_info) { showINT = true; }); // Simulation View setting action 'OnCheckOn' for element 'showIntegral' _view.showIntegral.linkProperty("Font", function() { return font; }, function(_v) { font = _v; } ); // Simulation View linking property 'Font' for element 'showIntegral' _view.a.linkProperty("Font", function() { return font; }, function(_v) { font = _v; } ); // Simulation View linking property 'Font' for element 'a' _view.fielda.linkProperty("Value", function() { return a; }, function(_v) { a = _v; } ); // Simulation View linking property 'Value' for element 'fielda' _view.fielda.setAction("OnChange", function(_data,_info) { functionSelect (); // to evaluate algebrite; }); // Simulation View setting action 'OnChange' for element 'fielda' _view.fielda.linkProperty("Font", function() { return font; }, function(_v) { font = _v; } ); // Simulation View linking property 'Font' for element 'fielda' _view.slidera.linkProperty("Value", function() { return a; }, function(_v) { a = _v; } ); // Simulation View linking property 'Value' for element 'slidera' _view.slidera.setAction("OnChange", function(_data,_info) { functionSelect (); // to evaluate algebrite; }); // Simulation View setting action 'OnChange' for element 'slidera' _view.b.linkProperty("Font", function() { return font; }, function(_v) { font = _v; } ); // Simulation View linking property 'Font' for element 'b' _view.fieldb.linkProperty("Value", function() { return b; }, function(_v) { b = _v; } ); // Simulation View linking property 'Value' for element 'fieldb' _view.fieldb.setAction("OnChange", function(_data,_info) { functionSelect (); // to evaluate algebrite; }); // Simulation View setting action 'OnChange' for element 'fieldb' _view.fieldb.linkProperty("Font", function() { return font; }, function(_v) { font = _v; } ); // Simulation View linking property 'Font' for element 'fieldb' _view.sliderb.linkProperty("Value", function() { return b; }, function(_v) { b = _v; } ); // Simulation View linking property 'Value' for element 'sliderb' _view.sliderb.setAction("OnChange", function(_data,_info) { functionSelect (); // to evaluate algebrite; }); // Simulation View setting action 'OnChange' for element 'sliderb' _view.m.linkProperty("Font", function() { return font; }, function(_v) { font = _v; } ); // Simulation View linking property 'Font' for element 'm' _view.fieldm.linkProperty("Value", function() { return m; }, function(_v) { m = _v; } ); // Simulation View linking property 'Value' for element 'fieldm' _view.fieldm.setAction("OnChange", function(_data,_info) { functionSelect (); // to evaluate algebrite; }); // Simulation View setting action 'OnChange' for element 'fieldm' _view.fieldm.linkProperty("Font", function() { return font; }, function(_v) { font = _v; } ); // Simulation View linking property 'Font' for element 'fieldm' _view.sliderm.linkProperty("Value", function() { return m; }, function(_v) { m = _v; } ); // Simulation View linking property 'Value' for element 'sliderm' _view.sliderm.setAction("OnChange", function(_data,_info) { functionSelect (); // to evaluate algebrite; }); // Simulation View setting action 'OnChange' for element 'sliderm' _view.n.linkProperty("Font", function() { return font; }, function(_v) { font = _v; } ); // Simulation View linking property 'Font' for element 'n' _view.fieldn.linkProperty("Value", function() { return n; }, function(_v) { n = _v; } ); // Simulation View linking property 'Value' for element 'fieldn' _view.fieldn.setAction("OnChange", function(_data,_info) { functionSelect (); // to evaluate algebrite; }); // Simulation View setting action 'OnChange' for element 'fieldn' _view.fieldn.linkProperty("Font", function() { return font; }, function(_v) { font = _v; } ); // Simulation View linking property 'Font' for element 'fieldn' _view.slidern.linkProperty("Value", function() { return n; }, function(_v) { n = _v; } ); // Simulation View linking property 'Value' for element 'slidern' _view.slidern.setAction("OnChange", function(_data,_info) { functionSelect (); // to evaluate algebrite; }); // Simulation View setting action 'OnChange' for element 'slidern' _view.plottingPanel.linkProperty("AxisYFont", function() { return font; }, function(_v) { font = _v; } ); // Simulation View linking property 'AxisYFont' for element 'plottingPanel' _view.plottingPanel.linkProperty("TRMessage", function() { return "Fourier Expansion"+" Function="+fTyp; } ); // Simulation View linking property 'TRMessage' for element 'plottingPanel' _view.plottingPanel.linkProperty("XTickStep", function() { return Math.PI; } ); // Simulation View linking property 'XTickStep' for element 'plottingPanel' _view.plottingPanel.linkProperty("TLMessage", function() { return showINT?algebriteintegral:""; } ); // Simulation View linking property 'TLMessage' for element 'plottingPanel' _view.plottingPanel.linkProperty("MaximumX", function() { return 2*Math.PI; } ); // Simulation View linking property 'MaximumX' for element 'plottingPanel' _view.plottingPanel.setAction("OnMove", function(_data,_info) { _view.plottingPanel.getAxisX().setAbsoluteY(_view.plottingPanel.getGrid().getFixedTickY()); _view.plottingPanel.getAxisY().setAbsoluteX(_view.plottingPanel.getGrid().getFixedTickX()); }); // Simulation View setting action 'OnMove' for element 'plottingPanel' _view.plottingPanel.linkProperty("AxisXFont", function() { return font; }, function(_v) { font = _v; } ); // Simulation View linking property 'AxisXFont' for element 'plottingPanel' _view.analyticCurve.linkProperty("FunctionY", function() { return fTyp; }, function(_v) { fTyp = _v; } ); // Simulation View linking property 'FunctionY' for element 'analyticCurve' _view.integralAlgebrite.linkProperty("FunctionY", function() { return algebriteintegralprintfull; }, function(_v) { algebriteintegralprintfull = _v; } ); // Simulation View linking property 'FunctionY' for element 'integralAlgebrite' _view.integral.linkProperty("FunctionY", function() { return fTypS; }, function(_v) { fTypS = _v; } ); // Simulation View linking property 'FunctionY' for element 'integral' _view.integral.linkProperty("NumPoints", function() { return q; }, function(_v) { q = _v; } ); // Simulation View linking property 'NumPoints' for element 'integral' _view.integral.linkProperty("Visibility", function() { return showINT; }, function(_v) { showINT = _v; } ); // Simulation View linking property 'Visibility' for element 'integral' _view.cutoffzero.linkProperty("NumPoints", function() { return q; }, function(_v) { q = _v; } ); // Simulation View linking property 'NumPoints' for element 'cutoffzero' _view.zero.linkProperty("NumPoints", function() { return q; }, function(_v) { q = _v; } ); // Simulation View linking property 'NumPoints' for element 'zero' _view.cutoff2pi.linkProperty("NumPoints", function() { return q; }, function(_v) { q = _v; } ); // Simulation View linking property 'NumPoints' for element 'cutoff2pi' _view.tau.linkProperty("Font", function() { return font; }, function(_v) { font = _v; } ); // Simulation View linking property 'Font' for element 'tau' _view.xaxis.linkProperty("Font", function() { return font; }, function(_v) { font = _v; } ); // Simulation View linking property 'Font' for element 'xaxis' break; } // end of switch }; // end of new reset _model.setView(_view); _model.reset(); _view._enableEPub(); } // end of _selectView _model.setAutoplay(false); _model.setFPS(20); _model.setStepsPerDisplay(1); _selectView(_model._autoSelectView(_getViews())); // this includes _model.reset() return _model; } function e_Fourier_1_View (_topFrame,_viewNumber,_libraryPath,_codebasePath) { var _view; switch(_viewNumber) { case -10 : break; // make Lint happy default : case 0: _view = e_Fourier_1_View_0 (_topFrame); break; } // end of switch if (_codebasePath) _view._setResourcePath(_codebasePath); if (_libraryPath) _view._setLibraryPath(_libraryPath); _view._addDescriptionPage('Fourier Coefficients','./e_Fourier_1_Intro_1.html'); _view._addDescriptionPage('Description','./e_Fourier_1_Intro_2.html'); _view._addDescriptionPage('Experiments','./e_Fourier_1_Intro_3.html'); _view._addDescriptionPage('Authors','./e_Fourier_1_Intro_4.html'); return _view; } // end of main function function e_Fourier_1_View_0 (_topFrame) { var _view = EJSS_CORE.createView(_topFrame); _view._reset = function() { _view._clearAll(); _view._addElement(EJSS_INTERFACE.panel,"panel", _view._topFrame) // EJsS HtmlView.Simulation View: declaration of element 'panel' ; _view._addElement(EJSS_INTERFACE.panel,"functionPanel", _view.panel) // EJsS HtmlView.Simulation View: declaration of element 'functionPanel' ; _view._addElement(EJSS_INTERFACE.imageAndTextButton,"label", _view.functionPanel) // EJsS HtmlView.Simulation View: declaration of element 'label' .setProperty("Text","Function= ") // EJsS HtmlView.Simulation View: setting property 'Text' for element 'label' ; _view._addElement(EJSS_INTERFACE.comboBox,"functionSelect", _view.functionPanel) // EJsS HtmlView.Simulation View: declaration of element 'functionSelect' ; _view._addElement(EJSS_INTERFACE.checkBox,"showIntegral", _view.functionPanel) // EJsS HtmlView.Simulation View: declaration of element 'showIntegral' .setProperty("Background","Red") // EJsS HtmlView.Simulation View: setting property 'Background' for element 'showIntegral' .setProperty("Text","Show Integral") // EJsS HtmlView.Simulation View: setting property 'Text' for element 'showIntegral' ; _view._addElement(EJSS_INTERFACE.panel,"controlPanel", _view.panel) // EJsS HtmlView.Simulation View: declaration of element 'controlPanel' ; _view._addElement(EJSS_INTERFACE.imageAndTextButton,"a", _view.controlPanel) // EJsS HtmlView.Simulation View: declaration of element 'a' .setProperty("Background","rgba(0,255,255,1)") // EJsS HtmlView.Simulation View: setting property 'Background' for element 'a' .setProperty("Text","a = ") // EJsS HtmlView.Simulation View: setting property 'Text' for element 'a' ; _view._addElement(EJSS_INTERFACE.numberField,"fielda", _view.controlPanel) // EJsS HtmlView.Simulation View: declaration of element 'fielda' .setProperty("Width","4vw") // EJsS HtmlView.Simulation View: setting property 'Width' for element 'fielda' .setProperty("Format","a = 0.00") // EJsS HtmlView.Simulation View: setting property 'Format' for element 'fielda' .setProperty("Editable",true) // EJsS HtmlView.Simulation View: setting property 'Editable' for element 'fielda' ; _view._addElement(EJSS_INTERFACE.slider,"slidera", _view.controlPanel) // EJsS HtmlView.Simulation View: declaration of element 'slidera' .setProperty("Minimum",-3.0) // EJsS HtmlView.Simulation View: setting property 'Minimum' for element 'slidera' .setProperty("Maximum",3.0) // EJsS HtmlView.Simulation View: setting property 'Maximum' for element 'slidera' .setProperty("Format","a = 0.00") // EJsS HtmlView.Simulation View: setting property 'Format' for element 'slidera' .setProperty("Background","rgba(0,255,255,1)") // EJsS HtmlView.Simulation View: setting property 'Background' for element 'slidera' .setProperty("Tooltip","Adjust value of a") // EJsS HtmlView.Simulation View: setting property 'Tooltip' for element 'slidera' ; _view._addElement(EJSS_INTERFACE.imageAndTextButton,"b", _view.controlPanel) // EJsS HtmlView.Simulation View: declaration of element 'b' .setProperty("Background","rgba(255,0,128,1)") // EJsS HtmlView.Simulation View: setting property 'Background' for element 'b' .setProperty("Text","b = ") // EJsS HtmlView.Simulation View: setting property 'Text' for element 'b' ; _view._addElement(EJSS_INTERFACE.numberField,"fieldb", _view.controlPanel) // EJsS HtmlView.Simulation View: declaration of element 'fieldb' .setProperty("Width","4vw") // EJsS HtmlView.Simulation View: setting property 'Width' for element 'fieldb' .setProperty("Format","b = 0.00") // EJsS HtmlView.Simulation View: setting property 'Format' for element 'fieldb' .setProperty("Editable",true) // EJsS HtmlView.Simulation View: setting property 'Editable' for element 'fieldb' ; _view._addElement(EJSS_INTERFACE.slider,"sliderb", _view.controlPanel) // EJsS HtmlView.Simulation View: declaration of element 'sliderb' .setProperty("Minimum",-6.0) // EJsS HtmlView.Simulation View: setting property 'Minimum' for element 'sliderb' .setProperty("Maximum",6.0) // EJsS HtmlView.Simulation View: setting property 'Maximum' for element 'sliderb' .setProperty("Format","b = 0.00") // EJsS HtmlView.Simulation View: setting property 'Format' for element 'sliderb' .setProperty("Background","rgba(255,0,128,1)") // EJsS HtmlView.Simulation View: setting property 'Background' for element 'sliderb' .setProperty("Font","Adjust value of b") // EJsS HtmlView.Simulation View: setting property 'Font' for element 'sliderb' ; _view._addElement(EJSS_INTERFACE.imageAndTextButton,"m", _view.controlPanel) // EJsS HtmlView.Simulation View: declaration of element 'm' .setProperty("Background","rgba(255,255,64,1)") // EJsS HtmlView.Simulation View: setting property 'Background' for element 'm' .setProperty("Text","m = ") // EJsS HtmlView.Simulation View: setting property 'Text' for element 'm' ; _view._addElement(EJSS_INTERFACE.numberField,"fieldm", _view.controlPanel) // EJsS HtmlView.Simulation View: declaration of element 'fieldm' .setProperty("Width","4vw") // EJsS HtmlView.Simulation View: setting property 'Width' for element 'fieldm' .setProperty("Format","m = 0.00") // EJsS HtmlView.Simulation View: setting property 'Format' for element 'fieldm' .setProperty("Editable",true) // EJsS HtmlView.Simulation View: setting property 'Editable' for element 'fieldm' ; _view._addElement(EJSS_INTERFACE.slider,"sliderm", _view.controlPanel) // EJsS HtmlView.Simulation View: declaration of element 'sliderm' .setProperty("Minimum",1) // EJsS HtmlView.Simulation View: setting property 'Minimum' for element 'sliderm' .setProperty("Maximum",10) // EJsS HtmlView.Simulation View: setting property 'Maximum' for element 'sliderm' .setProperty("Format","m = 0") // EJsS HtmlView.Simulation View: setting property 'Format' for element 'sliderm' .setProperty("Background","rgba(255,255,64,1)") // EJsS HtmlView.Simulation View: setting property 'Background' for element 'sliderm' .setProperty("Tooltip","Adjust value of m") // EJsS HtmlView.Simulation View: setting property 'Tooltip' for element 'sliderm' ; _view._addElement(EJSS_INTERFACE.imageAndTextButton,"n", _view.controlPanel) // EJsS HtmlView.Simulation View: declaration of element 'n' .setProperty("Background","rgba(0,192,0,1)") // EJsS HtmlView.Simulation View: setting property 'Background' for element 'n' .setProperty("Text","n = ") // EJsS HtmlView.Simulation View: setting property 'Text' for element 'n' ; _view._addElement(EJSS_INTERFACE.numberField,"fieldn", _view.controlPanel) // EJsS HtmlView.Simulation View: declaration of element 'fieldn' .setProperty("Width","4vw") // EJsS HtmlView.Simulation View: setting property 'Width' for element 'fieldn' .setProperty("Format","n = 0.00") // EJsS HtmlView.Simulation View: setting property 'Format' for element 'fieldn' .setProperty("Editable",true) // EJsS HtmlView.Simulation View: setting property 'Editable' for element 'fieldn' ; _view._addElement(EJSS_INTERFACE.slider,"slidern", _view.controlPanel) // EJsS HtmlView.Simulation View: declaration of element 'slidern' .setProperty("Minimum",1) // EJsS HtmlView.Simulation View: setting property 'Minimum' for element 'slidern' .setProperty("Maximum",10) // EJsS HtmlView.Simulation View: setting property 'Maximum' for element 'slidern' .setProperty("Format","n = 0") // EJsS HtmlView.Simulation View: setting property 'Format' for element 'slidern' .setProperty("Background","rgba(0,192,0,1)") // EJsS HtmlView.Simulation View: setting property 'Background' for element 'slidern' .setProperty("Tooltip","Adjust value of n") // EJsS HtmlView.Simulation View: setting property 'Tooltip' for element 'slidern' ; _view._addElement(EJSS_DRAWING2D.plottingPanel,"plottingPanel", _view.panel) // EJsS HtmlView.Simulation View: declaration of element 'plottingPanel' .setProperty("Height","83vh") // EJsS HtmlView.Simulation View: setting property 'Height' for element 'plottingPanel' .setProperty("Width","100%") // EJsS HtmlView.Simulation View: setting property 'Width' for element 'plottingPanel' .setProperty("Gutters",[0,0,0,0]) // EJsS HtmlView.Simulation View: setting property 'Gutters' for element 'plottingPanel' .setProperty("YScalePrecision",0) // EJsS HtmlView.Simulation View: setting property 'YScalePrecision' for element 'plottingPanel' .setProperty("XFixedTick",0) // EJsS HtmlView.Simulation View: setting property 'XFixedTick' for element 'plottingPanel' .setProperty("YFixedTick",0) // EJsS HtmlView.Simulation View: setting property 'YFixedTick' for element 'plottingPanel' .setProperty("YTickStep",1) // EJsS HtmlView.Simulation View: setting property 'YTickStep' for element 'plottingPanel' .setProperty("XAutoTicks",false) // EJsS HtmlView.Simulation View: setting property 'XAutoTicks' for element 'plottingPanel' .setProperty("Enabled",true) // EJsS HtmlView.Simulation View: setting property 'Enabled' for element 'plottingPanel' .setProperty("SquareAspect",true) // EJsS HtmlView.Simulation View: setting property 'SquareAspect' for element 'plottingPanel' .setProperty("MaximumY",2) // EJsS HtmlView.Simulation View: setting property 'MaximumY' for element 'plottingPanel' .setProperty("YAutoTicks",false) // EJsS HtmlView.Simulation View: setting property 'YAutoTicks' for element 'plottingPanel' .setProperty("MinimumX",0) // EJsS HtmlView.Simulation View: setting property 'MinimumX' for element 'plottingPanel' .setProperty("MinimumY",-2) // EJsS HtmlView.Simulation View: setting property 'MinimumY' for element 'plottingPanel' .setProperty("AutoScaleY",false) // EJsS HtmlView.Simulation View: setting property 'AutoScaleY' for element 'plottingPanel' .setProperty("AutoScaleX",false) // EJsS HtmlView.Simulation View: setting property 'AutoScaleX' for element 'plottingPanel' .setProperty("XScalePrecision",4) // EJsS HtmlView.Simulation View: setting property 'XScalePrecision' for element 'plottingPanel' ; _view._addElement(EJSS_DRAWING2D.analyticCurve,"analyticCurve", _view.plottingPanel) // EJsS HtmlView.Simulation View: declaration of element 'analyticCurve' .setProperty("FunctionX","x") // EJsS HtmlView.Simulation View: setting property 'FunctionX' for element 'analyticCurve' .setProperty("Variable","x") // EJsS HtmlView.Simulation View: setting property 'Variable' for element 'analyticCurve' .setProperty("LineColor","blue") // EJsS HtmlView.Simulation View: setting property 'LineColor' for element 'analyticCurve' .setProperty("X",0) // EJsS HtmlView.Simulation View: setting property 'X' for element 'analyticCurve' .setProperty("Y",0) // EJsS HtmlView.Simulation View: setting property 'Y' for element 'analyticCurve' .setProperty("LineWidth",3) // EJsS HtmlView.Simulation View: setting property 'LineWidth' for element 'analyticCurve' ; _view._addElement(EJSS_DRAWING2D.analyticCurve,"integralAlgebrite", _view.plottingPanel) // EJsS HtmlView.Simulation View: declaration of element 'integralAlgebrite' .setProperty("FunctionX","x") // EJsS HtmlView.Simulation View: setting property 'FunctionX' for element 'integralAlgebrite' .setProperty("Variable","x") // EJsS HtmlView.Simulation View: setting property 'Variable' for element 'integralAlgebrite' .setProperty("LineColor","Red") // EJsS HtmlView.Simulation View: setting property 'LineColor' for element 'integralAlgebrite' .setProperty("Visibility",false) // EJsS HtmlView.Simulation View: setting property 'Visibility' for element 'integralAlgebrite' .setProperty("LineWidth",3) // EJsS HtmlView.Simulation View: setting property 'LineWidth' for element 'integralAlgebrite' ; _view._addElement(EJSS_DRAWING2D.analyticCurve,"integral", _view.plottingPanel) // EJsS HtmlView.Simulation View: declaration of element 'integral' .setProperty("FunctionX","x") // EJsS HtmlView.Simulation View: setting property 'FunctionX' for element 'integral' .setProperty("Variable","x") // EJsS HtmlView.Simulation View: setting property 'Variable' for element 'integral' .setProperty("X",0) // EJsS HtmlView.Simulation View: setting property 'X' for element 'integral' .setProperty("LineColor","red") // EJsS HtmlView.Simulation View: setting property 'LineColor' for element 'integral' .setProperty("Y",0) // EJsS HtmlView.Simulation View: setting property 'Y' for element 'integral' .setProperty("LineWidth",2) // EJsS HtmlView.Simulation View: setting property 'LineWidth' for element 'integral' ; _view._addElement(EJSS_DRAWING2D.analyticCurve,"cutoffzero", _view.plottingPanel) // EJsS HtmlView.Simulation View: declaration of element 'cutoffzero' .setProperty("FunctionY","y") // EJsS HtmlView.Simulation View: setting property 'FunctionY' for element 'cutoffzero' .setProperty("FunctionX","0") // EJsS HtmlView.Simulation View: setting property 'FunctionX' for element 'cutoffzero' .setProperty("Minimum",-5) // EJsS HtmlView.Simulation View: setting property 'Minimum' for element 'cutoffzero' .setProperty("Maximum",5) // EJsS HtmlView.Simulation View: setting property 'Maximum' for element 'cutoffzero' .setProperty("Variable","y") // EJsS HtmlView.Simulation View: setting property 'Variable' for element 'cutoffzero' .setProperty("X",0) // EJsS HtmlView.Simulation View: setting property 'X' for element 'cutoffzero' .setProperty("LineColor","Green") // EJsS HtmlView.Simulation View: setting property 'LineColor' for element 'cutoffzero' .setProperty("Attributes",{ "stroke-dasharray":"8 8 8 8" }) // EJsS HtmlView.Simulation View: setting property 'Attributes' for element 'cutoffzero' .setProperty("Y",0) // EJsS HtmlView.Simulation View: setting property 'Y' for element 'cutoffzero' .setProperty("LineWidth",3) // EJsS HtmlView.Simulation View: setting property 'LineWidth' for element 'cutoffzero' ; _view._addElement(EJSS_DRAWING2D.analyticCurve,"zero", _view.plottingPanel) // EJsS HtmlView.Simulation View: declaration of element 'zero' .setProperty("FunctionY","0") // EJsS HtmlView.Simulation View: setting property 'FunctionY' for element 'zero' .setProperty("FunctionX","x") // EJsS HtmlView.Simulation View: setting property 'FunctionX' for element 'zero' .setProperty("Variable","x") // EJsS HtmlView.Simulation View: setting property 'Variable' for element 'zero' .setProperty("X",0) // EJsS HtmlView.Simulation View: setting property 'X' for element 'zero' .setProperty("LineColor","Green") // EJsS HtmlView.Simulation View: setting property 'LineColor' for element 'zero' .setProperty("Attributes",{ "stroke-dasharray":"8 8 8 8" }) // EJsS HtmlView.Simulation View: setting property 'Attributes' for element 'zero' .setProperty("Y",0) // EJsS HtmlView.Simulation View: setting property 'Y' for element 'zero' .setProperty("Visibility",false) // EJsS HtmlView.Simulation View: setting property 'Visibility' for element 'zero' .setProperty("LineWidth",3) // EJsS HtmlView.Simulation View: setting property 'LineWidth' for element 'zero' ; _view._addElement(EJSS_DRAWING2D.analyticCurve,"cutoff2pi", _view.plottingPanel) // EJsS HtmlView.Simulation View: declaration of element 'cutoff2pi' .setProperty("FunctionY","y") // EJsS HtmlView.Simulation View: setting property 'FunctionY' for element 'cutoff2pi' .setProperty("FunctionX","6.283185") // EJsS HtmlView.Simulation View: setting property 'FunctionX' for element 'cutoff2pi' .setProperty("Minimum",-5) // EJsS HtmlView.Simulation View: setting property 'Minimum' for element 'cutoff2pi' .setProperty("Maximum",5) // EJsS HtmlView.Simulation View: setting property 'Maximum' for element 'cutoff2pi' .setProperty("Variable","y") // EJsS HtmlView.Simulation View: setting property 'Variable' for element 'cutoff2pi' .setProperty("X",0) // EJsS HtmlView.Simulation View: setting property 'X' for element 'cutoff2pi' .setProperty("LineColor","Green") // EJsS HtmlView.Simulation View: setting property 'LineColor' for element 'cutoff2pi' .setProperty("Attributes",{ "stroke-dasharray":"8 8 8 8" }) // EJsS HtmlView.Simulation View: setting property 'Attributes' for element 'cutoff2pi' .setProperty("Y",0) // EJsS HtmlView.Simulation View: setting property 'Y' for element 'cutoff2pi' .setProperty("LineWidth",3) // EJsS HtmlView.Simulation View: setting property 'LineWidth' for element 'cutoff2pi' ; _view._addElement(EJSS_DRAWING2D.text,"tau", _view.plottingPanel) // EJsS HtmlView.Simulation View: declaration of element 'tau' .setProperty("FillColor","black") // EJsS HtmlView.Simulation View: setting property 'FillColor' for element 'tau' .setProperty("X",6.4) // EJsS HtmlView.Simulation View: setting property 'X' for element 'tau' .setProperty("Y",-0.1) // EJsS HtmlView.Simulation View: setting property 'Y' for element 'tau' .setProperty("Text","2π") // EJsS HtmlView.Simulation View: setting property 'Text' for element 'tau' .setProperty("Visibility",false) // EJsS HtmlView.Simulation View: setting property 'Visibility' for element 'tau' ; _view._addElement(EJSS_DRAWING2D.text,"xaxis", _view.plottingPanel) // EJsS HtmlView.Simulation View: declaration of element 'xaxis' .setProperty("FillColor","black") // EJsS HtmlView.Simulation View: setting property 'FillColor' for element 'xaxis' .setProperty("X",0.07) // EJsS HtmlView.Simulation View: setting property 'X' for element 'xaxis' .setProperty("Y",-0.1) // EJsS HtmlView.Simulation View: setting property 'Y' for element 'xaxis' .setProperty("Text","0") // EJsS HtmlView.Simulation View: setting property 'Text' for element 'xaxis' .setProperty("Visibility",false) // EJsS HtmlView.Simulation View: setting property 'Visibility' for element 'xaxis' ; }; return _view; } //-->
This interactive simulation helps students visualize and calculate integrals of Fourier terms to understand how Fourier coefficients are derived. By manipulating variables and observing the graphical representation of trigonometric functions and their integrals, learners develop intuition for Fourier series decomposition and the orthogonality properties of sine and cosine functions.
Learning objectives: Understand how integrals determine Fourier coefficients | Visualize the orthogonality of trigonometric basis functions | Apply integration techniques to decompose periodic signals