Neue JS-Library zum zeichnen und animieren von Vektor-Grafiken. Basiert auf SVG und VML für den Internet Explorer und funktioniert somit in allen modernen Browsern. Das morphen zwischen zwei Formen find ich besonders klasse.

Ich spiel grad mit <canvas> rum und wollte eine Kurve möglichst fließend durch Punkte führen:

Viele Algorithmen laufen entweder nicht durch jeden Punkt oder setzen voraus, dass man die Pixel selbst malen will, was gerade bei Anti-Aliasing recht mühselig wird. Ich fand dann einen netten Algorithmus von Jean-Yves Quéinec, der Bézier-Splines so hinbiegt, dass eine durchgehende schöne Kurve entsteht. Manchmal gibts noch leicht merkwürdige Kurventeile aber insgesamt funktioniert es gut.

Der Code: smooth_path.js

Die Funktion bekommt ein Array von Punkten und erstellt einen Pfad, den man dann selbst malen kann.

• path - Ein Punkte-Array der Form [{x:0, y:0}, {x:10, y:10}, ...]

• smoothness - Der Grad der Biegung. 0 glättet nichts, 1.05 macht aus einem Quadrat einen Kreis und auch sonst schöne Kurven, alles andere erzeugt lustige Formen.

• joinPath - Falls true werden die Kurven am Anfang und Ende des Pfades aufeinander ausgerichtet, sodass eine durchgehende Form entsteht, wenn Anfangs- und Endpunkt aufeinander liegen.

• c - der canvas-Kontext

Wer Fehler findet oder Verbesserungen hat, immer her damit :)

Beispiel:

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
var path = [{x: 100, y: 100}, {x: 20, y: 150}, {x: 200, y: 200}, {x: 100, y: 100}];
var smoothness = 1.05;
var joinPath = true;
c.beginPath();
smoothPath(path, smoothness, joinPath, c);
c.stroke();
c.closePath();

Und eine kleine Demo. Per Maus die Punkte setzen, mit dem Slider die smoothness verändern.

Mit Flot und dem jQuery Visualize Plugin kann man schicke Graphen direkt in Browsern malen und manipulieren, die <canvas> und JavaScript kennen. Mit excanvas auch im Internet Explorer.

Flot bekommt seine Daten direkt per JS und bietet interaktive Zoom- und Mousetracking-Features. jQuery Visualize holt sich die Daten direkt aus HTML-Tabellen.

Schicker 2D- und 3D-Funktionsplotter, der auf <canvas> und JavaScript basiert. In WebKit-Browsern auch mit Antialiasing.

Da sämtliche Java-Applets entweder Funktionsplotter oder Datei-Uploader sind, siehts langsam eng aus für Java im Browser :>

Nice. Nur muss man jetzt natürlich die Validierungsregeln an zwei Stellen schreiben, für server- und browser-seitige Validierung. Das Rails-Plugin livevalidation löst das Problem.

Bälle fallen und prallen an gezeichneten Linien ab und erzeugen dabei Töne. Je nach Winkel mit anderer Tonhöhe. Komplett in JavaScript geschrieben.

Das ganze gehört zu Googles Chrome Experiments, in denen Chromes JavaScript/canvas-Performance demonstriert wird.

Derweil bringt Microsoft den IE8 raus, immernoch ohne <canvas>-Support und performancemäßig weit hinter allen anderen Browsern. Wohé.

Anscheinend kann man mit JavaScript Flashs computeSpectrum-Funktion aufrufen um an das Audiospektrum zu kommen. Das verbunden mit Canvas ermöglicht schicke Visualisierungen.

Der Blogpost dazu: Music visualization with Canvas and SoundManager2

Benötigt einen canvas-fähigen Browser (alles außer Internet Explorer) und funktioniert durch einen Bug in Flash nur, wenn in keinem anderen Tab ein Youtube-Video läuft (gilt wahrscheinlich auch für andere Flashseiten).

Portierung der Flash-Version von Box2D auf JavaScript. Lastet einen meiner CPU-Kerne zwar 90% aus, läuft aber flüssig.

John Resig of the Mozilla Corporation, and the creator of the popular jQuery library, talks about the challenges of DOM/JavaScript programming and his preferred strategies for meeting those challenges.