Zum Inhalt springen

Spielerei im Raum mit Bewegung 1

Bewertung

Was:

Jedes Element hat eine Linie gleicher Farbe zum nächsten Element. Die Elemente bewegen sich.

Wie:

Hier habe ich mich mit dem Chatbot darum gekümmert, dass diese kleinen Wesen sich in der Box wild herumtreiben, so dass die Linien zwischen ihnen immer passen. Es hat viel Spaß gemacht, und am Ende hatten wir nicht nur etwas, das funktioniert, sondern auch ziemlich cool aussieht. Das war ein wenig wie das Spiel "Stille Post", aber im digitalen Raum.

Geholfen hat mir bei dem Projekt: https://chat.deepseek.com/coder

Warum:

Es war zu sehen, wie meine Ideen Schritt für Schritt in die Realität umgesetzt wurden und wie das Endergebnis nicht nur funktionell war, sondern auch eine nette optische Show bot. Das hat mir gezeigt, dass gute Zusammenarbeit nicht nur dazu führt, dass die Arbeit schneller und effizienter erledigt wird, sondern auch dass sie das Endergebnis auf eine Weise bereichert, die man vielleicht gar nicht von Anfang an erwartet hatte.

- zum code ausklappen hier klicken -

<div id="canvas"></div>

<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>

