Skip to content
The Chat Archive
Human-written demonstration (OpenAssistant volunteers)· OpenAssistant (human-written) OpenAssistant Conversations (oasst2)

Schreibe mit ein p5.js Skript, das viele unterschiedliche farbige Formen animiert und…

In OpenAssistant data, “assistant” turns were written by human volunteers as demonstrations. They are not model outputs.
  1. User

    Schreibe mit ein p5.js Skript, das viele unterschiedliche farbige Formen animiert und Mausinteraktion integriert.

  2. Assistant

    Klar, hier ist ein Beispiel-Skript in p5.js, das viele unterschiedliche farbige Formen animiert und Mausinteraktion integriert:

    // Initialisierung des Sketches
    function setup() {
      createCanvas(windowWidth, windowHeight);
    }
    
    // Array von Objekten, die animiert werden sollen
    let shapes = [];
    let numShapes = 100;
    
    // Erstellt eine zufällige Form und fügt sie dem Array hinzu
    function addShape() {
      let shape = {};
      shape.x = random(width);
      shape.y = random(height);
      shape.size = random(10, 50);
      shape.color = color(random(255), random(255), random(255));
      shape.speedX = random(-5, 5);
      shape.speedY = random(-5, 5);
      shapes.push(shape);
    }
    
    // Führt eine Animationsschleife aus
    function draw() {
      background(255);
    
      // Schleife durch alle Formen und aktualisiere ihre Position
      for (let i = 0; i < shapes.length; i++) {
        let shape = shapes[i];
        shape.x += shape.speedX;
        shape.y += shape.speedY;
    
        // Überprüfe, ob die Form die Grenzen des Bildschirms erreicht hat
        if (shape.x < 0 || shape.x > width) {
          shape.speedX *= -1;
        }
        if (shape.y < 0 || shape.y > height) {
          shape.speedY *= -1;
        }
    
        // Zeichne die Form
        fill(shape.color);
        ellipse(shape.x, shape.y, shape.size, shape.size);
      }
    }
    
    // Fügt eine neue Form hinzu, wenn die Maus geklickt wird
    function mouseClicked() {
      addShape();
    }
    
    // Ändert die Farbe aller Formen, wenn die Maus über das Fenster bewegt wird
    function mouseMoved() {
      for (let i = 0; i < shapes.length; i++) {
        let shape = shapes[i];
        shape.color = color(random(255), random(255), random(255));
      }
    }
    

    Dieses Skript erstellt eine zufällige Anzahl von Formen und animiert sie auf dem Bildschirm. Wenn die Maus geklickt wird, wird eine neue Form hinzugefügt. Wenn die Maus über das Fenster bewegt wird, ändert sich die Farbe aller Formen zufällig. Natürlich können Sie die Anzahl, die Größe und das Aussehen der Formen nach Belieben anpassen und Ihre eigenen Interaktionen hinzufügen.

  3. User

    Ändere die Anzahl der Formen von 100 auf 1000. Erläutere welchen Einfluss die Änderung auf die Laufzeit des Programms hat: