Bernhard Häussner
Journal: Neueste Artikel erscheinen hier (Seite 14 von 23)

Wellen mit PHP rendern

30.04.2009, 19:52

Da ich heute mal wieder etwas Zeit zum Programmieren hatte (bzw. zum was-ich-will-Programmieren) habe ich unseren aktuellen Physik-Stoff visualisiert und zwar mit PHP und GD.

Ich habe ja schon vorher ein wenig mit SVG herumexperimentiert. Das war allerdings alles etwas krum und schief und ganz ohne Mathematik per Hand zusammengebastelt:


interference

Jetzt musste natürlich ein Algorithmus her. Eigentlich sind es nur 2 Klassen, die festlegen, wie eine Welle aussieht und was passiert, wenn sie von einem Zentrum ausgeht. Und zwar werden zyklische Wellenfronten von verschiedenen Zentren aus übereinandergelegt. Schwer zu erklären, einfacher im PHP-Code zu sehen:

class Wave {
  function __construct($length,$amplitude) {
    $this->length=$length;
    $this->amplitude=$amplitude;
  }
  function getPhaseAtLength($s) {
    $phase=($s%$this->length)/$this->length;
    $phaseWithDelta=fmod($phase+(isset($this->phase)?$this->phase:0)+1,2)-1;
    return $phaseWithDelta;
  }
  function getAmplitudeAtLength($s) { //sinuswelle
    $A=sin(deg2rad($this->getPhaseAtLength($s)*360))*$this->amplitude;
    return $A;
  }
  function setPhase($phase) {
    $this->phase=$phase;
    return $this;
  }
}

class Wavecenter {
  function __construct(Wave $wave,Point $center) {
    $this->wave=$wave;
    $this->center=$center;
  }
  function getAmplitudeAtPoint(Point $point) {
    $distance=$this->center->getDistance($point);
    $amp=$this->wave->getAmplitudeAtLength($distance);
    return $amp;
  }
}

Und mit ein bisschen anderem Code, der das ganze Visualisiert, entsteht dann sowas, wie die roten Wellen oben.

Das erste ist natürlich keine Sinuswelle: Am Anfang hat meine Point::getDistance() nicht funktioniert (^ statt pow()), so dass diese seltsame Figur entstanden ist. Interessant ist, dass man bereits zwei überlagerte Wellen sieht (daher die Symmetrie), diese jedoch seltsam deformiert sind.

Da ich gerade noch eine Phasenverschiebung dazu gezimmert habe, kann ich die Wellen auch noch animieren, also nicht nur in der Position des Mittelpunkts, sondern sie auch wandern lassen. Das sieht dann so aus:

Als kleinen Nachtrag noch ein paar Überlagerung einer Welle und anderen mit kleinerer Wellenlänge, wobei die Wellenlängen in (anfangs) kleinen ganzzahligen Verhältnissen stehen. Daher kann man sie auch recht leicht in der Musik finden. Die oberste Reihe wäre demnach das Schallbild, wenn man 1, 2, und 3 mal den selben Ton spielt, nur eben in der anderen Oktave. Das hört man normalerweise recht einfach, aber beim Sehen ist es etwas anders:

Jetzt wäre es natürlich irgendwie cool, auch einzelne Wellen irgendwie umher wandern zu lassen, um Doppler-Effekt und Reflexion etc. zu zeigen, aber da wären etwas kompliziertere Models nötig.

Nachtrag 26. Mai 2009: OpenGL

Da ich vor kurzem begonnen habe mit Processing Grafiken zu basteln, habe ich Processing auch gleich mal für das Wellen-Darstellen benutzt. Und das funktioniert sehr gut: Processing bietet die Grundlagen, sodass man leicht eine Welle, die von einem Zentrum ausgeht rendern kann. Das macht man dann z.B. mit 10 Frames, immer mit leichter Phasenverschiebung. Das könnte man dann einfach animieren. Wesentlich ansehnlicher ist es aber, wenn man die gerenderte Welle als animierte Textur in eine OpenGL-Szene mit additiver Überblendung einsetzt. Dann entstehen nämlich die oben gezeigten Bilder in realtime. Abgesehen vom anfänglichen Rendern und dem Laden in den Graphikspeicher der 10 2000x2000 Pixel Texturen. Screenshot:

