{"id":4652,"date":"2015-09-08T06:17:05","date_gmt":"2015-09-08T06:17:05","guid":{"rendered":"http:\/\/dientoan.julia.us\/?p=4652"},"modified":"2018-06-19T11:31:18","modified_gmt":"2018-06-19T11:31:18","slug":"note-3-periodic-functions","status":"publish","type":"post","link":"http:\/\/www.dientoan.us\/?p=4652","title":{"rendered":"3. Periodic functions"},"content":{"rendered":"<link rel=\"stylesheet\" type=\"text\/css\" href=\"\/php\/jsxgraph.css\"\/>\n<script type=\"text\/javascript\" src=\"\/php\/jsxgraphcore.js\"><\/script><br \/>\n<script type=\"text\/x-mathjax-config\">\n  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\\\(','\\\\)']]}});\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/php\/mathjax\/MathJax.js?config=TeX-AMS-MML_HTMLorMML\"><\/script><\/p>\n<style>\n.myfont {border: 0px solid black;padding: 0px;border-radius:0px;\nfont-family: Bitstream Charter,Verdana;font-weight:bold;font-style:normal;\nfont-size:20pt}\n.copyright {color:#C0C0C0;\nfont-weight:bold;font-style:italic;font-size:9pt;\nfont-family:Bitstream Charter,Verdana}\n.label {color:#656535;\nfont-weight:bold;font-style:normal;font-size:9pt;\nfont-family:Bitstream Charter,Verdana}\n<\/style>\n<p><u>Note 3<\/u>. Periodic function such as $f(x)=sin(x)$ has a period of $2&pi;$, since the complete circle is $2&pi;$ radians. The display ticks and grids in this case needs to be multiple of &pi;. This is almost required for most trigonometric and periodic functions.<br \/>\n1. To display two complete periods of $sin(x)$, the bounding box is from $-&pi;$ (-Math.PI) to $3&pi;$ (3*Math.PI).<br \/>\n2. To display in multiple of $&pi;$ and position the grid lines accordingly, use <u>scale:Math.PI,scaleSymbol:&#8217;\\\\\\\\pi&#8217;<\/u>. Note the use of double slashes so that MathJax can display the symbol $&pi;$ (\\pi) better than using standard HTML &pi;. To skip the labeling every half $&pi;$, set <u>XG.Options.grid.gridX=Math.PI\/2.0<\/u>.<br \/>\n3. The sample points with coordinates are display at multiple of half $&pi;$.<br \/>\n4. At smaller display scale, the point coordinates shown in the info box when the mouse is hovering over the points are inaccurate (display a very small number instead of 0), and should be disabled by setting <u>showInfobox:false<\/u>. This information is not meaningful when generating non-interactive graphs for pdf documents and must be disabled in this case.<\/p>\n<div id=\"note3\" class=\"jxgbox\" style=\"width:400px;height:400px;background-color:#F0F0F0;border-color:#65A035;border-radius:4px;font-family:'Bitstream Charter',Verdana\"><\/div>\n<p><script type=\"text\/javascript\">\n     JXG.Options.text.useMathJax=true;\n     JXG.Options.text.cssClass='myfont';\n     JXG.Options.grid.gridX=Math.PI\/2.0;\n     JXG.Options.grid.gridY=1;\n     left=-Math.PI-0.5;\n     right=3*Math.PI+0.5;\n     top=1.1;bottom=-1.1;\n     b=JXG.JSXGraph.initBoard('note3',\n{boundingbox:[-Math.PI-0.5,1.1,3*Math.PI+0.5,-1.1],\naxis:false,grid:false,keepAspectRatio:false,\nshowCopyright:false,showNavigation:false});\n     xAxis=b.create('axis',[[-Math.PI-0.5,0],[3*Math.PI+0.5,0]],{\nname:'\\\\(x\\\\)',withLabel:true, \nlabel:{position:'rt',offset:[0,-5],highlight:false},\nfirstArrow:false,lastArrow:true,strokeColor:'#656535',highlight:false});\n     xAxis.removeAllTicks();\n     b.create('ticks',[xAxis,1],\n{scale:Math.PI,scaleSymbol:'$\\\\\\\\pi$',\nmajorHeight:6,minorHeight:2,minorTicks:1,drawZero:true,\ndrawLabels:true,label:{offset:[-15,-5],\nstrokeColor:'#656535',fontSize:12,highlight:false},\nstrokeColor:'#656535',highlight:false});\n     yAxis=b.create('axis',[[0,-1],[0,1]],{\nname:'\\\\(y\\\\)',withLabel: true, \nlabel:{position:'urt',offset:[-15,0],highlight:false},\nfirstArrow:false,lastArrow:true,strokeColor:'#656535',highlight:false});\n     yAxis.removeAllTicks();\n     b.create('grid',[],{strokeColor:'#C0C040'});\n     f=b.create('functiongraph',\n[function(x){return Math.sin(x);},-Math.PI-0.5,3*Math.PI+0.5]);\nf.setProperty({highlight:false});\n     b.create('ticks',[yAxis,1],\n{majorHeight:6,minorHeight:2,\ndrawLabels:true,label:{offset:[5,0],strokeColor:'#656535',fontSize:12,highlight:false},\nminorTicks:0,strokeColor:'#656535',highlight:false});\n     b.create('text',[5,-1.05,\"<span class=copyright>&copy;dientoan.us 2010-2015<\/span>\"]);\nfor (n=0;n<9;n++) {\n     x=Math.PI*(n-2)\/2.0;\n     y=Math.sin(x);\n     b.create('point',[x,y],{name:'',face:'o',size:0.25,\nstrokeColor:'red',fixed:true,highlight:false,showInfobox:false});\n}\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note 3. Periodic function such as $f(x)=sin(x)$ has a period of $2&pi;$, since the complete circle is $2&pi;$ radians. The display ticks and grids in this case needs to be multiple of &pi;. This is almost required for most trigonometric &hellip; <a href=\"http:\/\/www.dientoan.us\/?p=4652\">\u0110\u1ecdc ti\u1ebfp <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"http:\/\/www.dientoan.us\/index.php?rest_route=\/wp\/v2\/posts\/4652"}],"collection":[{"href":"http:\/\/www.dientoan.us\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.dientoan.us\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.dientoan.us\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.dientoan.us\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4652"}],"version-history":[{"count":0,"href":"http:\/\/www.dientoan.us\/index.php?rest_route=\/wp\/v2\/posts\/4652\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.dientoan.us\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.dientoan.us\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4652"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.dientoan.us\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}