Chat GPT Experiment 3: Planet Around A Sun — Orbital Dynamics
5 min readFeb 1, 2023
For this week’s experiment I tried using Chat GTP to simulate orbital dynamics!
So this was harder for chat GPT because I seemed to run up against the limit of complexity for what it was willing to be tasked to do. Or if not harder, maybe my “prompt journey” wasn’t optimal. The video is at the end of the article!
Here is the approximate list of successful prompts I provided it. It usually takes several trial and error inputs to get your output correct, but luckily chat GPT tried to build on each prompt and and got a little closer to my expectation each time:
***************
Create a 3D simulation in Java script of a planet rotating around
a star a fixed distance from the star. Use a glowing sphere with
some particle effects for the sun, and apply an earth like texture
to the planet
***************
instead of using texture files, please
algorithmically generate the starfield background
and the earth texture
***************
thanks can you also put the camera and an angle on all axes
so we can view the planet and sun at an angle. also can
you reduce the maximal size of the the stars in
the starfield background, and give them some more slight color variation
***************
please zoom out farther from the planet and star, and
place the camera at 3d perspective view pointed at the objects
at a point equidistant on all 3 axes.
Also add more faces to the earth sphere and
increase the complexity of the earth texture.
increase the distance of the planet from the star by
a much larger amount. Also add a complex algorithmically
generated texture to the central star similar to the texture of the sun
*********************
thanks can you also put the camera and an angle on
all axes so we can view the planet and sun at an angle.
also can you reduce the maximal size of the the stars
in the starfield background, and give them some more slight color variationEventually after the following ask, it was too taxing for its distributed A.I. “brain” to handle and only part of the code was generated, so I didn’t include it. But it looked really promising!
Me -> please add all the code. also please add to the code the ability
to click and drag the planet farther out and into a larger orbit.
please make the sun opaque and a lot more varied in texture.
Please also have it such that when you click any of the celestial
objects it will place a label above the object that moves with object,
and when you select a different object or click on the same object,
it's label dissappears if visible
......
Response -> I'm sorry, but due to the length and complexity of the code
required to complete the task you requested, it is not feasible
to include it all in this text box. I suggest you consider
looking into Three.js tutorials and examples to learn how
to create a 3D simulation in HTML with JavaScript.
You can also consult the Three.js documentation
for detailed information on how to use the library
to achieve specific effects, such as adding labels and interactivity.Despite eventually sputtering out, it produced something comprehensible. Video is at the end of the post.
The end components:
- A star
- A planet with an attempted to be algorithmically generated earth like texture
- A nice looking randomly generated starfield with a background illumination giving the appearance of a real-ish sector of space.
The final javascript code is such. I’m sure if I asked to do it in Unity it could do something more complex, or generate the code in a different more piecemeal way. Either way, I think this is a satisfactory start to something more realistic.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/three@0.120.1/build/three.js"></script>
</head>
<body>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// create a planet system with sun and planet
var planetSystem = new THREE.Object3D();
scene.add(planetSystem);
// create a sun and add it to the planet system
var sunGeometry = new THREE.SphereGeometry(10, 32, 32);
var sunMaterial = new THREE.MeshBasicMaterial({
map: new THREE.CanvasTexture(generateSunTexture()),
transparent: true,
blending: THREE.AdditiveBlending
});
var sun = new THREE.Mesh(sunGeometry, sunMaterial);
sun.position.set(0, 0, 0);
planetSystem.add(sun);
// create a planet and add it to the planet system
var planetGeometry = new THREE.SphereGeometry(3, 32, 32);
var planetMaterial = new THREE.MeshBasicMaterial({
map: new THREE.CanvasTexture(generateEarthTexture()),
transparent: true,
blending: THREE.AdditiveBlending
});
var planet = new THREE.Mesh(planetGeometry, planetMaterial);
planet.position.set(20, 0, 0);
planetSystem.add(planet);
// function to generate the starfield background
function generateStarField() {
canvas = document.createElement('canvas');
canvas.width = 2048;
canvas.height = 1024;
var context = canvas.getContext('2d');
var gradient = context.createRadialGradient(1024, 512, 0, 1024, 512, 1024);
gradient.addColorStop(0, '#fff');
gradient.addColorStop(1, '#000');
context.fillStyle = gradient;
context.fillRect(0, 0, 2048, 1024);
for (var i = 0; i < 5000; i++) {
var x = Math.random() * 2048;
var y = Math.random() * 1024;
var size = Math.random() * 2;
var color = '#ffffff';
context.fillStyle = color;
context.fillRect(x, y, size, size);
}
return canvas;
}
// function to generate the sun texture
function generateSunTexture() {
var canvas = document.createElement('canvas');
canvas.width = 2048;
canvas.height = 1024;
var context = canvas.getContext('2d');
var gradient = context.createRadialGradient(1024, 512, 0, 1024, 512, 1024);
gradient.addColorStop(0.5, '#ff5e3e');
gradient.addColorStop(1, '#ff1e00');
context.fillStyle = gradient;
context.fillRect(0, 0, 2048, 1024);
return canvas;
}
// function to generate the earth texture
function generateEarthTexture() {
var canvas = document.createElement('canvas');
canvas.width = 2048;
canvas.height = 1024;
var context = canvas.getContext('2d');
var gradient = context.createLinearGradient(0, 0, 0, 1024);
gradient.addColorStop(0, '#0077be');
gradient.addColorStop(0.5, '#33cc33');
gradient.addColorStop(1, '#ffffff');
context.fillStyle = gradient;
context.fillRect(0, 0, 2048, 1024);
return canvas;
}
// add starfield background to the scene
var starFieldMaterial = new THREE.MeshBasicMaterial({
map: new THREE.CanvasTexture(generateStarField()),
side: THREE.BackSide
});
var starFieldGeometry = new THREE.SphereGeometry(500, 32, 32);
var starField = new THREE.Mesh(starFieldGeometry, starFieldMaterial);
scene.add(starField);
// move camera away from the planet system and set angle
camera.position.set(50, 50, 50);
camera.lookAt(planetSystem.position);
// render the scene
function animate() {
requestAnimationFrame( animate );
planet.rotation.y += 0.01;
planetSystem.rotation.y += 0.001;
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>
To the intrepid reader, I hope you can use this code to build something much larger and create your own universe simulations.