Vor allem wenn man mehr Wellenzentren man hat, übernimmt OpenGL viele Berechnungen, weshalb man die Wellenzentren ohne Wartezeiten einfach mit der Maus verschieben kann.

Kommentare: keine

Greasemonkey Quick Search

21.04.2009, 20:10
Greasemonkey Quick Search

Greasemonkey Quick Search

Man muss ja nicht immer gleich eine Firefox-Erweiterung basteln, wenn man Firefox nur ein bisschen erweitern will. Wesentlich einfacher und schneller geht das (natürlich nur bei bestimmten Dingen) mit Bookmarklets, wie meinem Twitter Bookmarklet. Oder mit Greasemonkey, einer Firefox-Erweierung, die bestimmte Javascripts auf bestimmten Seiten ausführen kann. Ich habe mir ein kleines „Userscript“ gebastelt, dass, wann immer ich Text auf einer Webseite markiere, eine Reihe von Suchoptionen anzeigt.

Das Script registriert einen mouseup-Event-Handler und wenn Text auf der Webseite selektiert ist, öffnet dieser ein kleines Menü mit dem man dann den Text z.B. Googeln kann. Es unterstützt auch noch Google Maps, Wikipedia, und das Leo-Wörterbuch. (Ich hasse es nämlich ganze Texte mit Google zu übersetzen, wenn ich nur ein Wort nicht kenne, weil sich Englisch doch besser liest als Googles Deutsch.)

Um das Script zu benutzen muss man die Greasemonkey-Erweiterung installiert haben. Dann kann man das Script hier installieren:

Wer sich etwas mit HTML auskennt kann auch eigene Funktionen leicht nachrüsten.

Es gibt übrigens ein Verzeichnis vieler Greasemonkey-Scripte auf http://userscripts.org/

Changelog

  • 23.04.2009 - Updated to support twitter search too.
  • 09.07.2009 - Updates: tweet selected quotes and use selected text as URL.

If you're really missing something else and you think others do so too, let me know in the comments.

Kommentare: keine

Howto: Alleinstehende Unds für XHTML umwandeln

16.04.2009, 13:22
$text=preg_replace ('/&(?!amp;|quot;|nbsp;|gt;|lt;|laquo;|raquo;|copy;|reg;|#[0-9]{1,5};|#x[0-9A-F]{1,4};)/','&', $text);

In meinem Markup-Parser für diesen Blog hatte ich das Problem, dass ich zwar einzelne & in &amp; umwandeln konnte, damit ich Et-Zeichen im ganz normalen Text schreiben kann, auf der anderen Seite aber auch HTML <tags> erlauben will. Wenn ich jetzt aber über HTML schrieben will, muss ich ja auch irgendwie die größer und kleiner-Zeichen encodieren, damit nicht alles einfach vom Browser gerendert wird. Wenn ich aber ein &lt; eingebe, würde das Kaufmanns-Und sofort zu &amp; umgewandelt und so würde dann im Quelltext &amp;lt; stehen und im Text nicht < sondern &lt;. Also brauchte ich eine Methode um nur einzelne kaufmännische Unds zu finden. Das lief dann auf obigen Regulären Ausdruck hinaus.

Er ersetzt & mit &amp; nur dann, wenn dahinter keines der HTML-Entities folgt. Da es eine sehr lange Liste von benannten HTML-Entities gibt, habe ich nur die aufgenommen, die man in HTML Umwandeln muss („htmlspecialchars“), damit ihre Bedeutung erhalten bleibt und ein paar Sonderzeichen, die ich sonst nie finde. Alles andere (z.B. &eacute; für é, 文字, ...) wird ja von UTF-8 abgedeckt. Für ASCII kann man auch noch die dezimale oder hexadecimale Unicode-Notierung verwenden.

