<|im_start|>user
Schreibe mit ein p5.js Skript, das viele unterschiedliche farbige Formen animiert und Mausinteraktion integriert.<|im_end|>
<|im_start|>assistant
Hier ist ein p5.js Skript, dass Kreise, Dreiecke, Vierecke und Fünfecke zufällig bewegt und deren Farbe wechselt, wenn man sie anklickt:
```      // Initialisierung der Variablen
let shapes = [];
let numShapes = 50;

// Initialisierung der Funktionen
function setup() {
  createCanvas(400, 400);
  noStroke();
  for (let i = 0; i < numShapes; i++) {
    shapes.push(new Shape(random(width), random(height), random(20, 50), random(2, 5)));
  }
}

function draw() {
  background(220);
  for (let i = 0; i < shapes.length; i++) {
    shapes[i].move();
    shapes[i].display();
  }
}

function mouseClicked() {
  for (let i = 0; i < shapes.length; i++) {
    shapes[i].clicked(mouseX, mouseY);
  }
}

// Shape-Klasse
class Shape {
  constructor(x, y, size, speed) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.speed = speed;
    this.color = color(random(255), random(255), random(255));
    this.shapeType = int(random(4)); // Zufällige Auswahl einer Form (0 = Kreis, 1 = Dreieck, 2 = Viereck, 3 = Fünfeck)
    this.rotation = random(0, TWO_PI); // Zufällige Rotation
  }
  
  move() {
    this.x += random(-this.speed, this.speed);
    this.y += random(-this.speed, this.speed);
    this.x = constrain(this.x, 0, width);
    this.y = constrain(this.y, 0, height);
  }
  
  display() {
    push(); // Push-Matrix, um Koordinatensystem zu speichern
    translate(this.x, this.y); // Verschieben des Koordinatensystems zum Mittelpunkt der Form
    rotate(this.rotation); // Rotieren des Koordinatensystems um die zufällige Rotation
    fill(this.color);
    
    // Erstellung der Form basierend auf this.shapeType
    switch (this.shapeType) {
      case 0:
        ellipse(0, 0, this.size, this.size);
        break;
      case 1:
        triangle(-this.size/2, this.size/2, 0, -this.size/2, this.size/2, this.size/2);
        break;
      case 2:
        rectMode(CENTER);
        rect(0, 0, this.size, this.size);
        break;
      case 3:
        beginShape();
        for (let i = 0; i < 5; i++) {
          let angle = map(i, 0, 5, 0, TWO_PI);
          let x = this.size/2 * cos(angle);
          let y = this.size/2 * sin(angle);
          vertex(x, y);
        }
        endShape(CLOSE);
        break;
    }
    
    pop(); // Pop-Matrix, um das Koordinatensystem wiederherzustellen
  }
  
  clicked(mouseX, mouseY) {
    let d = dist(mouseX, mouseY, this.x, this.y);
    if (d < this.size / 2) {
      this.color = color(random(255), random(255), random(255));
    }
  }
} ```<|im_end|>
<|im_start|>user
Kannst du das Skript so modifizieren dass sich die verschiedenen Formen auch drehen wenn man sie anclickt?<|im_end|>
<|im_start|>assistant
Hier ist das Skript so modifiziert, dass sich die Formen drehen, wenn man sie anklickt:

```javascript
let shapes = [];
let numShapes = 50;

// Initialisierung der Funktionen
function setup() {
  createCanvas(400, 400);
  noStroke();
  for (let i = 0; i < numShapes; i++) {
    shapes.push(new Shape(random(width), random(height), random(20, 50), random(2, 5)));
  }
}

function draw() {
  background(220);
  for (let i = 0; i < shapes.length; i++) {
    shapes[i].move();
    shapes[i].display();
  }
}

function mouseClicked() {
  for (let i = 0; i < shapes.length; i++) {
    if (shapes[i].clicked(mouseX, mouseY)) {
      shapes[i].rotate();
    }
  }
}

// Shape-Klasse
class Shape {
  constructor(x, y, size, speed) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.speed = speed;
    this.color = color(random(255), random(255), random(255));
    this.shapeType = int(random(4)); // Zufällige Auswahl einer Form (0 = Kreis, 1 = Dreieck, 2 = Viereck, 3 = Fünfeck)
    this.rotation = random(0, TWO_PI); // Zufällige Rotation
  }
  
  move() {
    this.x += random(-this.speed, this.speed);
    this.y += random(-this.speed, this.speed);
    this.x = constrain(this.x, 0, width);
    this.y = constrain(this.y, 0, height);
  }
  
  display() {
    push(); // Push-Matrix, um Koordinatensystem zu speichern
    translate(this.x, this.y); // Verschieben des Koordinatensystems zum Mittelpunkt der Form
    rotate(this.rotation); // Rotieren des Koordinatensystems um die zufällige Rotation
    fill(this.color);
    
    // Erstellung der Form basierend auf this.shapeType
    switch (this.shapeType) {
      case 0:
        ellipse(0, 0, this.size, this.size);
        break;
      case 1:
        triangle(-this.size/2, this.size/2, 0, -this.size/2, this.size/2, this.size/2);
        break;
      case 2:
        rectMode(CENTER);
        rect(0, 0, this.size, this.size);
        break;
      case 3:
        beginShape();
        for (let i = 0; i < 5; i++) {
          let angle = map(i, 0, 5, 0, TWO_PI);
          let x = this.size/2 * cos(angle);
          let y = this.size/2 * sin(angle);
          vertex(x, y);
        }
        endShape(CLOSE);
        break;
    }
    
    pop(); // Pop-Matrix, um das Koordinatensystem wiederherzustellen
  }
  
  clicked(mouseX, mouseY) {
    let d = dist(mouseX, mouseY, this.x, this.y);
    if (d < this.size / 2) {
      return true;
    }
    return false;
  }
  
  rotate() {
    this.rotation += random(-PI/4, PI/4);
  }
}
```<|im_end|>
