Lissajous-Figur
_{Nach Jules Antoine Lissajous benannte Kurvengraphen, die durch die Überlagerung zweier harmonischer Schwingungen unterschiedlicher Frequenz entstehen.}

In meiner Schulzeit bekam ich die Aufgabe ein Programm zu schreiben, dass annimierte Lissajous Figuren darstellen kann. Ich war damals Schüler der HTL für Elektrotechnik und Leistungselektronik und die erste Frage, die ich mir stellte war, was sind eigentlich Lissajous-Figuren.
Die Antwort ist ganz einfach. Wenn man 2 harmonische Schwingungen, wie zum Beispiel in meinem Programm 2 Sinusschwingungen, in ein Koordinatensystem einträgt, sodass eine Schwingung die X-Koordinate und die Andere die Y-Koordinate bestimmt, so entsteht eine Figur, wie Du unten, rechts sehen kannst. Solche Figuren bzw. Kurvengraphen wurden nach dem Physiker Jules Antoine Lissajous Lissajous-Figuren benannt.

Aber wie kann man den Eindruck erzeugen, dass sich die Figur bewegt. Auch das ist einfach, nämlich dadurch dass man die Phasenverschiebung der beiden Schwingungen schrittweise verändert. Denn so entsteht mit jedem Schritt ein leicht verändertes Bild und schlußendlich der Eindruck, die Figur würde sich bewegen.

Ändert man noch das Frequenzverhältnis der Figur, wie Du es mit den Schiebereglern neben der Figur machen kannst, so ändert sich das Erscheinungsbild der Figur.

Als ich das originale Programm in meiner Schulzeit schrieb wurde die Taktfrequenz der CPU`s noch in einstelligen Mhz gemessen, Speicher hatte wenige Kb, kurzum Computer waren bei weitem nicht so Leistungsfähig wie heute.

Eine der geläufigsten Programmiersprachen war Pascal, in der das Programm von mir geschrieben wurde. Um den Eindruck einer flüssigen Annimation zu erreichen musste ich alle Bilder im Vorhinein berechnen und in Array`s speichern.

Eine Grafikkarte hatte 2 Zeichenfläche, da konnte man auf die eine Zeichnen, während die Andere angezeigt wurde. War ein Bild fertig gezeichnet, habe ich die Beiden Zeichenflächen verstauscht und auf die “Versteckte” das nächste Bild gezeichnet. So konnte ich halbwegs den Eindruck einer flüssigen Annimation erreichen.

Heutzutage ist es viel einfacher eine flüssige Annimation zu erzeugen, denn unsere Computer haben bei weiten mehr Leistung. Die Lissajous-Figur oben ist ein kleiner Spin-Off meiner Diplomarbeit. Ich wollte mich mit dem HTML-Canvas vertraut machen und habe so das kleine Programm, das unten abgedruckt ist geschrieben.

var figure=new Figure('canvas',2,1); 
var a=window.setInterval(figure.animate,50);   

function Figure(cname,_fa,_fb) { 
  var phi=0; 
  var fa=_fa; 
  var fb=_fb; 
  var canvas=document.getElementById(cname);   
  if (canvas && canvas.getContext) { 
    var ctx = canvas.getContext("2d"); 
    ctx.strokeStyle = '#000000'; 
  }   

  function u(t,f) { return -Math.sin(t*Math.PI/(180*f)); }   

  function drawFigure(phi,fa,fb) { 
    var cw= canvas.width/2; 
    var ch= canvas.height/2; 
    var tmax=fa*fb*360;   

    canvas.width=canvas.width; 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.moveTo(cw+(cw-2)*u(0,fa),ch+(ch-2)*u(phi,fb));   
    for (var t=1;t<=tmax;t++) { 
      ctx.lineTo(cw+(cw-2)*u(t,fa),ch+(ch-2)*u(t+phi,fb)); 
    } 
    ctx.stroke(); 
  }   

  this.animate = function() { 
    if (phi>=360) {phi=0;} 
    drawFigure(++phi,fa,fb); 
  }   

  this.setFa=function(_fa) { fa=_fa; }  
  this.setFb=function(_fb) { fb=_fb; } 
}