JavaScript der Animation auf der Seite Klassische Wellengleichung:
#INCLUDE JsGraph.inc <jscript> var Model = { maxTime: 15, time: 0, speed: 2, startTime: 0, dir: 1, running: true, Update: function() { if (this.startTime == 0) { this.startTime = xTimeMS(); } else { var t = xTimeMS(); var dt = this.speed * (t - this.startTime) / 1000; this.startTime = t; this.time += this.dir * dt; if (this.time >= this.maxTime) { this.dir = -1; this.time = this.maxTime; } else if (this.time <= 0) { this.dir = 1; this.time = 0; } } }, f: function( z ) { var x = z - this.time; return Math.exp( -(x*x) ) * Math.sin( Math.PI * x ); } }; function PlayStop() { Model.running = !Model.running; if (Model.running) { Model.startTime = xTimeMS(); UpdateWaveGraph(); } } var WaveGraph = NewGraph2D( { Id: 'WaveGraph', Height: '15%', DrawFunc: DrawWaveGraph, AutoScalePix: true } ); function UpdateWaveGraph() { Model.Update(); DrawWaveGraph( WaveGraph ); if (Model.running) requestAnimationFrame( UpdateWaveGraph ); } function DrawWaveGraph( g ) { g.Reset(); g.SetWindow( 3, -1.1, Model.maxTime-3, 1.1 ); g.NewPoly(); for (var x = 0; x <= Model.maxTime; x += 0.2 ) { g.AddPointToPoly( x, Model.f(x) ); } g.SetLineAttr( 'blue', 2 ); g.DrawPoly(); g.SetMarkerAttr( 'Square', 8, 'red', 'white', 2 ); g.DrawPolyMarker(); var sign = Model.dir > 0 ? '−' : '+'; sign = '<span style="color:red">' + sign + '</span>'; var txt = '<i>f</i>( <i>z</i> ' + sign + ' <i>v · t</i> )'; g.SetTextAttr( 'Times New Roman, Times, Serife', 24, 'black', 'normal', 'normal', 'left' ); g.Text( txt, 3.2, 0.7 ); } xAddEvent( 'WaveGraph', 'click', PlayStop ); xOnLoad( UpdateWaveGraph ); </jscript>