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.

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 :)

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

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.

Baum-Bukkake auf dem Weg zur Uni. Bwah.

Kleine Funktion zum schönen ausgeben von Arrays.

# [1, 2, 3] => "1, 2 and 3"
# [1, 2]    => "1 and 2"
# [1]       => "1"
def humanize_array a
  [a[0..-3], [a[-2], a[-1]].compact.join(" and ")].flatten.join(", ")
end

Hier ist mein HTML-Hex-Viewer als Rails-Helper. Er markiert die Bytes, wenn man mit der Maus drüberfährt und färbt optional verschiedene Codesegmente bunt ein (z.B. Header, Text und Data-Segmente einer EXE).

weiterlesen →

Das hier war einer der vielen Entwürfe für die neue Robsite. Pixel-perfekt, schön blau, somit bemerkenswert grandios.
Dachte ich.
Bis mich der Hr. Gramberg darauf aufmerksam machte, dass die Seite doch sehr gedrückt und eng aussieht.
Er hatte leider recht. Somit nahm ich das schlichte Layout des Adminbereichs auch für die Front und warf den alten Entwurf weg.

Damit die 2 Wochen Arbeit nicht komplett für die Katz sind, veröffentliche ich die alte Seite nun als kleines Weihnachtsgeschenk.

Im Paket sind vier Versionen als Photoshop-Datei sowie die HTML-Umsetzung der letzten Version. Diese validiert, sieht gut aus in Firefox, Safari und Opera und zerbricht spektakulär im Internet Explorer, was aber gewollt ist

Das ganze ist zwar unfertig, es gibt kein Druck-Stylesheet, der Footer fehlt etc. aber vielleicht kann jemand was damit anfangen oder fühlt sich inspiriert.

Lizenz: (Creative Commons Namensnennung-Weitergabe unter gleichen Bedingungen 3.0).
Heißt, mach damit was du willst, solange du mir Credits gibst und das veränderte unter eine ähnlich freie Lizenz stellst. Das "robsite" im Logo muss natürlich geändert werden.

Download: Robsite-Entwurf - 1.1 MB

HTML-Version

Wie vor 44 Monatan angekündigt ist die neue Robsite nun fertig.
Es ist ein Neuanfang. Ich hab wenig alten Content übernommen, hauptsächlich, weil er mich nicht mehr interessierte oder die Links gestorben sind.

Nach Monaten des Kopfzerbrechens über das Konzept der neuen Seite, war mir klar, dass die Robsite eigentlich immer nur ein ordinäres Blog war. Mit Linkarchiv. In Blau. Somit ist die neue Robsite nichts weiter als das. Das dreimilliardste Blog. Mein Blog. Ernüchternd, aber auch befreiend. Hätte deshalb eigentlich Roblog heissen müssen, aber auf die [Idee](http://www.google.com/search?q=roblog&hl=en) sind auch schon einige tausend Geeks gekommen.

Seit den Tagen der alten Robsite haben sich meine Interessen leicht verschoben. Ich bin von Windows auf Mac gewechselt, interessier mich mehr für Ruby und Webentwicklung statt *Basic und Spieleentwicklung und fang langsam an Musik am Rechner zu machen. Dies alles, neben diversem lustigem Zeug, wird also die Seite füllen. Oder auch nicht. Je nachdem.

Ruby on Rails ist derweil die Technik meiner Wahl um Webzeug zu basteln. In den Semesterferien hab ich mich mit wenig anderem beschäftigt und die Robsite mit Rails neugebaut. Was ich dabei gelernt hab, werd ich nach und nach hier veröffentlichen. Die neue Seite mag zwar schlicht aussehen, aber der Adminbereich hats in sich. Simpel aber mächtig. Wie George W. Bush.

Warum nun Rails statt PHP? Vor allem Spaß. Spaß bei der Arbeit = höhere Produktivität, Qualität und Motivation. Entweder du schaffst in gleicher Zeit mehr und bessere Ergebnisse, oder du schaffst gleiche Ergebnisse in weniger Zeit. Es ist einfach keine lästige Arbeit, wenn es Spaß macht. Und das motiviert :>

Bis sich mein Domainhoster auskäst und robsite.de auf meinen neuen Hoster überträgt, erfolgt die Weiterleitung auf robsite.net mit einer .htaccess. Das heisst, robsite.de wird demnächst kurz offline gehen. robsite.net sollte aber weiterlaufen, solange mein kleiner vServer bei Slicehost nicht aufgibt.
Andererseits hab ich eh nur noch 3 Besucher pro Tag, also betriffts sowieso keinen (img 358 t:big)

Mit Brainfuck-Code für Fibonacci-Zahlen. Oh Jubel.

    # brainfuck Interpreter

class Array
    def rtrim empty = 0
        (self.length-1).downto(0) do |a|
            return self[0..a] if self[a] != empty
        end     
        []   
    end
end

class Brainfuck

    attr_accessor :code, :ascii, :debug

    def initialize(code = "", memsize = 30000)
        @code   = code.gsub(/[^.,+-<>[]]/, "")
        @mem    = Array.new(memsize, 0)
        @ascii = true   # In/Output als ASCII oder mit puren Zellwerten arbeiten?
        @debug = false
    end

    def run
        p = 0
        cp = 0
        brackets = []
        while cp < @code.length
            c = @code[cp].chr

            case c 
            when "+"
                @mem[p] += 1
            when "-"
                @mem[p] -= 1
            when ">"
                p += 1
            when "<"
                p -= 1
            when "["
                brackets.push(cp)
            when "]"
                if @mem[p] != 0
                    cp = brackets.pop - 1
                else
                    brackets.pop
                end
            when "."
                if @debug
                    print "p: #{p} cp: #{cp} "
                    p @mem.rtrim
                end
                if @ascii
                    print @mem[p].chr
                else
                   puts @mem[p] 
                end
            when ","
                input = gets
                if @ascii
                    @mem[p] = input[0]
                else
                    @mem[p] = input.to_i
                end
            end    

            cp += 1       
        
        end        
    end
end

# Die ersten 10 Fibonacci-Zahlen: +>++>>>++++++++++[<<<<.>[->+>+<<]>>[-<<+>>]<<<[->+>>+<<<]>>>[-<<<+>>>]<<<[-]>>[<<+>>-]>>-]
# Die ersten n Fibonacci-Zahlen: +>++>>>,[<<<<.>[->+>+<<]>>[-<<+>>]<<<[->+>>+<<<]>>>[-<<<+>>>]<<<[-]>>[<<+>>-]>>-]

code = <<END
+>++>>>,[<<<<.>[->+>+<<]>>[-<<+>>]<<<[->+>>+<<<]>>>[-<<<+>>>]<<<[-]>>[<<+>>-]>>-]
END

bf = Brainfuck.new(code)
bf.ascii = false
bf.debug = false
bf.run