robsite

Smooth path in canvas

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

/images/posts/0000/2068/smooth_path_explanation_big.png

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.

· meins, canvas, grafik, javascript, jquery ·

List of unusual deaths

1814: London Beer Flood, 9 people were killed when 323,000 imperial gallons (1 468 000 L) of beer in the Meux and Company Brewery burst out of their vats and gushed into the streets.

1919: In the Boston Molasses Disaster, 21 people were killed and 150 were injured when a tank containing as much as 2,300,000 US gal (8 700 000 L) of molasses exploded, sending a wave traveling at approximately 35 mph (56 km/h) through part of Boston, Massachusetts.

2008: Gerald Mellin, a U.K. businessman, committed suicide by tying one end of a rope around his neck and the other to a tree. He then hopped into his Aston Martin DB7 and drove down a main road in Swansea until the rope decapitated him. He supposedly did this as an act of revenge against his ex-wife for leaving him.

2009: Martin Cassidy, a 44-year-old stand-up comedian from Blackburn, England, died from asphyxia caused by breathing in large quantities of laughing gas while watching pornography on his laptop computer, according to a coroner. The coroner ruled a case of "Death by misadventure".

· :D, tod ·

iPhone Screencasts

Einen schönen Screencast eines iPhone-Programms zu machen ist umständlicher als ich dachte. Während Steve Jobs seinen Untergebenen einfach befiehlt, einen Display-Anschluss ins Demogerät zu löten, müssen sich schnöde User mit suboptimalen Hacks begnügen. Die Optionen sind, in aufsteigender Videoqualität:

/images/posts/0000/2062/iphone-screencast-zeichnung_big.png

  1. Das ganze Gerät mit einer Kamera abfilmen.

    • Vorteil: Nur so können Accelerometer-abhängige Aktionen gefilmt werden. Drehen, kippen etc.
    • Nachteile: Benötigt eine ruhige Hand, eine gute Kamera und gute Lichtverhältnisse. Für beidhändig zu bedienende Apps braucht man entweder ein Stativ oder eine zweite Person. Wurstfinger verdecken oft den Bildschirm. Schlechte Bildqualität (mit den üblichen Kompakt -und Webcams).
  2. Veency über WLAN + Screencast-Software.
    Ein VNC-Server für gejailbreakte (jailbreaked, befreite, geknackte, ...?) iPhones. Empfängt also Maus- und Tastatursignale und liefert ein Bild zurück. Man könnte damit z.B. das iPhone komfortabel in der Schublade lagern und per VNC-Client SMS verschicken. Oder Websiten vom Desktop aus in Mobile-Safari testen. Sicher nützlich, wenn die Schublade sehr weit vom Schreibtisch entfernt ist. Oder man sich jeden Finger brach und nicht mehr tippen, nur noch ganzhändig klicken kann.

    • Vorteil: Liefert nicht nur ein Bild zurück, sondern lässt einen das iPhone fernsteuern. Funktioniert mit jedem VNC-Client unter jedem OS (außer Apples eigenem Screen Sharing)
    • Nachteile: Ruckelt erbärmlich. Ca. 2 fps. Mag an meinem Netzwerk liegen, wer weiß... Benötigt ein geknacktes iPhone.
  3. ScreenSplitr + Screencast-Programm.
    Sendet den Bildschirminhalt per Bonjour an den Rechner. Dazu einfach das Programm starten und in Safari unter Alle Lesezeichen einblenden > Bonjour das iPhone auswählen. Das Bild dann mit einem Screencast-Programm filmen.

    • Vorteile: Recht einfach, gute Standbild-Qualität. Kann gut die eingebaute Screenshot-Funktion des iPhones ersetzen.
    • Nachteile: Etwas flüssiger als Veency über WLAN, trotzdem entschieden zu langsam. Läuft auch nur auf geknackten iPhones.
  4. Veency über USB + Screencast-Software.
    Wie WLAN, nur schneller.

    • Vorteil: Schneller.
    • Nachteile: Nicht schnell genug. Zur Not jedoch akzeptabel. Windows-only und nur nach schmerzhaften Verrenkungen und Blutopfern zum laufen zu bekommen. Siehe unten.
  5. XCode iPhone Simulator + Screencast-Software.
    App-Entwickler erstellen so meist ihre schicken Werbe-Screencasts (Classics, Things, Tweetie).

    • Vorteile: Beste Qualität, flüssig und in zigtausenden von Millionen von Farben. Am einfachsten, da neben dem Screencast-App nichts weiter nötig ist. Damit ists auch leichter möglich sein Video aufzumotzen, ohne alles mühselig im Videoeditor nachzubearbeiten (SimFinger).
    • Nachteile: Funktioniert nur mit selbstcompilierten Programmen; AppStore-Apps können nicht im Simulator installiert werden. Läuft nur auf Macs.

