• 
• 
• 
• 
• 
• 
• 
• 0

Juni 2009

Generative Kunst

Fortsetzung, Teil 2

(Link zum Artikel: http://www.createordie.de/codv2/artikel/2376)

Einfach gezeichnet

Ohne großen Aufwand haben wir somit ein recht komfortables System, das autonom zeichnet. Ab dieser Stelle können wir uns überlegen, den gesamten Prozess noch etwas zu verfeinern. Haben wir eben nur simple Formen gezeichnet, so fügen wir dem Regelwerk jetzt noch ein paar weiterführende Methoden hinzu:

• DropShadows: um die Konturen ein wenig zu verfeinern
• Ordnungsanweisungen: Formen können 2D- und 3D-rotieren
• BlendModes: nur der hellere/nur der dunklere Pixel wird gezeichnet
• Mix-Modus: das System wechselt ständig zwischen den Formen

Diese Erweiterung der Regelanweisungen erlaubt nun ein recht breites Spektrum an gezeichneten Resultaten. Um das Ganze anwenden zu können, müssen wir in unserem Script nur noch die if-Anweisung für level ausweiten (Listing 3).

1. if ( this.level == "plain" ) {
4. ///////////////////////////////////
5. // ...plain-anweisungen haben wir
6. // bereits definiert
7. ///////////////////////////////////
9. ///////////////////////////////////
10. // enhanced zeichnungs-level
11. ///////////////////////////////////
14. } else if ( this.level == "enhanced" ) {
17. var shapeNode:Sprite = new Sprite();
18. shapeNode.x = i;
19. shapeNode.y = j;
21. if ( this.mode == "FreeLines" ) {
22. shapeNode.graphics.lineStyle( 10, this.imgMap.getPixel( i, j ) );
23. shapeNode.graphics.moveTo( 0, 0 );
24. shapeNode.graphics.lineTo( this.rnd() * 19, this.rnd() * 19 );
27. } else if ( this.mode == "StructLines" ) {
29. shapeNode.graphics.lineStyle( 14, this.imgMap.getPixel( i, j ) );
30. shapeNode.graphics.moveTo( 0, 0 );
31. shapeNode.graphics.lineTo( 12, 12 );
33. } else if ( this.mode == "Circles" ) {
35. shapeNode.graphics.beginFill( this.imgMap.getPixel( i, j ), 1.0 );
36. shapeNode.graphics.drawCircle( 0, 0, 4 + this.rnd() * 20 );
38. } else if ( this.mode == "FineSquares" ) {
39. shapeNode.graphics.beginFill( this.imgMap.getPixel( i, j ), 1.0 );
40. shapeNode.graphics.drawRect( 0, 0, 4 + this.rnd() * 6, 4 + this.rnd() * 6 );
42. } else if ( this.mode == "BigSquares" ) {
44. shapeNode.graphics.beginFill( this.imgMap.getPixel( i, j ), 1.0 );
45. shapeNode.graphics.drawRect( 0, 0, 14 + this.rnd() * 26, 14 + this.rnd() * 26 );
47. } else if ( this.mode == "StructSquares" ) {
49. shapeNode.graphics.beginFill( this.imgMap.getPixel( i, j ), 1.0 );
50. shapeNode.graphics.drawRect( 0, 0, 20, 20 );
52. } else if ( this.mode == "StampedSquares" ) {
54. w_x = 10 + rnd() * 20;
55. w_y = 5 + rnd() * 10;
57. shapeNode.graphics.lineStyle( 4, this.imgMap.getPixel( i, j ) );
58. shapeNode.graphics.moveTo( 0, 0 );
59. shapeNode.graphics.lineTo( w_x, 0 );
60. shapeNode.graphics.lineTo( w_x, w_y );
61. shapeNode.graphics.lineTo( 0, w_y );
62. shapeNode.graphics.lineTo( 0, 0 );
64. }
66. if ( this.order == "rotate" ) {
68. shapeNode.rotation = this.rnd() * 360;
70. } else if ( this.order == "z_space" ) {
72. shapeNode.rotationX = this.rnd() * 360;
73. shapeNode.rotationY = this.rnd() * 360;
74. shapeNode.rotationZ = this.rnd() * 360;
76. } else if ( this.order == "chaos" ) {
78. shapeNode.rotation = this.rnd() * 360;
79. shapeNode.scaleX = shapeNode.scaleX + this.rnd() * 0.9;
80. shapeNode.scaleY = shapeNode.scaleY + this.rnd() * 0.9;
82. shapeNode.rotationX = this.rnd() * 360;
83. shapeNode.rotationY = this.rnd() * 360;
84. shapeNode.rotationZ = this.rnd() * 360;
86. }
89. if ( this.blend == "normal" ) {
91. shapeNode.blendMode = "normal";
93. } else if ( this.blend == "lighten" ) {
95. shapeNode.blendMode = "lighten";
97. } else if ( this.blend == "darken" ) {
99. shapeNode.blendMode = "darken";
101. }
103. if ( this.anim ) {
108. } else {
110. shapeNode.filters = [ new DropShadowFilter( 4, 45, 0x0, .4, 2, 2, 1.2, 2, false, false, false ) ];
112. }
114. this.rootNode.addChild( shapeNode );
117. }
119. this.canvasMap.lock();
120. this.canvasMap.draw( this.rootNode );
121. this.canvasMap.unlock();
123. if ( this.level == "enhanced" ) {
125. if ( this.rootNode.getChildAt(0).name.indexOf( "anim", 0 ) == -1 ) {
127. this.rootNode.removeChildAt( 0 );
129. }
131. }

Bewegende Momente

An sich ist das System nun gut ausgestattet, um alleine möglichst vielfältige Ergebnisse zu produzieren. Als eine letzte Bedingung bringen wir unserem Programm noch die Möglichkeit bei, einzelne Farbkleckse zu animieren. Damit wirkt der gesamte Zeichenprozess dynamischer. Aber auch das ist kein Voodoo, sondern bedarf nur einer kleinen Anpassung im Script (Listing 4, Abb. 2)

1. if ( this.anim ) {
3. shapeNode.name ="anim"+String(i)+"_"+ String(j);
5. if ( this.order == "rotate" ) {
7. TweenLite.to( shapeNode, 1.2, { x:-15 + shapeNode.x + rnd() * 30, y:-15 + shapeNode.y + rnd() * 30, rotation:rnd()*360, onComplete:setName, onCompleteParams:[shapeNode], ease:Circ.easeOut
9. } );
11. } else {
13. TweenLite.to( shapeNode, 1.2, { x:-15 + shapeNode.x + rnd() * 30, y:-15 + shapeNode.y + rnd() * 30, onComplete:setName, onCompleteParams:[shapeNode], ease:Sine.easeOut } );
15. }
17. shapeNode.filters = [ new DropShadowFilter( 4, 45, 0x0, .01, 2, 2, 1.2, 2, false, false, false ) ];
19. } else {
20. shapeNode.filters = [ new DropShadowFilter( 4, 45, 0x0, .4, 2, 2, 1.2, 2, false, false, false ) ];
22. }
24. private function setName( shape:Sprite ):void {
26. shape.name = "done";
28. }

Weitere Farbtupfer

Wie schon angedeutet, gleichen Bilder eines solchen Systems fast niemals einander. Somit ist mit einem einmal geschriebenen System eine fast unendliche Vielzahl an Resultaten möglich. Fast unbegrenzt sind ebenfalls die Möglichkeiten, den gesamten Prozess noch weiter auszubauen, zu verfeinern und komplexer zu gestalten.

Wer vorab erstmal seine Fühler ausstrecken und sich inspirieren lassen möchte, kann aber auch einfach ein schon fertiges Programm herunterladen und stöbern. Davon gibt es zu diesem Thema Unmengen an Quellen im Internet, z. B. Context Free Art oder Structure Synth, um nur zwei zu nennen.

Frank Reitberger (reitberger@anymotion.de) arbeitet und entwickelt als Flash-Teamleiter für anyMOTION GRAPHICS Internet- und Offlineanwendungen im B2C- und B2B-Bereich. Frank veröffentlicht unter seinem Nickname "pwdVergesser" auch viele seiner kleinen Flash-Snippets im Flashforum sowie in seinem Blog prinzipiell.com.

• 1
• 2

 

• Gute Kommentare werden belohnt.
•   (optional)
•   (Kommentar abonnieren/Gravatar - wird nicht veröffentlicht)
•    Benachrichtige mich bei nachfolgenden Kommentaren per E-Mail
• Dein Kommentar (HTML- und sonstige Codeelemente werden nicht angezeigt)
• -+
• 

• kunst,
• code,
• design,
• klingemann,
• davis