Graphikfunktionen in Processing - Versionsgeschichte

B.Schiller: /* Bilder */

2015-10-07T15:34:46Z

Bilder

← Nächstältere Version		Version vom 7. Oktober 2015, 15:34 Uhr
Zeile 442:		Zeile 442:
	</syntaxhighlight>		</syntaxhighlight>
	</td></tr></table>		</td></tr></table>


			<div style="background-color:#F8E0F1; padding:10px; margin-bottom:30px;">
			'''Aufgabe 8'''

			Erstelle ein Programm, in dem man per Maus ein Objekt (z.B. Hase) über einen Hintergrund (z.B. Wiese) bewegen kann.

			<popup name="Lösungsvorschlag">
			<syntaxhighlight lang="java">
			PImage hase;
			PImage wiese;

			void setup(){
			size(600,235);
			hase = loadImage("hase.jpg");
			wiese = loadImage("wiese.jpg");
			}

			void draw(){
			image(wiese, 0, 0);
			image(hase, mouseX, mouseY);
			}
			</syntaxhighlight>
			</popup>

			</div>

2015-10-07T15:22:14Z

Bilder

← Nächstältere Version		Version vom 7. Oktober 2015, 15:22 Uhr
Zeile 420:		Zeile 420:

	Wir können auf der Zeichenfläche auch Bilder (im JPG-, PNG- oder GIF-Format) einfügen. Dazu müssen wir zuerst ein '''[https://processing.org/reference/PImage.html PImage]'''-Objekt erzeugen, das unser Bild aufnimmt. In der ''setup()''-Methode laden wir das Bild mit der Methode '''[https://processing.org/reference/loadImage_.html loadImage]''' und fügen es in der ''draw()''-Funktion mit der Methode '''[https://processing.org/reference/image_.html image]''' ein. Vorbereitend müssen wir allerdings im betreffenden Sketchordner einen Unterordner names '''"data"''' anlegen und dort unser betreffendes Bild abspeichern.		Wir können auf der Zeichenfläche auch Bilder (im JPG-, PNG- oder GIF-Format) einfügen. Dazu müssen wir zuerst ein '''[https://processing.org/reference/PImage.html PImage]'''-Objekt erzeugen, das unser Bild aufnimmt. In der ''setup()''-Methode laden wir das Bild mit der Methode '''[https://processing.org/reference/loadImage_.html loadImage]''' und fügen es in der ''draw()''-Funktion mit der Methode '''[https://processing.org/reference/image_.html image]''' ein. Vorbereitend müssen wir allerdings im betreffenden Sketchordner einen Unterordner names '''"data"''' anlegen und dort unser betreffendes Bild abspeichern.


			[[Datei:proc_gfunc_14.JPG]]

2015-10-05T20:13:25Z

Bilder

← Nächstältere Version		Version vom 5. Oktober 2015, 20:13 Uhr
Zeile 422:		Zeile 422:


	~~[[Datei~~:~~proc_gfunc_14.JPG]]~~		Beispiel:

			<table style="margin-left:200px;"><tr><td>[[Datei:proc_gfunc_15.JPG]]</td>
			<td style="padding-left:40px; padding-right:80px; ">
	~~Beispiel~~:
	<syntaxhighlight lang="java">		<syntaxhighlight lang="java">
	PImage photo;		PImage photo;

	void setup(){		void setup(){
	size(320, 291);		size(320,291);
	photo = loadImage("meinPhoto.jpg");		photo = loadImage("meinPhoto.jpg");
	}		}

	void draw(){		void draw(){
	image(photo, 10, 10);		image(photo, 10, 10);
	}		}
	</syntaxhighlight>		</syntaxhighlight>
			</td></tr></table>



	~~[[Datei:proc_gfunc_15.JPG]]~~

2015-10-05T19:56:00Z

Bilder

2015-10-05T14:39:13Z

Bilder

← Nächstältere Version		Version vom 5. Oktober 2015, 14:39 Uhr
Zeile 431:		Zeile 431:

	void setup(){		void setup(){
	size(~~400~~, ~~300~~);		size(320, 291);
	photo = ~~LoadImage~~("meinPhoto.jpg");		photo = loadImage("meinPhoto.jpg");
	}		}

2015-10-05T14:36:57Z

← Nächstältere Version		Version vom 5. Oktober 2015, 14:36 Uhr
Zeile 415:		Zeile 415:
	Die obige Methode zum Zeichnen eignet sich auch für die Herausforderung des [http://thevirtualinstructor.com/continuous-line-drawing.html Continuous Line Drawing].		Die obige Methode zum Zeichnen eignet sich auch für die Herausforderung des [http://thevirtualinstructor.com/continuous-line-drawing.html Continuous Line Drawing].
	</div>		</div>


			==Bilder==

			Wir können auf der Zeichenfläche auch Bilder (im JPG-, PNG- oder GIF-Format) einfügen. Dazu müssen wir zuerst ein '''[https://processing.org/reference/PImage.html PImage]'''-Objekt erzeugen, das unser Bild aufnimmt. In der ''setup()''-Methode laden wir das Bild mit der Methode '''[https://processing.org/reference/loadImage_.html loadImage]''' und fügen es in der ''draw()''-Funktion mit der Methode '''[https://processing.org/reference/image_.html image]''' ein. Vorbereitend müssen wir allerdings im betreffenden Sketchordner einen Unterordner names '''"data"''' anlegen und dort unser betreffendes Bild abspeichern.


			[[Datei:proc_gfunc_14.JPG]]



			Beispiel:
			<syntaxhighlight lang="java">
			PImage photo;

			void setup(){
			size(400, 300);
			photo = LoadImage("meinPhoto.jpg");
			}

			void draw(){
			image(photo, 0, 0);
			}
			</syntaxhighlight>




			[[Datei:proc_gfunc_15.JPG]]

2015-10-05T07:28:12Z

Interaktion

2015-10-05T07:27:21Z

← Nächstältere Version		Version vom 5. Oktober 2015, 07:27 Uhr
Zeile 409:		Zeile 409:
	</syntaxhighlight>		</syntaxhighlight>
	</popup>		</popup>

			'''Aufgabe 7'''

			Die obige Methode zum Zeichnen eignet sich auch für die Herausforderung des [http://thevirtualinstructor.com/continuous-line-drawing.html Continuous Line Drawing].
	</div>		</div>

2015-10-05T06:40:59Z

← Nächstältere Version		Version vom 5. Oktober 2015, 06:40 Uhr
Zeile 236:		Zeile 236:

	Erstelle eine ''Processing-Gemälde'' im Stil des russischen Künstlers '''Wassily Kandinsky''' (1866 - 1944). ([https://de.wikipedia.org/wiki/Wassily_Kandinsky#/media/File:Vassily_Kandinsky,_1923_-_Composition_8,_huile_sur_toile,_140_cm_x_201_cm,_Mus%C3%A9e_Guggenheim,_New_York.jpg Beispiel])		Erstelle eine ''Processing-Gemälde'' im Stil des russischen Künstlers '''Wassily Kandinsky''' (1866 - 1944). ([https://de.wikipedia.org/wiki/Wassily_Kandinsky#/media/File:Vassily_Kandinsky,_1923_-_Composition_8,_huile_sur_toile,_140_cm_x_201_cm,_Mus%C3%A9e_Guggenheim,_New_York.jpg Beispiel])

			[http://www.openprocessing.org/browse/?viewBy=tags&tag=kandinsky Beispiele für eine professionelle Umsetzung]
	</div>		</div>

2015-09-28T07:02:55Z

Füllfarben