Digital Bauhaus Vorkurs/Projekte/Formkontraste - Revision history

Anastasiya at 08:53, 1 April 2011

2011-04-01T08:53:02Z

← Older revision		Revision as of 08:53, 1 April 2011
Line 80:		Line 80:

	===Quellen===		===Quellen===
	[http://www.learningprocessing.com/examples/ Learning Processing]		[http://www.learningprocessing.com/examples/ Learning Processing]<br/>
	[http://processing.org/reference/ Processing.org]		[http://processing.org/reference/ Processing.org]<br/>
	Processing: Creative Coding and Computational Art-Ira Greenberg (Foreword by Keith Peters)		Processing: Creative Coding and Computational Art-Ira Greenberg (Foreword by Keith Peters)<br/>
	Generative Gestaltung von Hartmut Bohnacker, Benedikt Groß, Julia Laub und Claudius Lazzeroni		Generative Gestaltung von Hartmut Bohnacker, Benedikt Groß, Julia Laub und Claudius Lazzeroni

Anastasiya at 08:50, 1 April 2011

2011-04-01T08:50:53Z

← Older revision		Revision as of 08:50, 1 April 2011
Line 78:		Line 78:
	</gallery>		</gallery>
	[[Media:ChangeColor.pde\|Code]]<br/>[[Media:MalGen.pde\|Code(Class)]]		[[Media:ChangeColor.pde\|Code]]<br/>[[Media:MalGen.pde\|Code(Class)]]

			===Quellen===
			[http://www.learningprocessing.com/examples/ Learning Processing]
			[http://processing.org/reference/ Processing.org]
			Processing: Creative Coding and Computational Art-Ira Greenberg (Foreword by Keith Peters)
			Generative Gestaltung von Hartmut Bohnacker, Benedikt Groß, Julia Laub und Claudius Lazzeroni

Anastasiya at 17:11, 3 March 2011

2011-03-03T17:11:57Z

← Older revision		Revision as of 17:11, 3 March 2011
Line 38:		Line 38:
	Suprematistische Komposition:		Suprematistische Komposition:
	3 schwarze Rechtecke und 1 gelbe Ellypse tauchen auf verschiedenen Positionen in verschiedenen Größen auf		3 schwarze Rechtecke und 1 gelbe Ellypse tauchen auf verschiedenen Positionen in verschiedenen Größen auf

			Besonders interessant zu beobachten wird es dann, wenn die Ellipse (oder das Rechteck) zu einer Linie wird, da man dies nicht erwartet.
	<br clear="all"/>		<br clear="all"/>

Anastasiya at 18:33, 1 February 2011

2011-02-01T18:33:47Z

← Older revision		Revision as of 18:33, 1 February 2011
Line 5:		Line 5:
	[[File:MR.png\|200px\|right]]		[[File:MR.png\|200px\|right]]
	[[Media:MR.pde\|Code]]<br/>		[[Media:MR.pde\|Code]]<br/>
	[[Media:MRClass.pde\|Code(Class)]]		[[Media:MRClass.pde\|Code(Class)]]<br/>
	Viele Rechtecke an beliebigen Positionen in verschiedenen Graustufen (frameRate(1);)<br/>		Viele Rechtecke an beliebigen Positionen in verschiedenen Graustufen (frameRate(1);)<br/>
	Man kann verschiedene Quantitätskontraste beobachten: schmale Rechteck stehen den breiten gegenüber, kleine den großen.		Man kann verschiedene Quantitätskontraste beobachten: schmale Rechteck stehen den breiten gegenüber, kleine den großen.

Anastasiya at 18:33, 1 February 2011

2011-02-01T18:33:12Z

← Older revision		Revision as of 18:33, 1 February 2011
Line 67:		Line 67:

	(siehe "Suprematistische Komposition") Es ist bei jedem frameRate eine andere Anzahl an Rechtecken. Jedoch immer nur eine Ellypse.		(siehe "Suprematistische Komposition") Es ist bei jedem frameRate eine andere Anzahl an Rechtecken. Jedoch immer nur eine Ellypse.
			<br clear="all"/>

	hier eine Alternative, bei der sich die Farbe der Ellypse ändert:		hier eine Alternative, bei der sich die Farbe der Ellypse ändert:

Anastasiya at 18:31, 1 February 2011

2011-02-01T18:31:54Z

← Older revision		Revision as of 18:31, 1 February 2011
Line 72:		Line 72:
	File:ChangeColor.png		File:ChangeColor.png
	File:ChangeColor2.png		File:ChangeColor2.png
	File:ChangeColor1.png~~\|[[Media:ChangeColor.pde\|ChangeColor]]\|[[Media:MalGen.pde\|ChangeColorClass]]~~		File:ChangeColor1.png
	</gallery>		</gallery>
			[[Media:ChangeColor.pde\|Code]]<br/>[[Media:MalGen.pde\|Code(Class)]]

Anastasiya at 18:29, 1 February 2011

2011-02-01T18:29:54Z

← Older revision		Revision as of 18:29, 1 February 2011
Line 6:		Line 6:
	[[Media:MR.pde\|Code]]<br/>		[[Media:MR.pde\|Code]]<br/>
	[[Media:MRClass.pde\|Code(Class)]]		[[Media:MRClass.pde\|Code(Class)]]

	Viele Rechtecke an beliebigen Positionen in verschiedenen Graustufen (frameRate(1);)<br/>		Viele Rechtecke an beliebigen Positionen in verschiedenen Graustufen (frameRate(1);)<br/>
	Man kann verschiedene Quantitätskontraste beobachten: schmale Rechteck stehen den breiten gegenüber, kleine den großen.		Man kann verschiedene Quantitätskontraste beobachten: schmale Rechteck stehen den breiten gegenüber, kleine den großen.
			<br clear="all"/>

	~~<br clear="all"/>~~
	===Rechteck im Rechteck===		===Rechteck im Rechteck===
	[[File:2Rect.png\|200px\|right]]		[[File:2Rect.png\|200px\|right]]
	[[File:2Rect2.png\|200px\|right]]		[[File:2Rect2.png\|200px\|right]]
	[[Media:2Rect.pde\|Code]]		[[Media:2Rect.pde\|Code]]<br/>

	Beliebige Höhen- und Breitenbestimmung des weißen und grauen Rechtecks durch mouseX und MouseY		Beliebige Höhen- und Breitenbestimmung des weißen und grauen Rechtecks durch mouseX und MouseY
	<br clear="all"/>		<br clear="all"/>

	===Growing Rect===		===Growing Rect===

	[[File:LoopRect.png\|right\|200px]]		[[File:LoopRect.png\|right\|200px]]
	[[File:LoopRect2.png\|right\|200px]]		[[File:LoopRect2.png\|right\|200px]]
	[[Media:ProRect.pde\|GrowingRect:]]		[[Media:ProRect.pde\|GrowingRect:]]

	kleiches Rechteck wächst auf (150,150) und bewegt sich mit der Maus		kleiches Rechteck wächst auf (150,150) und bewegt sich mit der Maus
	Hier wird die Figur-Grund Beziehung deutlich: Das Rechteck gewinnt immer mehr an Bedeutung und zieht den Schwerpunkt auf sich. Durch die Bewegung stellt sich das Rechteck den anderen Rechtecken, die sich in Größe und Qualität unterscheiden.		Hier wird die Figur-Grund Beziehung deutlich: Das Rechteck gewinnt immer mehr an Bedeutung und zieht den Schwerpunkt auf sich. Durch die Bewegung stellt sich das Rechteck den anderen Rechtecken, die sich in Größe und Qualität unterscheiden.
Line 29:		Line 26:

	===Rechtecke und Ellipsen===		===Rechtecke und Ellipsen===
			[[File:Mal.png\|right\|200px]]
	[[File:Mal.png\|right\|200px~~]][[Media:Mal.pde\|Code]][[Media:Mal2.pde\|Code(Class)~~]]
	[[File:Mal3.png\|right\|200px]]		[[File:Mal3.png\|right\|200px]]
			[[Media:Mal.pde\|Code]]<br/>[[Media:Mal2.pde\|Code(Class)]]<br/>
	Form-an-sich-Kontrast wird durch die zwei Formen hervorgerufen. Auch der Quantitätskontrast kommt zur geltung.		Form-an-sich-Kontrast wird durch die zwei Formen hervorgerufen. Auch der Quantitätskontrast kommt zur geltung.
	<br clear="all"/>		<br clear="all"/>
Line 39:		Line 35:
	[[File:KanRandom.png\|200px\|right]]		[[File:KanRandom.png\|200px\|right]]
	[[File:KanRandom2.png\|200px\|right]]		[[File:KanRandom2.png\|200px\|right]]
	[[Media:KanRandom.pde\|~~Suprematistische Komposition~~]][[Media:KanRandomClass.pde\|~~SKClass~~]]		[[Media:KanRandom.pde\|Code]]<br/>[[Media:KanRandomClass.pde\|Code(Class)]]<br/>

	Suprematistische Komposition:		Suprematistische Komposition:
	3 schwarze Rechtecke und 1 gelbe Ellypse tauchen auf verschiedenen Positionen in verschiedenen Größen auf		3 schwarze Rechtecke und 1 gelbe Ellypse tauchen auf verschiedenen Positionen in verschiedenen Größen auf
	<br clear="all"/>		<br clear="all"/>
	~~<gallery>~~
	~~File:KanSlbst.png~~
	~~File:KanFarbe.png\|[[Media:KanFarbe.pde\|Selfmade]]~~
	~~</gallery>~~

	Selfmade:		===Selfmade===

			[[File:KanSlbst.png\|right\|200px]]
			[[File:KanFarbe.png\|right\|200px]]
			[[Media:KanFarbe.pde\|Selfmade:]]

	# Positionierung der Form ist frei wählbar		# Positionierung der Form ist frei wählbar
	# Anzahl und Art der Formen bestimmbar		# Anzahl und Art der Formen bestimmbar
Line 55:		Line 51:
	⇒ so kann man selbst ein suprematistisches Bild mit Formkontrasten erstellen		⇒ so kann man selbst ein suprematistisches Bild mit Formkontrasten erstellen
	<br clear="all"/>		<br clear="all"/>
	~~<gallery>~~
	~~File:Stretch.png~~
	~~File:Stretch2.png\|[[Media:Stretch.pde\|Stretch]]\|[[Media:StretchClass.pde\|StretchClass]]\|[[Media:StretchShape.pde\|StretchShape]]~~
	~~</gallery>~~

	Stretch: Die Figuren breiten sich von der Mitte bis auf das ganze Bild aus und wechseln dabei die Größe. Man beobachtet die sich verändernde Zusammenstellung der Figuren. Jedes Mal ist es ein anderes Verhältnis von Rechteck- und Kreismenge.
			===Ausdehnende Komposition===
			[[File:Stretch.png\|right\|200px]]
			[[File:Stretch2.png\|right\|200px]]
			[[Media:Stretch.pde\|Code]]<br/>[[Media:StretchClass.pde\|Code(Class)]]<br/>[[Media:StretchShape.pde\|Code(Shape)]]<br/>

			Die Figuren breiten sich von der Mitte bis auf das ganze Bild aus und wechseln dabei die Größe. Man beobachtet die sich verändernde Zusammenstellung der Figuren. Jedes Mal ist es ein anderes Verhältnis von Rechteck- und Kreismenge.
	<br clear="all"/>		<br clear="all"/>
	~~<gallery>~~
	~~File:MalGen.png~~
	~~File:MalGenNew.png\|[[Media:MalGen.pde\|Code1]]\|[[Media:CodeClass.pde\|CodeClass]]~~
	~~</gallery>~~

	(siehe "~~ProRandom~~") Es ist bei jedem frameRate eine andere Anzahl an Rechtecken. Jedoch immer nur eine Ellypse.		===Suprematistische Komposition mit mehreren Rechtecken===
			[[File:MalGen.png\|right\|200px]]
			[[File:MalGenNew.png\|right\|200px]]
			[[Media:MalGen.pde\|Code]]<br/>[[Media:CodeClass.pde\|Code(Class)]]<br/>

			(siehe "Suprematistische Komposition") Es ist bei jedem frameRate eine andere Anzahl an Rechtecken. Jedoch immer nur eine Ellypse.

	hier eine Alternative, bei der sich die Farbe der Ellypse ändert:		hier eine Alternative, bei der sich die Farbe der Ellypse ändert:
	~~<br clear="all"/>~~
	<gallery>		<gallery>
	File:ChangeColor.png		File:ChangeColor.png

Anastasiya at 18:19, 1 February 2011

2011-02-01T18:19:04Z

← Older revision		Revision as of 18:19, 1 February 2011
Line 2:		Line 2:
	*Quantitätskontrast		*Quantitätskontrast

			===VieleRechtecke===
			[[File:MR.png\|200px\|right]]
			[[Media:MR.pde\|Code]]<br/>
			[[Media:MRClass.pde\|Code(Class)]]

	~~[[File:MR.png\|200px]]~~		Viele Rechtecke an beliebigen Positionen in verschiedenen Graustufen (frameRate(1);)<br/>
	~~[[Media:MR.pde\|VieleRechtecke]]~~
	~~[[Media:MRClass.pde\|VieleRechtecke(Class)]]~~
	~~VieleRechtecke:~~
	Viele Rechtecke an beliebigen Positionen in verschiedenen Graustufen (frameRate(1);)
	Man kann verschiedene Quantitätskontraste beobachten: schmale Rechteck stehen den breiten gegenüber, kleine den großen.		Man kann verschiedene Quantitätskontraste beobachten: schmale Rechteck stehen den breiten gegenüber, kleine den großen.

	[[File:2Rect.png\|200px]]		<br clear="all"/>
	[[File:2Rect2.png\|200px]]		===Rechteck im Rechteck===
	[[Media:2Rect.pde\|~~2Rect~~]]		[[File:2Rect.png\|200px\|right]]
	~~2Rect:~~		[[File:2Rect2.png\|200px\|right]]
			[[Media:2Rect.pde\|Code]]

	Beliebige Höhen- und Breitenbestimmung des weißen und grauen Rechtecks durch mouseX und MouseY		Beliebige Höhen- und Breitenbestimmung des weißen und grauen Rechtecks durch mouseX und MouseY
			<br clear="all"/>
			===Growing Rect===

	~~<gallery>~~		[[File:LoopRect.png\|right\|200px]]
	File:~~LoopRect~~.png\|[[Media:ProRect.pde\|~~ProRect~~]]		[[File:LoopRect2.png\|right\|200px]]
	~~File:LoopRect2.png~~		[[Media:ProRect.pde\|GrowingRect:]]
	~~</gallery>~~

	~~ProRect:~~
	kleiches Rechteck wächst auf (150,150) und bewegt sich mit der Maus		kleiches Rechteck wächst auf (150,150) und bewegt sich mit der Maus
	Hier wird die Figur-Grund Beziehung deutlich: Das Rechteck gewinnt immer mehr an Bedeutung und zieht den Schwerpunkt auf sich. Durch die Bewegung stellt sich das Rechteck den anderen Rechtecken, die sich in Größe und Qualität unterscheiden.		Hier wird die Figur-Grund Beziehung deutlich: Das Rechteck gewinnt immer mehr an Bedeutung und zieht den Schwerpunkt auf sich. Durch die Bewegung stellt sich das Rechteck den anderen Rechtecken, die sich in Größe und Qualität unterscheiden.
			<br clear="all"/>

	~~<gallery>~~		===Rechtecke und Ellipsen===
	~~File:Mal.png\|[[Media:Mal.pde\|Malen]]\|[[Media:Mal2.pde\|Malen2]]~~
	~~File:Mal3.png~~
	~~</gallery>~~

	~~Malen:~~

	~~<source lang="java">~~		[[File:Mal.png\|right\|200px]][[Media:Mal.pde\|Code]][[Media:Mal2.pde\|Code(Class)]]
	~~if (keyPressed){~~		[[File:Mal3.png\|right\|200px]]
	~~if (key=='q'~~\|\|~~key=='a'~~\|\|~~key=='l'~~)~~{ ellipse~~ .~~...} else{rect...}~~
	~~</source>~~

	Form-an-sich-Kontrast wird durch die zwei Formen hervorgerufen. Auch der Quantitätskontrast kommt zur geltung.		Form-an-sich-Kontrast wird durch die zwei Formen hervorgerufen. Auch der Quantitätskontrast kommt zur geltung.
			<br clear="all"/>

	~~<gallery>~~		===Suprematistische Komposition===
	File:KanRandom.png		[[File:KanRandom.png\|200px\|right]]
	File:KanRandom2.png\|[[Media:KanRandom.pde\|~~ProRandom~~]]\| [[Media:KanRandomClass.pde\|~~ProClass~~]]		[[File:KanRandom2.png\|200px\|right]]
	~~</gallery>~~		[[Media:KanRandom.pde\|Suprematistische Komposition]][[Media:KanRandomClass.pde\|SKClass]]

	~~ProRandom~~:		Suprematistische Komposition:
	3 schwarze Rechtecke und 1 gelbe Ellypse tauchen auf verschiedenen Positionen in verschiedenen Größen auf		3 schwarze Rechtecke und 1 gelbe Ellypse tauchen auf verschiedenen Positionen in verschiedenen Größen auf
			<br clear="all"/>
	<gallery>		<gallery>
	File:KanSlbst.png		File:KanSlbst.png
Line 57:		Line 54:
	# 4 Farben (rot, blau, gelb und schwarz) stehen zur Auswahl		# 4 Farben (rot, blau, gelb und schwarz) stehen zur Auswahl
	⇒ so kann man selbst ein suprematistisches Bild mit Formkontrasten erstellen		⇒ so kann man selbst ein suprematistisches Bild mit Formkontrasten erstellen
			<br clear="all"/>
	<gallery>		<gallery>
	File:Stretch.png		File:Stretch.png
Line 64:		Line 61:

	Stretch: Die Figuren breiten sich von der Mitte bis auf das ganze Bild aus und wechseln dabei die Größe. Man beobachtet die sich verändernde Zusammenstellung der Figuren. Jedes Mal ist es ein anderes Verhältnis von Rechteck- und Kreismenge.		Stretch: Die Figuren breiten sich von der Mitte bis auf das ganze Bild aus und wechseln dabei die Größe. Man beobachtet die sich verändernde Zusammenstellung der Figuren. Jedes Mal ist es ein anderes Verhältnis von Rechteck- und Kreismenge.
			<br clear="all"/>
	<gallery>		<gallery>
	File:MalGen.png		File:MalGen.png
Line 73:		Line 70:

	hier eine Alternative, bei der sich die Farbe der Ellypse ändert:		hier eine Alternative, bei der sich die Farbe der Ellypse ändert:
			<br clear="all"/>
	<gallery>		<gallery>
	File:ChangeColor.png		File:ChangeColor.png

Anastasiya at 17:45, 1 February 2011

2011-02-01T17:45:36Z

← Older revision		Revision as of 17:45, 1 February 2011
Line 3:		Line 3:


	[[File:MR.png\|~~300px\|~~Media:MR.pde\|VieleRechtecke\|Media:MRClass.pde\|~~VieleRechtecke2~~]]		[[File:MR.png\|200px]]
			[[Media:MR.pde\|VieleRechtecke]]
			[[Media:MRClass.pde\|VieleRechtecke(Class)]]
	VieleRechtecke:		VieleRechtecke:
	Viele Rechtecke an beliebigen Positionen in verschiedenen Graustufen (frameRate(1);)		Viele Rechtecke an beliebigen Positionen in verschiedenen Graustufen (frameRate(1);)
	Man kann verschiedene Quantitätskontraste beobachten: schmale Rechteck stehen den breiten gegenüber, kleine den großen.		Man kann verschiedene Quantitätskontraste beobachten: schmale Rechteck stehen den breiten gegenüber, kleine den großen.

	[[File:2Rect.png\|~~300px~~]]		[[File:2Rect.png\|200px]]
	[[File:2Rect2.png\|~~300px~~]]		[[File:2Rect2.png\|200px]]
	[[Media:2Rect.pde\|2Rect]]		[[Media:2Rect.pde\|2Rect]]
	2Rect:		2Rect:

Anastasiya at 17:42, 1 February 2011

2011-02-01T17:42:52Z

← Older revision		Revision as of 17:42, 1 February 2011
Line 2:		Line 2:
	*Quantitätskontrast		*Quantitätskontrast

	~~<gallery>~~
	~~File:MR.png\|[[Media:MR.pde\|MR]]\|[[Media:MRClass.pde\|MRClass]]~~
	~~</gallery>~~

	MRClass:		[[File:MR.png\|300px\|Media:MR.pde\|VieleRechtecke\|Media:MRClass.pde\|VieleRechtecke2]]
			VieleRechtecke:
	Viele Rechtecke an beliebigen Positionen in verschiedenen Graustufen (frameRate(1);)		Viele Rechtecke an beliebigen Positionen in verschiedenen Graustufen (frameRate(1);)
	Man kann verschiedene Quantitätskontraste beobachten: schmale Rechteck stehen den breiten gegenüber, kleine den großen.		Man kann verschiedene Quantitätskontraste beobachten: schmale Rechteck stehen den breiten gegenüber, kleine den großen.

	~~<gallery>~~		[[File:2Rect.png\|300px]]
	File:~~2Rect~~.png\|[[Media:2Rect.pde\|2Rect]]		[[File:2Rect2.png\|300px]]
	~~File:2Rect2.png~~		[[Media:2Rect.pde\|2Rect]]
	~~</gallery>~~

	2Rect:		2Rect:
	Beliebige Höhen- und Breitenbestimmung des weißen und grauen Rechtecks durch mouseX und MouseY		Beliebige Höhen- und Breitenbestimmung des weißen und grauen Rechtecks durch mouseX und MouseY