Was passiert hier...
Eine kleine Übung für Kommendes.
Programmiert mit Unterstützung von ChatGpt.
Aber auch hübsch. Viel Spass beim betrachten!
Drei Zufällige Formen.
Zufällig verteilte Körper.
Jeder Körper zeichnet eine Linie zu dem Ihm am nächsten Nachbarn.
Fertig. 😉
Fortsetzung: https://www.irrbert.de/spielerei-im-raum-2/
Der code ...
<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);
// 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);
});
function randomizePositions() {
// Schleife über alle Wesen im Array
for (var i = 0; i < wesenArray.length; i++) {
var currentWesen = wesenArray[i];
// Prüfen, ob das Wesen die Geometrie "Kugel" hat
if (currentWesen.geometries === "Kugel") {
// Zufällige Änderung der Position um 1
currentWesen.position.x += Math.random() * 2 - 1;
currentWesen.position.y += Math.random() * 2 - 1;
currentWesen.position.z += Math.random() * 2 - 1;
}
}
}
// Funktion zum Entfernen der Linien aus der Szene
function removeLines() {
// Schleife über alle Objekte in der Szene
scene.traverse(function (object) {
// Prüfen, ob das Objekt eine Linie ist
if (object instanceof THREE.Line) {
// Entfernen der Linie aus der Szene
scene.remove(object);
}
});
}
// 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 minDistance = Infinity;
var nearestNeighbor;
for (var j = 0; j < wesenArray.length; j++) {
if (i !== j) {
var neighborWesen = wesenArray[j];
var neighborPos = neighborWesen.position;
var distance = currentPos.distanceTo(neighborPos);
if (distance < minDistance) {
minDistance = distance;
nearestNeighbor = neighborPos;
}
}
}
// Zeichnen der Linie zwischen den beiden Positionen
var lineGeometry = new THREE.BufferGeometry().setFromPoints([currentPos, nearestNeighbor]);
var lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
var line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);
}
}
drawLinesBetweenNeighbors();
//removeLines();
// 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);
// Funktion für die Animationsschleife
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
// Animation starten
animate();
</script>
Man sieht hier deutlich eine nervige Eigenschaft von GPT:
Wenn man ein komplettes script verwendet, ändert GPT manchmal die Logik, die Bezeichner oder die Struktur von code-teilen, die man eigentlich behalten wollte.
In diesem Fall:
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);
GPT benutzt hier three.js-Sachen (THREE.BufferAttribute) die ich nicht in meinem ursprünglichem Objekt hatte.
Im Teststadium präsentiert sich alles scheinbar in Ordnung. Jedoch, wenn man anschließend darangeht und Änderungen am eigenen Code vornehmen möchte, wird festgestellt, dass sich alles grundlegend verändert hat. Dies erweist sich als äußerst ärgerlich, insbesondere dann, wenn der Code funktioniert hat und man gezwungen ist, ihn rückgängig zu machen, um den ursprünglichen Code beizubehalten. Aus diesem Grund beabsichtige ich, nachdem das Grundgerüst nun steht (siehe oben), den Code aufzuteilen und GPT ausschließlich mit Einzelfunktionen zu beschäftigen. Auf diese Weise ist es nicht notwendig, alles wieder niederzureißen, wofür man sich bereits festgelegt hat.
Zusammenfassend lässt sich festhalten: Geben Sie GPT stets nur so viel Einblick in Ihren Code, wie unbedingt erforderlich. Gewährt man ihm zu viele Informationen ("Einblick"), beispielsweise ein Formular, versucht GPT, all das zu berücksichtigen. Es gestaltet sich schwierig, ihm dies abzugewöhnen, daher ist es ratsam, die Informationen zu reduzieren.