robsite > canvas, ©

Neue Kommentare

Jon vor 13 Tagenam 25.01.2012 23:47:17 in Cayetano de Arquer Buigas - Ohh!
LOL!
Wie soll man sich die entstehung des Bildes vorstellen?
Die Frau hat auf dem Sofa gelegen.
Währenddessen hat der Maler die abstrakte Kunst produziert.
Dann sieht sich das Modell das Bild an, das aber nur ein "Köder" für das eigentliche Bild war, das er dann noch schnell malt.
Rob vor 26 Tagenam 13.01.2012 16:07:31 in Grayscale Project - Atari Music Band
Hast Recht... Wäre politisch unelegant, wenn die Presse davon Wind kriegt. "Unvorbereiteter polnischer Server in Blitzaktion von tausende Deutschen überrannt!"

Die springende textarea tut dies nicht mehr im neuen Design. Hab ich bald fertig.
iliis vor 27 Tagenam 12.01.2012 09:24:16 in Grayscale Project - Atari Music Band
Für Leute, die etwas Mitleid mit armen, überlasteten Server haben:

--wait=5 // wartet 5 Sekunden zwischen jedem Request (empfolen)
--random-wait // variert die Wartezeit (damits nicht so auffällig ist ;)
--limit-rate=300k // limitiert Bandbreite auf 300KB/s

[P.S.: Die Textarea fliegt immer noch ganz nach unten (unter die Tags) bei schmalen Browserfensterchen.]
Rob vor 66 Tagenam 04.12.2011 18:19:25 in Praxisorientiertes vim-Tutorial
Ist gefixt, danke :)
felix vor 66 Tagenam 04.12.2011 12:46:12 in Praxisorientiertes vim-Tutorial
Das "www" scheint falsch zu sein.
felix vor 66 Tagenam 04.12.2011 12:44:46 in Praxisorientiertes vim-Tutorial

http://selflinux.org/selflinux/html/vim.html

Merkwürdig. Der Link ist eigentlich korrekt, aber wenn ich draufklicke, werde ich nach
http://navigationshilfe1.t-online.de/dnserror?url=http://www.cosolit.deselflinux/
weitergeleitet.
Unwesen vor 103 Tagenam 28.10.2011 16:51:52 in Spherical Flying Machine Developed by Japan Ministry Of Defense
Wtf? Solche Dinger sind mir doch schon bei Halflife 2 immer auf die Nerven gegangen... Oder verwechsel ich da was? XD
Unwesen vor 106 Tagenam 25.10.2011 17:39:42 in Remove unused CSS
Man sollte man doch erkennen können, wenn die zu prüfende Webseite überhaupt keinen CSS Code oder links zu Stylesheets beinhaltet? Naja, es sucht noch immer...
Stefan vor 110 Tagenam 21.10.2011 20:12:16 in Procrastination
Jaaaa, das hab ich als Hauptfach an der Uni :)
hanswurst vor 110 Tagenam 21.10.2011 10:18:25 in Lytro
ich will so eine =(

Alle Tags

3d + 3d model + 8bit + 90s + :D + abandonware + abo + ad + ajax + algorithmus + antisec + app + apple + archiv + artikel + asm + atom + © öl + bass + batcat + bier + bild + bittorrent + blag + blitz basic + blub + boom + brainfuck + brb + browser + buch + bug + bugs + bums + business + c + c+++ cakephp + canvas chiptunes + classical + cocoa + comedy + comic + command line + computer + creepy + css + cthulhu + cthulu + db + demoscene + design + dictionary + doctor who + doku + dokumentation + drawing + drucker + dubstep + emacs + engineering + ente + esoteric programming + fail + fanfic + film + firefly + firefox + fisch + flash + flugzeug + font + foto + fraktal + freigabe + gameboy + gamedev + gaming + gba + geek + geschichte + gfx + google + gore + grafik + grr + gui + hack + hacked + hackety + hacking + haiku + halloween + hardware + haskell + horror + horse porn + howto + html + html5 + hunde + icons + ie + improv + infografik + informatik + inkscape + internet + interview + ios + iphone + java + javascript + jquery + kaffee + ki + klassik + kritzl + kuh + kunst + laut + linux + liste + live + lock picking + lowlevel + lulz + mac + mampf + map + maps + math + meme + merb + microsoft + midi + minecraft + misc + monokel + moskau + music + musik + netzwerk + news + norwegen + nsfw + omnomgromnomnom + open source + opengl + opera + organisieren + os dev + ow + party + perfect spheres + perl + personal + photoshop + php + physik + pi + piraten + pixel + pixelart + politik + porn + portal + printer + privacy + processing + productivity + profit + programming + purebasic + puzzle + python + quiz + quote + rails + rant + rap + raytracing + recht + reddit + reference + regex + relax + ressource + rest + review + rpg + ruby + safari + sc + science + scifi + sdl + sharing + shitballs + shredder + shShshShshShsh + sicherheit + so ronery + socken + sopa + sound + space + spam + speed + spieeeeee + spiel + spielzeug + sport + star trek + starcraft + startrek + statistik + story + svg + synergy + t-shirts + tag not related + takataka + tennis + test + tetris + text + textur + thunderbird + tod + tool + tools + tot + tracker + tutorial + tv + twitter + typographie + uni + unicode + unix + vi + video + viehzeug + vim + viren + wallpaper + webdesign + webdev + webgl + webzwonull + weihnachten + wein + weisheiten + wetter + whoa + wikipedia + windows + wisdom + wissenschaft + woohoo + wort + wortspiele + wtf + wub wub wub + www + xD + yay + youtube + zeichnen + zukunft + zzz +

kritzl updatekritzl.robsite.net

Ü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
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.

Tags: drawing, canvas, kritzl, ©, tool

3

vor 761 Tagen08.01.2010 21:28:18
kritzlkritzl.robsite.de
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 :)
Tags: ©, canvas, tool, drawing, kritzl

7

vor 829 Tagen01.11.2009 01:22:58
Smooth path in canvas
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.
Tags: canvas, grafik, javascript, jquery, ©

discuss!

vor 882 Tagen09.09.2009 21:01:33

robsite zeug von interesse

Neue Kommentare

Verwandte Tags

Alle Tags

3 Posts getaggt mit ©x, canvas x

robsite zeug von interesse

Neue Kommentare

Verwandte Tags

Alle Tags

3 Posts getaggt mit ©x, canvasx

3 Posts getaggt mit ©x, canvas x