robsite

In meins

Robsite Nr. 5

Nach fast vier Jahren wird es mal wieder Zeit fĂŒr ein neues Design. In HTML5 und mit Version fĂŒr mobile Browser. Schön minimal, wie die Anzahl der Updates pro Woche :D

Die Seite lĂ€d nun im Durchschnitt doppelt so schnell. Halb soviele Requests, halb soviele ĂŒbertragene Daten, jQuery per Google CDN und ein neuer besserer Server in Deutschland statt den USA, der mangels Ozean dazwischen allein 100ms bringt (und 13€ weniger kostet. Yay HostEurope).

Das Backend ist keine Eigenentwicklung in Rails mehr, sondern WordPress. OMGBLASPHEMIE! Jedoch. WordPress bietet alles, was ich haben will und ich hab keine Lust nochmal ein Blog-CMS zu schreiben. Been there, done that. Bleibt die Frage der Performance und Sicherheit.

Mit meinen zum Design passenden Besucherzahlen wird WordPress wohl zurechtkommen. Aber wie sicher WordPress auf Dauer ist, bleibt abzuwarten...

Und wer sich langweilt, kann die neue 404-Seite spielen.

Edit: Unbedeutende Änderungen zum Schutz anderer vServer :>

· meins, robsite · ★

Gepixel 2

Cowbot
Rob-ot 3
· meins, pixelart · ★

Gepixel

Rob-ot
Cubes
Escher Dreieck
Torte
Haus 1
Wassertransport 4
· meins, pixelart · ★

/images/posts/0000/2494/einmannarmee_big.jpg

Ostprodukte
/images/posts/0000/2500/ostprodukte_big.jpg

/images/posts/0000/2506/bidibidibidi_big.jpg

Fineliner auf Heftrand, anno 2003, Doppelstunde Politische Weltkunde

· meins, drawing · ★

kritzl update

kritzl-update

Über Weihnachten hab ich nicht nur Berge an Enten gegessen sondern auch ein wenig an kritzl, meinem kleinen Browser-Maltool/Forum, gebastelt. Neues:

User-Accounts
Wer seinen Namen unterm Bild sehen will, muss ihn nicht mehr lÀnger ins Bild pinseln oder die Seite hacken. Man kann weiterhin anonym posten (was sich wohl auch nie Àndern wird), aber mit einem Account wirds praktischer. Man sieht, welche Bilder man gemalt hat und... das wars eigentlich fast schon.

Benutzerkonten sind hauptsÀchlich gut, um auf ihnen spÀter Funktionen zu basieren. Bewertung von Bildern, private Nachrichten, Moderatoren und so. Mal sehn. Eine weitere User-Funktion gibts aber schon:

NSFW-Filter
/images/posts/0000/2236/eded9f205f3aba29fe24ef12e65e6536_thumb.png Da anscheinend einige Kinder lustige Bilder malen und Pimmelzeug unschön finden, kann man jetzt unzĂŒchtiges Bildgut melden, vom Admin (also mir) ĂŒberprĂŒfen lassen und auf Wunsch nur jugendfreie Bilder anzeigen lassen.

Das ist kein Jugendschutz und eh standardmĂ€ĂŸig abgeschaltet, aber wer ungern StrichmĂ€nnchensex sieht, braucht es nun nicht mehr (falls ich es rechtzeitig markiere :>). Da ich keine Bilder löschen werde, die nicht grad NPD/Kinderporno/BPjM-Propaganda sind, ist so eine freiwillige Selbstzensur eine ganz gute Lösung.

Radiergummi
In der Tat. Ab heute kann man Linien nicht nur malen, sondern auch löschen!
Zwar intern nichts weiter als ein weißer Stift, aber doch etwas netter, da man nicht mehr pixelgenau Weiß auswĂ€hlen muss. Auch spĂ€ter praktisch, falls mal Bilder mit transparentem Hintergrund kommen.

RSS-Feeds
FĂŒr alle Bilder oder nur die eines Users.

Und
kleinere Bugfixes. Das FĂŒll-Tool fĂŒllt nun auch an vertikalen RĂ€ndern ohne das ganze Bild vollzurotzen.

Viel Spaß damit :)

Und thx an lödwĂ€g fĂŒr einen Bugfix.

· meins, canvas, drawing, kritzl, tool · ★

kritzl

In den letzten zwei Monaten hab ich mit dem HTML5 canvas-Element rumgespielt. Rausgekommen ist ein kleines Malprogramm mit einem Forum drumherum.