Mein bescheidener Plan bestand darin, ein Programm aus dem AppStore zu filmen. Der iPhone Simulator fällt also raus und übrig bleibt das nächstbeste, VNC über USB. Die folgende Anleitung ist nur ein Weg von vielen, hat bei mir jedoch als einziger funktioniert. Und wird beim nächsten iPhone- oder iTunes-Update, bei unmerkbar veränderten Netzwerkeinstellungen oder Halbmond sicherlich komplett zusammenbrechen. Aber es schadet kaum, es trotzdem zu dokumentieren. Wenigstens, damit ich mich später noch dran erinnere.

Wir brauchen:

  • iPhone oder iPod touch, geknackt
  • Veency
  • Windows. Nativ oder virtualisiert, egal. Bei mir läuft es gut1 in Parallels auf dem Mac.
  • iTunes für Windows
  • iTunnel für Windows. Ein dubioses Programm, aber das einzige, das funktioniert (soweit ich weiß)
  • Ein VNC-Client, z.B. RealVNC Free Edition
  • Eine Screencast-Software. Für Mac gibts iShowU für 30$ , ScreenFlow für 99$ oder Snapz X Pro für 69$. Ich bin mit iShowU zufrieden. Für Windows gibts Camtasia Studio für 299$ und sicher andere.

Dann:

  1. Falls noch nicht getan, iPhone jailbreaken. Dazu gibts genug Anleitungen. Kurz: redsn0w laden, die passende .ipsw-Datei finden oder laden, den Anweisungen folgen.

  2. Veency installieren. Gibts in Cydia oder Icy.

  3. iTunnel funktioniert nicht auf Anhieb, also: iTunnels iTunesMobileDevice.dll wegschmeißen und dafür Apples nehmen. Die liegt in C:Program FilesCommon FilesAppleMobile Device Supportbin bzw. C:ProgrammeGemeinsame DateienAppleMobile Device Supportbin

  4. iPhone oder iPod touch anschließen.

  5. iTunnel auf der Commandline starten und den VNC-Port 5900 auf den USB-Anschluß umleiten:
    > iTunnel.exe 5900 5900
    /images/posts/0000/2050/iTunnel_big.png

  6. VNC-Client starten und 127.0.0.1:5900 öffnen. Gibts Fehler, evt. andere Server stoppen (XAMPP, MAMP, ...)

  7. Tadaa! iPhone VNC in brauchbarer Geschwindigkeit. Das ganze dann per Screencast-App filmen.

Ok, doch gar nicht so kompliziert...

Wer jetzt noch einen Weg findet, das ganze direkt unter Mac OS X zu machen, kriegt einen leckeren Keks per Post.

/images/posts/0000/2056/iphone-vnc_big.png

1. für alberne Werte von "gut"

· iphone, video, windows ·

Ich öffne das Fenster und mir entgegen kommt heißere Luft als im Raum ist. Meine Cola ist lauwarm. In der Ferne verbrennen Tauben im Flug. Ich leg mich jetzt in meine mit Eis gefüllte Badewanne und erwarte das Ende aller Tage.

/images/posts/0000/2044/hitzetod_big.jpg

· grr ·

Rubular

Schicker Regex-Tester zum live ausprobieren von Rubys regulären Ausdrücken. Auch nicht übel ist RegExr, benötigt allerdings Flash und benutzt Action Scripts Regex-Engine.

· flash, regex, ruby ·
Mastodon