WaBis

walter.bislins.ch

JavaScript: Beispiel Wellenfunktion

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 ? '&minus;' : '+';
  sign = '<span style="color:red">' + sign + '</span>';
  var txt = '<i>f</i>( <i>z</i> ' + sign + ' <i>v &middot; 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>

More Page Infos / Sitemap
Created Samstag, 16. Mai 2015
Scroll to Top of Page
Changed Sonntag, 14. Februar 2016