Man kann Bilder im Browser malen, sie auf der Seite speichern und auf andere Bilder antworten.

Es sollte gut in Firefox 3.5+, Safari 4+ und Opera 9.6+ laufen (in Opera nur etwas unschön, mangels runder Ecken und box-shadow). Internet Explorer User mĂŒssen erstmal draußen bleiben, sorry.

/images/posts/0000/2110/kritzl_big.png

Die Funktionen:

  • Freihand-Linien, geglĂ€ttet oder nicht
  • Rechtecke mit runden Ecken
  • Ellipsen und Kreise
  • Linien
  • Flood Fill mit Toleranz
  • Eye-Dropper FarbwĂ€hler
  • Colorpicker mit Alpha-Transparenz
  • Undo/Redo mit Tastaturshortcuts

Mein Plan war am Anfang, nur das Malwidget zu veröffentlichen, sodass sich jeder seine eigene GUI basteln kann. Ein Mini-Bildeditor als Wordpress-Plugin oder grafische CAPTCHAs wÀren interessant. Das gab ich aber bald auf, weswegen der Code nun eher schlecht wiederverwendbar ist. Ne Doku fehlt auch, wer also Fragen hat, einfach einen Comment posten.

Ich nehm clientseitig jQuery, jQuery UI, ein modifiziertes jQuery.hotkeys und BrowserDetect. Auf dem Server lÀuft CakePHP mit ImageMagick zum erstellen der Thumbnails.

Das ist nur die erste buggy-pre-alpha-Version und meine Todo-Liste ist noch lang. Gut wĂ€ren z.B. bessere Pinsel, Zoom, Maltools ohne Anti-Aliasing (fĂŒr Pixelart), Auswahlwerkzeuge, beliebige BildgrĂ¶ĂŸe, Filter, Layer, weniger Bugs, optionale Useraccounts, Bild-Bewertungen oder ein schnellerer Flood-Fill Algorithmus.

Über Bugmeldungen, VerbesserungsvorschlĂ€ge und vor allem lustige Bilder wĂŒrde ich mich freuen :)

· meins, canvas, drawing, kritzl, tool · ★

Xewton Music Studio

/images/posts/0000/2080/xewton-music-studio_big.jpg Ich bin grad schwer begeistert von Xewton Music Studio. FĂŒr elektronische Musik und zum Beat-basteln gibts einige gute Tools im AppStore, aber zum komponieren mit klassischen Instrumenten fand ich bisher nichts.
Bis jetzt. FĂŒr den Preis von 6 Dönern bekommt man > 20 gesamplete Instrumente, einen mĂ€chtigen mehrspurigen Sequencer, Effekte und eine brauchbare Klaviertastatur.

Das Interface verpackt die vielen Funktionen so elegant wie es geht auf dem kleinen Bildschirm und ist mit etwas Übung gut zu bedienen. Die Instrumente klingen ausreichend gut, wobei die Gitarren am ĂŒberzeugendsten sind. Das Klavier könnte allerdings bessere Samples vertragen.

Um den Klang der Spuren zu beeinflussen gibts einen 3-Band Equalizer, einen Amplifier der schick verzerrt, Delay, Volume und einen Reverb, der allerdings mehr nach Delay/Echo klingt. Der Sequencer lĂ€sst einen leicht Noten umherschieben, kopieren und quantisieren, wobei er bei langen StĂŒcken etwas schleppend scrollt.

Generell bringt das Music Studio zumindest meinen 2nd Gen. iPod an seine Grenzen. Bei lĂ€ngeren StĂŒcken reagiert das Interface nicht mehr ganz flĂŒssig, wirds komplexer werden mangels Arbeitsspeicher keine Instrumente mehr geladen. Ein Reboot hilft. Hier wĂŒrde sich ein iPhone 3GS lohnen.

Mal davon abgesehen machts einen Mordsspaß und ist fĂŒr eine 1.0er Version sehr stabil. Grad kam Version 1.0.1 mit Bugfixes und MIDI-Export raus, hab ich aber noch nicht getestet.

Screenshots:

Als Demo eine einfache kleine Melodie die grundlos zum Western wird. Music Studio lahmte schon betrĂ€chtlich gen Ende, lĂ€nger hĂ€tte es nicht sein dĂŒrfen.

spaghetti.xms - 36 KB

· meins, iphone, musik, review · ★

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 · ★
Mastodon