<script>
  // Funktion zur Generierung einer zufälligen ganzen Zahl zwischen min und max (einschließlich)
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  // Funktion zur Auswahl eines zufälligen Elements aus einem Array
  function getRandomElement(array) {
    return array[Math.floor(Math.random() * array.length)];
  }

  // 3D-Welt-Dimensionen
  var worldDimension = 80;

  // Array für die 500 Wesen
  var wesenArray = [];

  // Mögliche Geometrien
  //var geometries = ["Punkt", "Würfel", "Kugel", "Stern"];
  var geometries = ["Würfel", "Kugel", "Stern"];

  // Schleife zur Erzeugung der Wesen
  for (var i = 0; i < 1000; i++) {
    // Zufällige Position innerhalb der 3D-Welt generieren
    var randomX = getRandomInt(-worldDimension / 2, worldDimension / 2);
    var randomY = getRandomInt(-worldDimension / 2, worldDimension / 2);
    var randomZ = getRandomInt(-worldDimension / 2, worldDimension / 2);

    // Zufällige Farbe generieren
    var randomColor = new THREE.Color(Math.random(), Math.random(), Math.random());

    // Zufällige Geometrie auswählen
    var randomGeometry = getRandomElement(geometries);

    // Geometrie und Material erstellen
    var object3D;
    if (randomGeometry === "Punkt") {
      var geometry = new THREE.BufferGeometry();
      var vertices = new Float32Array(1 * 3); // 1 Punkt mit 3 Koordinaten (x, y, z)
      geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
      var material = new THREE.PointsMaterial({ color: randomColor });
      object3D = new THREE.Points(geometry, material);
    } else if (randomGeometry === "Würfel") {
      var geometry = new THREE.BoxGeometry(1, 1, 1);
      var material = new THREE.MeshLambertMaterial({ color: randomColor });
      object3D = new THREE.Mesh(geometry, material);
    } else if (randomGeometry === "Kugel") {
      var geometry = new THREE.SphereGeometry(0.5, 32, 32);
      var material = new THREE.MeshLambertMaterial({ color: randomColor });
      object3D = new THREE.Mesh(geometry, material);
    } else if (randomGeometry === "Stern") {
      var geometry = new THREE.SphereGeometry(0.5, 4, 2);
      var material = new THREE.MeshLambertMaterial({ color: randomColor });
      object3D = new THREE.Mesh(geometry, material);
    }

    // Setzen der Position des Wesens
    object3D.position.set(randomX, randomY, randomZ);

    // Zufällige Geschwindigkeit für das Wesen
    object3D.velocity = new THREE.Vector3(
      2 * Math.random() * 0.1 - 0.05,
      2 * Math.random() * 0.1 - 0.05,
      2 * Math.random() * 0.1 - 0.05
    );

    // Hinzufügen des Wesens zur Array
    wesenArray.push(object3D);
  }

  // Erstellen der Szene, Kamera und Renderer
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  var renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById('canvas').appendChild(renderer.domElement);

  // Element für den Canvas
  var canvasElement = document.getElementById('canvas');

  // Funktion zum Anpassen der Canvas-Größe an das umgebende DOM-Element
  function adjustCanvasSize() {
    var contentWrap = document.querySelector('.nv-content-wrap.entry-content');
    var width = contentWrap.clientWidth;
    var height = contentWrap.clientHeight;
    renderer.setSize(width * 0.9, width * 0.9);
    camera.aspect = 1;
    camera.updateProjectionMatrix();
  }

  // Anfangsgröße anpassen
  adjustCanvasSize();

  // Event Listener hinzufügen, um die Größe bei Änderungen des umgebenden DOM-Elements anzupassen
  window.addEventListener('resize', adjustCanvasSize);

  // Erstellen der Lichtquelle
  var light = new THREE.PointLight(0xffffff, 1, 10000);
  light.position.set(0, 200, 100);
  scene.add(light);
  var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambientLight);

  // Hinzufügen der Wesen zur Szene
  wesenArray.forEach(function (wesen) {
    scene.add(wesen);
  });

  // Array für die Linien
  var linesArray = [];

  // Funktion zum Zeichnen von Linien zwischen den Wesen
  function drawLinesBetweenNeighbors() {
    // Schleife über alle Wesen im Array
    for (var i = 0; i < wesenArray.length; i++) {
      var currentWesen = wesenArray[i];
      var currentPos = currentWesen.position;

      // Suche nach dem nächsten Nachbarn
      var minSquaredDistance = Infinity;
      var nearestNeighbor;

      for (var j = 0; j < wesenArray.length; j++) {
        if (i !== j) {
          var neighborWesen = wesenArray[j];
          var neighborPos = neighborWesen.position;
          var squaredDist = squaredDistance(currentPos, neighborPos);

          if (squaredDist < minSquaredDistance) {
            minSquaredDistance = squaredDist;
            nearestNeighbor = neighborPos;
          }
        }
      }

      // Überprüfen, ob eine Linie für dieses Wesen bereits existiert
      if (!linesArray[i]) {
        // Wenn nicht, erstellen wir eine neue Linie
        var lineGeometry = new THREE.BufferGeometry().setFromPoints([currentPos, nearestNeighbor]);
        var lineMaterial = new THREE.LineBasicMaterial({ color: currentWesen.material.color });
        var line = new THREE.Line(lineGeometry, lineMaterial);
        linesArray[i] = line;
        scene.add(line);
      } else {
        // Wenn ja, aktualisieren wir die Positionen der Linie
        linesArray[i].geometry.setFromPoints([currentPos, nearestNeighbor]);
        linesArray[i].material.color = currentWesen.material.color;
      }
    }
  }

  // Hinzufügen der Orbit Controls für die bewegliche Kamera
  var controls = new THREE.OrbitControls(camera, renderer.domElement);

  // Setzen der Kamera-Position
  camera.position.set(0, 0, worldDimension);

  function animate() {
    requestAnimationFrame(animate);

    randomizePositions();
    drawLinesBetweenNeighbors();

    controls.update();
    renderer.render(scene, camera);
  }

  // Animation starten
  animate();

  function randomizePositions() {
    // Schleife über alle Wesen im Array
    for (var i = 0; i < wesenArray.length; i++) {
      var currentWesen = wesenArray[i];

      // Bewegung basierend auf der Geschwindigkeit
      currentWesen.position.x += currentWesen.velocity.x;
      currentWesen.position.y += currentWesen.velocity.y;
      currentWesen.position.z += currentWesen.velocity.z;

      // Prüfen auf Kollision mit den Wänden und Umkehr der Geschwindigkeit bei Kollision
      if (currentWesen.position.x > worldDimension / 2 || currentWesen.position.x < -worldDimension / 2) {
        currentWesen.velocity.x = -currentWesen.velocity.x;
      }
      if (currentWesen.position.y > worldDimension / 2 || currentWesen.position.y < -worldDimension / 2) {
        currentWesen.velocity.y = -currentWesen.velocity.y;
      }
      if (currentWesen.position.z > worldDimension / 2 || currentWesen.position.z < -worldDimension / 2) {
        currentWesen.velocity.z = -currentWesen.velocity.z;
      }

      // Sicherstellen, dass die Wesen innerhalb der Box bleiben
      currentWesen.position.x = Math.max(-worldDimension / 2, Math.min(worldDimension / 2, currentWesen.position.x));
      currentWesen.position.y = Math.max(-worldDimension / 2, Math.min(worldDimension / 2, currentWesen.position.y));
      currentWesen.position.z = Math.max(-worldDimension / 2, Math.min(worldDimension / 2, currentWesen.position.z));
    }
  }

  function squaredDistance(vector1, vector2) {
    var dx = vector1.x - vector2.x;
    var dy = vector1.y - vector2.y;
    var dz = vector1.z - vector2.z;
    return dx * dx + dy * dy + dz * dz;
  }
</script>

Schreibe einen Kommentar