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
/
P5js Functions (de)

P5js Functions (de)

Jul 30, 2021

Funktionen sind ein elementarer Bestandteil von Programmiersprachen. Mit ihnen lassen sich Programme vereinfachen und überschaubar darstellen(Modularisierung).
Vereinfacht(und leider nicht ganz richtig) könnte man sagen:

Funktionen sind wie ein Macro->Textblock die den Inhalt der Funktion an die Stelle eingefügt, wo der Funktionsnamen steht.

Bei genauerer Sichtweise sind Funktionen Sprünge im Programm. Das Programm springt bei einem Funktionsaufruf an die Stelle wo die Funktion steht und springt nach dem Ausführen der Funktion wieder zurück.

Syntax von Funktionen

Es gibt zwei Zustände einer Funktion. Zum einen ist die Funktions-Deklaration, wo bestimmt wird wie die Funktion heisst und was sie macht, quasi die Blaupause. Zum anderen der Funktions-Aufruf, wo die Funktion dann tatsächlich ausgeführt wird.

Funktions-Deklaration

Hier wird bestimmt wie die Funktion heisst und was sie macht.

[Rückgabe Typ] Funktionsname([Parameter,...])
{
[Funktions Inhalt] [Eventueller Rückgabewert]
}

Funktions-Aufruf

Hier wird eine Funktion aufgerufen.

...
Funktionsname([Parameter,...]);
...

Dieses Beispiel zeigt, wie Funktionen zum Erstellen lesbarer und einfacher Blöcke verwendet werden (Modularisierung).

void setup()
{
  size(500,300);
  stroke(255);
  strokeWeight(3);
  noFill();
}
  
void draw()
{
  background(0);
  smiley(100,height/2);
  smiley(250,height/2);
  smiley(400,height/2);
}
  
 
void smiley(int x, int y)
{
  println("smiley");
  ellipse(x,y,100,100);  // head
   
  ellipse(x - 20,y - 10,10,15);  // left eye
  ellipse(x + 20,y - 10,10,15);  // right eye
    
  arc(x,y,60,60,radians(20),radians(180-20));  // mouth
}
Und hier ist unser erstes interaktives Programm:
void setup()
{
size(300,300);
background(0);
}
 
void draw()
{}
 
void mousePressed()
{
println("x:"+ mouseX +", y:"+ mouseY);
}

Exercise 4

Schreibt eine Skizze, in der eine eindeutige Form der Mausposition folgt. Wenn du mit der Maus klickst, sollte sich die Form in irgendeiner Weise ändern (Form, Farbe, Grösse).

, multiple selections available,
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
    • p5.js Introduction
    • p5.js Variables
    • p5.js Random Numbers
    • p5.js SVG + Images
    • p5.js WebGL
    • p5.js Classes and Objects
    • p5.js Events and Functions
      • P5js Functions (de)
    • p5.js Loops
    • p5.js Coordinates
    • P5js Nested Loops
    • p5.js Animation Exercise 1
    • p5.js Animation Exercise 2
    • p5.js Conditionals
    • p5.js Arrays and Lists
    • p5.js Simple Collision Detection
    • p5.js Reactors
    • p5.js Tiling and Repetition
    • p5.js Vectors
    • p5.js Animation Solution with Objects
    • p5.js Easing
    • p5.js Perlin Noise
    • p5.js Particle System
    • p5.js Sound
    • p5j.s Typography
    • P5js Archive
  • Programming in Processing (java)

{"serverDuration": 14, "requestCorrelationId": "7662d3c3800d49f3b418b741415f1342"}