3D Helix Random Art

Wieder eine Spirale, besser gesagt eine Helix. Ich habe probiert die Spirale aus dem vorhergegangenen Beitrag in den 3 dimensionalen Raum zu übertragen und mit Hilfe der Papervision 3D Engine war das innerhalb kurzer Zeit geschafft.
Um den Zeichenvorgang zu starten müsst Ihr einfach auf den „Start“ Button, oder in die Anwendung klicken. Die Linien werden mit der Papervision eigenen Line3D gezeichnet.
Um die Helix zu drehen bewegt einfach die Maus über der Anwendung.
Ab einer gewissen Anzahl an Linien leidet jedoch die Performance. Ihr könnt den Zeichenvorgang aber jederzeit abbrechen indem Ihr auf den „Close“ Button oben rechts klickt.

Helix Random Art

Hinter dem Begriff „Helix Random Art“ verbirgt sich eigentlich nur eine kleiner Algorithmus der dynamisch und mit verschiedenen Parametern unterschiedliche Spiralen zeichnet. So sind bei jeder Zeichnung Merkmale wie Strichstärke, Farbe, Abstand, Kreisradius usw. verschieden und ergeben so jedes Mal eine einzigartige „Zeichnung“.
Zum starten einfach in die Anwendung, bzw. auf den „Start“ Button klicken.
Um eine neue Zeichnung zu beginnen einfach wieder in die Anwendung klicken und eine neue, andere Spirale wird gezeichnet.



Und hier noch eine Variante in der ein Foto verzerrt wird. Diesmal entsteht der Effekt nicht schrittweise, sondern wird direkt komplett auf das ganze Foto angewandt.


Aviary - „Der Browser als Photoshop-Ersatz“

Nachdem jetzt sogar schon Spiegel Online über Aviary berichtet hat will ich mich auch mal anschliessen. Also, schaut Euch Aviary unbedingt mal an! :)
In Sachen Bildbearbeitung und kreativen Tools für Bildeffekte bietet Aviary unzählige Möglichkeiten. So ist es z.B. mit dem Peacock Tool von Mario Klingemann möglich mit Modulen auf sehr einfache art und weise Bearbeitungsabläufe zu generieren und somit interessante Bildeffekte zu erstellen. Neben Peacock gibt es noch andere Tools wie Falcon, Talon, Phoenix, Raven und Toucan. Phoenix ist in dem Paket das eigentliche Bildbearbeitungsprogramm und der online Ableger von Adobe's Photoshop. Und dafür das eine Standart Mitgliedschaft kostenlos ist, kann man mit Phoenix, Peacock und den anderen Tools tolle Ergebnisse direkt im Browser erziehlen.
Allerdings ist vieles sehr experimentell und man braucht viel Zeit um sich in bestimmte Tools einzuarbeiten. Besonders bei Peacock schiebt man zu Begin Module wild zusammen und staunt über die fabrizierten und manchmal gelungenen Resultate. Die erzeugten Pixelbilder lassen sich im JPG, Gif, Tiff und PNG Format auf dem Rechner speichern.

Text Effekt mit "getCharBoundaries"

Ein simpler Texteffekt. Die Besonderheit hierbei ist, dass es sich um echten Text, also ein normales TextField in Flash handelt. Nachdem der Effekt abgelaufen ist kann man den Text selektieren und z.B. per Copy&Paste aus dem TextField holen, wie man das von „normalen“ Texten auch kennt.
Mit der „getCharBoundaries“ Methode ist es seid Actionscript 3 endlich möglich pixelgenaue Positionsangaben von jedem einzelnen Buchstaben in einem Textfeld zu ermitteln.
Ohne diese neue Methode hätte sich der Effekt in dieser Form nicht realisieren lassen.
Als Tween Engine hab ich mich auch hier wieder für TweenLite entschieden.


Um die Animation zu starten klickt einfach auf den START Button unten rechts im Fenster. Unten links könnt Ihr Eure eigenen Texte eingeben.

Fireworks, Japantag in Düsseldorf am Rheintum

Inspiriert durch das Feuerwerk am Japantag in Düsseldorf hab ich mich mal an einem kleinen Feuerwerk Effekt mit Actionscript 3 versucht.
Nachdem Ihr auf den Startknopf geklickt habt könnt Ihr einfach so oft Ihr lustig seid ins Bild klicken um neue Raketen zu starten.
Zum betrachten braucht Ihr den Flashplayer 9.

Um die Anwedung zu starten klickt am besten hier.

Computational Art, Düsseldorf Rheinturm

