human
Schreibe mit ein p5.js Skript, das viele unterschiedliche farbige Formen animiert und Mausinteraktion integriert.
gpt
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));
    }
  }
} ```
human
Kannst du das Skript so modifizieren dass sich die verschiedenen Formen auch drehen wenn man sie anclickt?
gpt
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);
  }
}
```