Der regexp verwendet eine Erweiterung, die Negative Vorausschau (?!x). Das ist so etwas wie ein Unter-Ausdruck, der zwischendurch überprüft wird am Text nach der aktuellen Position. Die Buchstaben, die auf den überprüften Ausdrück passen, werden nicht mit "gefressen", sie werden also nicht übersprungen, sondern nur kurz getestet. Nur wenn der Ausdruck nicht zutrifft wird von der Ursprungsposition weiter getestet. Es gibt natürlich auch noch positive Vorausschau (?=x) (die weiter laufen lässt, wenn der Ausdruck passt), sowie positive (?<=x) und negative (?<!x) Zurückschau (die jeweils den Text vor der aktuellen Position prüfen).

Das würde zum Beispiel alle Minuskeln ausgeben, die nach einem „o“ stehen: [a-z](?<=o.). Man beachte den Punkt nach dem „o“. Er steht für das gerade überlaufene Zeichen für das jetzt geprüft wird was (von der aktuellen Position hinter dem Zeichen aus gesehen) davor steht. Das bedeutet in der Rücksicht sieht sich das Zeichen nochmal selbst. Noch ein Beispiel: .(?<=o(?#comment).{5}) findet alle Zeichen 5 Positionen vor „o“.

Diese Features stehen in Ruby übrigens nur teilweise zur Verfügung.

Kommentare: keine

Vektor-Wallpaper

12.04.2009, 21:01

Heute habe ich mal wieder ein bisschen mit Inkscape herum gespielt, wobei diese Interessanten Fraktal-artigen, (dreh)symmetrischen Figuren entstanden sind. Ich habe dann Details ausgewählt (und mit selektierten Farben versehen) aus diesem gesamten Set:

Da alles als SVG-Datei angelegt wurde ist es auch beliebig skalierbar. Irgendwie ruft der leicht kubistische Style nach einem Kantenfindungs-Algorithmus, der das Ganze mehr oder weniger automatisch mit Fotos macht... muss ich aber wohl vertagen.

order (custom-made) prints

Kommentare: keine

ShortURL Auto-Discovery Twitter Bookmarklet

07.04.2009, 17:44
Tweet-this-Bookmarklet

Tweet-this-Bookmarklet

Recently I've created a boomarklet to post links quickly to twitter using URL-shortening. The main feature was that you don't have to login on 3rd party web sites because it takes you to twitter. But now there's some more improvement: The new bookmarklet looks for a tiny url on the website itself in a <link rel="short_url"-Tag> (thanks to Snaplog).

To install just drag this link in your bookmark toolbar and you're done:

tweet this

Since there are not too many pages that implement the short_url tag, it falls back to is.gd shortening if it couldn't find one. To test it navigate to a page that offers a short_url for example: http://robert.snaplog.com/:E39/brooklyn_not_ark

Edit 2009-10-22: New Version

The new major version Twitter Bookmarklet III is available.

New in Version 0.9.3.5:

Since the short_url could lead to confusion with URL/URI and has the underscore I've updated the bookmarklet again to support rel="shortlink" too, which seems like a better term. There was of course some discussion.

New in Version 0.9.2:

The bookmarklet has been updated again to allow the short_url keyword to be one of a space separated list. This means it works now on arstechnica.com.

New in Version 0.9.1:

I had to update the bookmaklet to support relative URLs as used by http://www.geograph.org.uk/photo/19. In Javascript element.href returns the full, absolute url like http://e.com/absolute etc. while l.attributes[x].nodeValue may return something like /relative.

Kommentare: 2 Einträge
 
Χρόνογραφ
© 2008-2018 by Bernhard Häussner - Impressum - Login
Kurz-Link zu dieser Seite: http://1-co.de/bj