Wieder ein kleines Experiment in Richtung Computational Art. Diesmal zeichnet ein recht simpler Algorithmus mit ein paar bestimmten Bedingungen den Düsseldorfer Rheinturm in ein BitmapData.
Die Zielvorgabe war es mit ein paar groben Pinselstrichen ein Gemälde zu erzeugen. Lasst dem Zeichenprozess nach Start der Anwendung bitte ein wenig Zeit zum „malen“!
Durch einen einfachen Klick ins Gemälde wird der Zeichenprozess neu gestartet.
Zum betrachten braucht es den Flashplayer 9.

Die Klima-Stadt

Fabian Aumüller hat für Scholz & Friends Interactive die Infoseite „Die Klima-Stadt“ gescriptet.
Das Highlight an der ganzen Geschichte ist die begehbare Stadt. Sehr imposant und vor allem erstaunlich Performance freundlich. Als 3D Engine kommt hier Alternativa 3D zum Einsatz und ermöglicht tolle Kamerafahrten sowie Positionsabhängige Sounds uvm.. Es gibt sogar Auto- und Zugverkehr :)
Schaut mal rein.

Computational Art, CurveTo Color

Eine kleine Bastelei mit CurveTo und Bezierkurven. Die Farben werden per Zufall erzeugt und die Graphics in ein BitmapData gezeichnet. Mit dem „scroll“ Befehl wird das BitmapData konstant nach oben bewegt. Das ganze mit mageren 7.5 KB.

Computational Art Screensaver

Das Computational Art Motiv hat sich einfach angeboten einen Bildschirmschoner zu erstellen. An Freeware Tools zum erstellen von Bildschirmschonern mangelt es nicht und so hat die Suche nicht besonders lang gedauert.
Um mein Ziel zu erreichen musste ich jetzt nur wenige Modifikationen an der „Computational Art“ SWF vornehmen.
Die wichtigste Änderung war es die Anwendung für alle möglichen Bildschirmauflösungen fit zu machen und danach stand dem Vorhaben nichts mehr im Weg.


Als Tool zum erstellen für den Screensaver bin ich zum wiederholten Mal nicht an InstantStorm vorbei gekommen. InstantStorm ist ein kostenloses Werkzeug, mit dem sich Screensaver für den PC erstellen lassen. Und das mit allem was dazu gehört, Installationsroutine, Vorschaubild bzw. Vorschau SWF, Passwortschutz und vielem mehr. Dazu gibt’s auch noch einen Guide, der einem bei Bedarf beim erstellen Schritt für Schritt zur Seite steht.

Computational Art

Computational Art, inspiriert, wie sollte es anders sein von Keith Peters. Keith hatte dieses räumliche Konstrukt Gebilde mit der Drawing API bereits 2003 gescriptet. Ich habe diese pseudo 3D Engine jetzt mal in Actionscript 3 umgesetzt und zeichne alles direkt in ein BitmapData. Die Performance geht seid dem gut ab und die Dateigröße ist mit 7 KB sehr klein. Mit dieser pseudo 3D Engine lässt sich aber noch viel mehr anstellen. Mal schauen was da beim experimentieren in Zukunft noch so bei raus kommt.

Zum betrachten braucht es den Flashplayer 9.

Durch einen Klick in die Anwendung startet Ihr den Zeichenprozess wieder von Vorne.

FileReference.save Example

Endlich macht die FileReference richtig spaß. Seitdem es beim FlashPlayer 10 die neue save Methode gibt, kann man z.B. selbst erzeugte BitmapData abspeichern ohne einen Umweg z.B. über PHP gehen zu müssen. Nimmt man die Adobe ActionScript 3 Core Library dazu kann man JPG oder PNG Bilder abspeichern.
Für das ganze Speichern braucht es nur wenige Zeilen Code. Ich hab für dieses Beispiel eine kleine Klasse geschrieben die es weiter unten zu sehen gibt.
(Zum betrachten braucht Ihr min. den Flashplayer 10)



Und hier der Code:
(Als Parameter übergibt man das BitmapData Object, den Dateinamen und die Qualiät für die JPG Kompression)
Code und Beispiele gibts ausführlicher aber auch nochmal im Flashforum.

package {

import com.adobe.images.JPGEncoder;
import flash.display.BitmapData;
import flash.net.FileReference;

public class FileManager {

private var jpgEncoder:JPGEncoder;
private var fileReference:FileReference;

public function FileManager():void { }

public function saveImageJPG( bitmapData:BitmapData, fileName:String, quality:int ):void {

this.jpgEncoder = new JPGEncoder( quality );
this.fileReference = new FileReference();
this.fileReference.save( this.jpgEncoder.encode( bitmapData ), fileName + ".jpg" );

}
}
}