• 
• 
• 
• 
• 
• 
• 
• 0

Juni 2009

Generative Kunst

Prozessuales Pinselschwingen

(Link zum Artikel: http://www.createordie.de/cod/artikel/2375)

Der Künstler ein Coder, der Abarbeitungsalgorithmen für sich selbstorganisierende oder autonome Farbkleckse entwickelt.

Text: Frank Reitberger

Respektable, mit Flash erstellte und generative Kunst ist heute dank der Arbeiten von Eric Natzke, Joshua Davis oder Mario Klingemann absolut en vogue. Dabei steht bei dieser zeitgenössischen Form des kreativen Schaffens mehr der Entstehungsprozess als das tatsächliche Endprodukt im Fokus.

Das heißt, die eigentlich kreative Phase liegt zuvor in der Entwicklung eines Programms, das Abarbeitungsalgorithmen sowie geordnete oder chaotische Systeme und Regeln festlegt, wodurch sich die prozessualen Farbkleckse danach selbstorganisiert und meist autonom entfalten können. Das daraus resultierende Ergebnis ist quasi immer ein Unikat und gleicht meist niemals 1:1 einem weiteren Bild aus derselben Programmreihe.

Grundlegendes

Generative Kunst muss im Ergebnis nicht zwangsläufig in einem Bild enden, sondern kann als Konzept in ihrer Form auch auf Sprache, Musik oder als Regelcodex für ein Schauspiel angewendet werden. Legen wir uns zuerst einmal auf Folgendes fest: Als Grundlage dient uns ein Bild, das durch unsere Systeme in immer neuen Kompositionen arrangiert wird. Vorweg also ein kleines Basis-Setup, in dem wir kurz definieren, welches Bild als Vorlage dienen soll und welches System wir zum Zeichnen verwenden (Listing 1).

1. package {
4. ///////////////////////////////////
5. // import used classes
6. ///////////////////////////////////
8. import flash.display.StageQuality;
9. import flash.display.Sprite;
10. import flash.display.DisplayObject;
15. ///////////////////////////////////
16. // class
17. ///////////////////////////////////
19. public class Main extends Sprite {
21. private var core :CoreCanvas;
23. ///////////////////////////////
24. // class constructor
25. ///////////////////////////////////
27. public function Main() {
29. core = new CoreCanvas();
30. core.launch( this );
32. stage.quality = StageQuality.LOW;
34. }
35. }
36. }
38. import flash.display.Bitmap;
39. import flash.display.BitmapData;
40. import flash.display.DisplayObjectContainer;
41. import flash.display.Sprite;
43. class CoreCanvas {
46. [Embed(source = '../library/frankLisa.jpg')]
47. private var img:Class;
49. private var container:DisplayObjectContainer;
50. private var paintNode:Sprite;
51. private var bmp:Bitmap;
52. private var canvas:Bitmap;
53. private var imgMap:BitmapData;
54. private var canvasMap:BitmapData;
55. private var rndGeoms:RndGeoms;
56. private var gSystem:Number = 1;
57. private var w:int = 406;
58. private var h:int = 563;
60. ///////////////////////////////////
61. // class constructor
62. ///////////////////////////////////
64. public function CoreCanvas():void { }
67. ///////////////////////////////////
68. // launch
69. ///////////////////////////////////
71. public function launch(
72. container:DisplayObjectContainer ):void {
74. this.container = container;
75. this.paintNode = new Sprite();
76. this.imgMap = new BitmapData( this.w,
77. this.h, false, 0x000000 );
78. this.canvasMap = new BitmapData( this.w,
79. this.h, true, 0x00000000 );
81. this.imgMap.draw( new img() as Bitmap );
82. this.bmp = new Bitmap( this.imgMap );
83. this.canvas = new Bitmap( this.canvasMap );
85. this.container.addChild( this.bmp );
86. this.container.addChild( this.canvas );
88. paint();
90. }
93. ///////////////////////////////////
94. // paint: current.system
95. ///////////////////////////////////
97. private function paint():void {
99. if ( this.gSystem == 1 ) {
101. this.rndGeoms = new RndGeoms();
103. this.rndGeoms.launch( this.paintNode,
104. this.imgMap,this.canvasMap,this.w,this.h);
108. }
110. }
112. }

Das Regelwerk

Wie einfach oder komplex ein System letztendlich ist, haben wir beim Entwickeln natürlich selbst in der Hand. Legen wir uns für dieses Mal darauf fest, dass wir uns per Script kontinuierlich eine zufällige X-Y-Koordinate auf dem Ausgangsbild auswählen und dort den Farbwert des Pixels auslesen. Diesen Wert benutzen wir für die Füllung definierter Formen aus dem Flash Graphics API, die wir anschließend wiederum in ein neues Bitmap zeichnen. Bei den zu zeichnenden Formen habe ich bereits ein kleines "preset" im Array modes vordefiniert:

• • FreeLines: Linien mit einer zufälligen Länge
• • StructLines: immer gleich lange Linien
• • Circles: Kreise mit unterschiedlichem Radius
• • FineSquares: kleine, unterschiedlich dimensionierte Rechtecke
• • BigSquares: große Rechtecke mit unterschiedlichem Durchmesser
• • StructSquares: immer gleich große Rechtecke
• • StampedSquares: unterschiedlich dimensionierte, innen offene Rechtecke

Die Anzahl der Formen kann selbstverständlich nach Belieben bequem erweitert werden (Listing 2, Abb. 1).

1. package {
3. ///////////////////////////////////
4. // import used classes
5. ///////////////////////////////////
7. import flash.display.Sprite;
8. import flash.display.BitmapData;
9. import flash.events.Event;
12. ///////////////////////////////////
13. // class
14. ///////////////////////////////////
16. public class RndGeoms {
18. private var rootNode :Sprite;
19. private var imgMap :BitmapData;
20. private var canvasMap :BitmapData;
21. private var w :int;
22. private var h :int;
23. private var i :Number;
24. private var j :Number;
26. private var modes :Array = new Array(
27. "FreeLines", "StructLines", "Circles", "FineSquares", "BigSquares", "StructSquares", "StampedSquares" );
30. private var rnd :Function = Math.random;
31. private var u :Number = Math.round(
32. rnd() * modes.length-1 );
34. private var system :String = "strict";
35. private var mode :String = "Circles";
36. private var level :String = "plain";
37. private var order :String = "strict"; /
38. private var blend :String = "normal"; private var anim :Boolean = false;
40. ///////////////////////////////////
41. // class constructor
42. ///////////////////////////////////
44. public function RndGeoms():void { }
48. ///////////////////////////////////
49. // launch
50. //////////////////////////////////
52. public function launch( rootNode:Sprite, imgMap:BitmapData, canvasMap:BitmapData, w:int, h:int ):void {
54. this.rootNode = rootNode;
55. this.imgMap = imgMap;
56. this.canvasMap = canvasMap;
57. this.w = w;
58. this.h = h;
60. init();
62. }
64. ///////////////////////////////////
65. // initialize
66. ///////////////////////////////////
68. private function init():void {
70. this.rootNode.addEventListener( Event.ENTER_FRAME, onUpdateFrame );
72. }
75. ///////////////////////////////////
76. // onUpdateFrame
77. ///////////////////////////////////
79. private function onUpdateFrame( event:Event ):void {
82. this.i = this.rnd() * this.w;
83. this.j = this.rnd() * this.h;
85. var w_x:Number;
86. var w_y:Number;
89. if ( this.level == "plain" ) {
91. this.rootNode.graphics.clear();
94. if ( this.mode == "FreeLines" ) {
96. this.rootNode.graphics.lineStyle( 10, this.imgMap.getPixel( i, j ) );
97. this.rootNode.graphics.moveTo( i, j );
98. this.rootNode.graphics.lineTo( i + this.rnd() * 19, j +this.rnd() * 19 );
100. } else if ( this.mode == "StructLines" ) {
101. this.rootNode.graphics.lineStyle( 14, this.imgMap.getPixel( i, j ) ); this.rootNode.graphics.moveTo( i, j ); this.rootNode.graphics.lineTo( i + 12,j + 12 );
103. } else if ( this.mode == "Circles" ) {
104. this.rootNode.graphics.beginFill( this.imgMap.getPixel( i, j ), 1.0 );
105. this.rootNode.graphics.drawCircle( i, j, 4 + this.rnd() * 20 );
107. } else if ( this.mode == "FineSquares" ) {
108. this.rootNode.graphics.beginFill( this.imgMap.getPixel( i, j ), 1.0 );
109. this.rootNode.graphics.drawRect( i, j, 4 + this.rnd() * 6, 4 + this.rnd() * 6 );
111. } else if ( this.mode == "BigSquares" ) {
112. this.rootNode.graphics.beginFill( this.imgMap.getPixel( i, j ), 1.0 );
113. this.rootNode.graphics.drawRect( i, j, 14 + this.rnd() * 26, 14 + this.rnd() * 26 );
115. } else if ( this.mode == "StructSquares" ) {
116. this.rootNode.graphics.beginFill( this.imgMap.getPixel( i, j ), 1.0 );
117. this.rootNode.graphics.drawRect( i, j,20, 20 );
120. } else if ( this.mode == "StampedSquares" ) {
122. w_x = 10 + rnd() * 20;
123. w_y = 5 + rnd() * 10;
125. this.rootNode.graphics.lineStyle( 4, this.imgMap.getPixel( i, j ) );
126. this.rootNode.graphics.moveTo( i, j );
127. this.rootNode.graphics.lineTo( i + w_x, j );
128. this.rootNode.graphics.lineTo(i+w_x,j+w_y );
129. this.rootNode.graphics.lineTo( i, j + w_y );
130. this.rootNode.graphics.lineTo( i, j );
132. }
134. }
136. this.canvasMap.lock();
137. this.canvasMap.draw( this.rootNode );
138. this.canvasMap.unlock();
141. }
142. }
143. }

• 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