7.6 KiB
7.6 KiB
Lektion 1
Fragen:
- Wo ist (0 | 0) im Koorindatensystem bei Processing?
- Was ist bein Befehl?
- Wie ist ein Befehl aufgebaut?
- Was ist der Unterschied zwischen einem Befehl und einer Funktion?
- Welche einfachen Formen kannst du mit Processing zeichnen?
- Gib den Code an, den du benötigst, um eine Linie zu zeichnen, die bei (0|0) startet und bei (25|50) endet.
- Wenn ich zwei Formen an der selben Stelle zeichne und sie sich überlappen, welche Form ist dann die obere? Die ich zuerst gezeichnet habe oder die ich als zweites gezeichnet habe?
- Was legt der Zeichenmodus fest?
- Wie lange gilt der Zeichenmodus, wenn ich einen Zeichenmodus z.B. mihilfe von rectMode() festlege?
-
Gibt den Code an, der nötig ist um ein Rechteck mit folgenden Eigenschaften zu zeichenen:
- Position: P(10, 15)
- Breite: 20
- Höhe: 60
- Modus: CORNER
- Wie hoch und wie breit ist das gezeichnete Rechteck?
- rectMode(CORNERS);
- rect(45, 50, 65, 75);
- Farben und Graustufen werden mithilfe von Zahlen angegeben. Wie groß, dürfen diese Zahlen maximal sein? Was passiert, wenn die Zahl höher ist?
- Macht es es einen Unterschied, an welcher Stelle in meinem Code ich den Befehl background() verwende? Warum?
- Je nachdem, wie viele Zahlen ich z.B. im Befehl fill() angebe, erhalte ich eine andere Art von Farbe. Wie viele unterschiedliche Möglichkeiten habe ich, Zahlen anzugeben und welche Art von Farbe erhalte ich jeweils?
-
In welcher Reihenfolge kann man die 3 Grundfarben einem Befehl background, fill oder stroke übergeben?
- Grün, Rot, Blau
- Gelb, Blau, Rot
- Rot, Gelb, Blau
- Blau, Grün, Rot
- Rot, Grün, Blau
- Wenn ich eine Farbe z.B. mit fill() festlege - wie lange gilt diese Farbe dann? Für immer, solange die gesetzt ist
Aufgaben
Formen
Haus
PVector topleft, topright;
void setup() {
topleft = new PVector(100,150);
topright = new PVector(400-75,150);
size(400, 400);
}
void draw () {
quad(topleft.x, topleft.y,
topright.x, topright.y,
topright.x,350,
topleft.x,350
);
triangle(100,150,
400-75, 150,
200,10
);
}Interaktion
Console gibt MausX aus
Schreibe ein Programm, dass ständig die aktuelle x-Koordinate der Maus auf der Konsole ausgibt. Das sieht z.B. so aus:
void setup() {
size(200, 200);
}
void draw() {
println(mouseX);
}Interaktive Linie
Programmiere eine Linie, deren eines Ende der Maus folgt.
void setup() {
size(200, 200);
}
void draw() {
background(200);
line(100, 100, mouseX, mouseY);
}Wachsendes Quadrat
Programmiere ein Quadrat in der Mitte des Bildschirms, dessen Höhe & Breite den x-Koordinaten der Maus entspricht.
void setup() {
size(200, 200);
}
void draw() {
background(200);
quad(50-mouseX, 50-mouseX, 150+mouseX, 50-mouseX, 150+mouseX, 150+mouseX, 50-mouseX, 150+mouseX);
}Fadenkreuz
Zeichne zwei Linien, die parallel zur x- bzw. y-Achse sind und immer der Maus folgen. Der Schnittpunkt liegt genau auf dem Mauszeiger. Programmiere zunächst eine der beiden Linien, dann wird es dir leicht fallen, die zweite hinzuzufügen.
void setup() {
size(200, 200);
}
void draw() {
background(200);
line(0, mouseY, mouseX, mouseY);
line(mouseX, mouseY, 200, mouseY);
line(mouseX, 0, mouseX, mouseY);
line(mouseX, mouseY, mouseX, 200);
}Linie und Kreis
Zeichne eine Linie, die parallel zur y-Achse verläuft und immer der Maus folgt. Im Bereich zwischen der Linie und dem linken Rand soll mittig ein Kreis gezeichnet werden, der den Bereich zwischen linken Rand und Linie ganz ausfüllt.
void setup() {
size(200, 200);
}
void draw() {
background(200);
// y-line
line(mouseX, 0, mouseX, mouseY);
line(mouseX, mouseY, mouseX, 200);
// kreis
ellipse(mouseX/2, 200/2, mouseX, mouseX);
}Radiergummi
void setup() {
size(200, 200);
background(255);
// Viereck in der mitte
fill(0);
quad(50,50,
150,50,
150,150,
50,150);
}
void draw() {
// Radiergummi
fill(255);
noStroke();
ellipse(mouseX, mouseY, 15, 15);
strokeWeight(1);
}Symmetrische Linie
void setup() {
size(200, 200);
background(255);
}
void draw() {
background(255);
// first line to center
line(mouseX, mouseY,
200/2, 200/2);
// second line from center
line(200/2, 200/2,
100+100-mouseX, 100+100-mouseY);
}Rechte Ecke
void setup() {
size(200, 200);
background(255);
}
void draw() {
background(255);
rectMode(CORNERS);
rect(50, 50,
mouseX, mouseY);
}Position zur Graustufe
unelegant
void setup() {
size(255, 255);
background(255);
}
void draw() {
background(255);
fill(mouseX);
int x = 255/4;
quad(x, x,
255-x, x,
255-x, 255-x,
x, 255-x);
}besser
void setup() {
size(200, 200);
background(255);
}
void draw() {
background(255);
fill(mouseX*255/width);
quad(50, 50,
150, 50,
150, 150,
50, 150);
}Quadrat erscheinen lassen
void setup() {
size(200, 200);
background(255);
}
void draw() {}
void keyPressed() {
quad(50,50,
50,150,
150,150,
150,50);
}
void mousePressed() {
background(255);
}Datentypen
Mausposition ausgeben
void setup(){
size(200, 200);
}
void draw(){
println("x=" + mouseX, "y=" + mouseY);
}Halbe Pixel?
float x = 0;
void draw() {
background(255);
ellipse(x, 50, 30, 30);
x = x + 0.5;
}Zeichenverkettung
String message = "la";
String moreMessage;
void setup() {
println(message);
}
void draw() {
moreMessage = message + moreMessage;
println(moreMessage);
}Syntax und Konventionen
final int speed=3;
final int r = 10;
boolean left1 = true;
boolean left2 = true;
boolean left3 = true;
float x1 = random(50, width-50);
float x2 = random(50, width-50);
float x3 = random(50, width-50);
void setup () {
size(200, 200);
}
// move balls
void moveballs() {
if (x1+r>width) {
left1=true;
}
if (x1-r<0) {
left1=false;
}
if (left1) {
x1-=speed;
} else {
x1+=speed;
}
if (x2+r>width) {
left2=true;
}
if (x2-r<0) {
left2=false;
}
if (left2) {
x2-=speed;
} else {
x2+=speed;
}
if (x3+r>width) {
left3=true;
}
if (x3-r<0) {
left3=false;
}
if (left3) {
x3-=speed;
} else {
x3+=speed;
}
}
void draw() {
background(50);
fill(200, 50, 50);
ellipse(x1, width*0.25, r*2, r*2);
ellipse(x2, width*0.5, r*2, r*2);
ellipse(x3, width*0.75, r*2, r*2);
moveballs();
}Arithmetische Operatoren
Muster
int x = 0;
int y = 0;
void draw() {
line(x, 0, x, y);
x++;
y++;
}