Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
Confluence
For you

Programming
Results will update as you type.
  • Tiling and Repetition
  • Reactors
  • Programming Basics: Parametric and Generative Graphic Design 2016
  • Archive
  • High Scores
  • Artificial Neural Network
  • Alternatives to the Processing IDE
  • p5.js Programming
  • Programming in Processing (java)
    • Starting with Processing (en)
    • Variables (en)
    • Classes and Objects (en)
    • Events und Functions (en)
      • Events und Functions (de)
    • Writing our own Functions (en)
    • Random Numbers (en)
    • Conditionals (en)
    • Loops (en)
    • Nested Loops (en)
    • Coordinates (en)
    • Arrays and Lists (en)
    • SVG + Images (en)
    • Motion and Temporality
    • Gesture Interactions
    • Using bitmaps as modifiers
    • Vectors
    • Animation
    • Animation 2
    • Simple Collision Detection
    • Sound
    • Typography

/
Events und Functions (de)

Events und Functions (de)

Oct 22, 2020

In den vorangegangenen Beispielen haben wir Programme ohne Funktionen geschrieben. Diese Programme waren nicht interaktiv und beinhalten auch keine Animationen. Wie kann man also ein Programm so erweitern, dass zum Beispiel die Tastatur ausgelesen wird ? Die Antwort drauf sind sogenannte Programm-Events, also Ereignisse welche vom Programm erfasst und weitergeleitet werden. Hier eine kurze Liste von solchen Ereignissen:

  • Programmstart
  • Zeichenausgabe auf das Fenster
  • Tastatureingabe
  • Mauseingabe

Diese Ereignisse können abgefangen werden. Hierfür müssen wir nur Funktionen(mit von Processing definierten Namen) schreiben, die bei den jeweiligen Ereignissen automatisch aufgerufen werden.

  • setup -> Programmstart
  • draw -> Zeichenausgabe auf das Fenster
  • keyPressed -> Tastatureingabe
  • mousePressed -> Mauseingabe

Nehmen wir Beispiel 1 und erweitern dies mit den Ereignissen:

int length1 = 0;
int length2 = 0;

void setup() {
  size(300, 300); // define window size
  background(0); // define background colour
  stroke(255, 255, 255); // define line colour
}
void draw() {
  background(0);
  length1 = mouseX;
  length2 = mouseY;
  line(100, 10, 100, length1); // draw a line
  line(150, 10, 150, length2);
  line(200, 10, 200, 250);

  fill(0, 0, 0); // fill colour
  strokeWeight(5); // line thickness
  ellipse(100, length1, 50, 50); // draw an ellipse
  ellipse(150, length2, 50, 50); // draw an ellipse
  noFill(); // turn off fill
  ellipse(200, 250, 50, 50); // draw an ellipse
}


In diesem Programm nutzen wir zwei Funktionen:

  • void setup()
  • void draw()

Diese Funktionen haben keine Parameter und auch keinen Rückgabewert, daher steht an der Stelle des Rückgabe Typs einfach nur ‘void‘. Die Funktionsnamen sind Namen die Processing kennt, daher ruft Processing diese Funktionen auf,  sobald das entsprechende Ereignis eintrifft.

Weitere Funktiosnbeispiel

Diese Beispiel zeigt wie man Funktionen mit Rückgabewerte schreibt.

void setup()
{
  println(addition(1,2));
  println(addition(2,10));
}
 
int addition(int parameter1, int parameter2)
{
  return parameter1 + parameter2;
}


Dies Beispiel zeigt wie man Funktionen nutzen kann um den Code leserlicher und einfacher Gestalten kann(Stichwort Modularisierung).

void setup()
{
  size(300,300);
  smooth();
  stroke(255,255,255);
  noFill();
}
 
void draw()
{
  background(0);
 
  bommel(100,10,140,50);
  bommel(150,10,190,50);
  bommel(200,10,240,50);
}
 
void bommel(int x,int y,int length,int size)
{
  strokeWeight(1);
  line(x,y,x,y+length);
  strokeWeight(5);
  ellipse(x,y+length,size,size);
}


Und hier unser erstes interaktive Programm:

void setup()
{
  size(300,300);
  background(0);
}
 
void draw()
{}
 
void mousePressed()
{
  println("x:" + mouseX + ", y:" + mouseY);
}


Aufgabe

Erstelle ein Programm in welchem ein Kreis dem Mauszeiger folgt



, multiple selections available,
{"serverDuration": 15, "requestCorrelationId": "24bde4a887a548ae9b055dd9c42b5f4d"}