Chat GPT Experiment 2: Physics Simulation
I asked Chat GPT to create a physics simulation of a bunch of Helium molecules moving around in a container and outputting the average temperature over time.
I’ll be honest, as amazing as ChatGPT is at doing a great job of what it was asked to do from a code perspective at least, it’s much more fun because it feels like I’m a scientist of sorts (albeit an armchair one), that’s exploring the depths and boundaries of an ever expanding artificial intelligence. I’m aiming to come out with these articles on a weekly cadence, but I feel that ChatGPT’s power has the potentially to increase even superlinearly if not exponentially from week to week. By the end of the year, I bet it will do my laundry!
The Process
The process took a few iterations to get right, but it seems to have worked. The first prompt I used was:
create a physics simulation in java script of container full of gas molecules. The molecules should be simple diatomic helium gas molecules. Also in addition to collision physics also add corrections for van der wals forces and apply distortion to the mechanics of the molecules based on these forces
To which chat GPT Responded:
While that was super informative, ultimately it didn’t initially produce what I asked. So then demonstrating the marvelous power of A.I. to be adaptable to iterative responses I asked it:
- create a simple 2D demonstration of the above in java script to the level of complexity that you can code
It finally started to output something! But I wanted a few more things so I could call this the proper start of a physics simulation:
- using the mass of the helium nucleus, and the speeds of the gas molecules, have label that outputs the temperature of the box at any instant. Use statistical mechanics to calculate the temperature
And finally:
- update above code to add the label in html below the gas container. To the right of the gas container have a small box that explains the kinetic theory of gases and have the relavent equation below it
The final code after correcting ChatGPT several times and stiching all its outputs together:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
<style>
body {
margin: 0;
}
#temperature {
position: absolute;
bottom: 0;
}
#theory {
position: absolute;
right: 0;
padding: 10px;
background-color: #f2f2f2;
}
</style>
</head>
<body>
<script>
let container;
let molecules = [];
let vdwConstant = 1;
let vdwRadius = 50;
let temperature;
let k = 1.38e-23;
function setup() {
createCanvas(600, 600);
container = new Container(width / 2, height / 2, width / 2 - 50, height / 2 - 50);
for (let i = 0; i < 100; i++) {
molecules.push(new Molecule(random(width), random(height), random(-2, 2), random(-2, 2)));
}
}
function draw() {
background(255);
container.display();
updateTemperature();
for (let i = 0; i < molecules.length; i++) {
let m1 = molecules[i];
m1.collide(container);
m1.update();
m1.display();
for (let j = i + 1; j < molecules.length; j++) {
let m2 = molecules[j];
let distance = dist(m1.x, m1.y, m2.x, m2.y);
if (distance < vdwRadius) {
let force = vdwConstant / (distance * distance);
let angle = atan2(m2.y - m1.y, m2.x - m1.x);
m1.applyForce(force, angle);
m2.applyForce(force, angle + PI);
}
}
}
}
function updateTemperature(){
let kineticEnergy = 0;
for (let i = 0; i < molecules.length; i++) {
let m = molecules[i];
kineticEnergy += 0.5 * m.mass * (m.vx * m.vx + m.vy * m.vy);
}
temperature = 2 * kineticEnergy / (molecules.length * k);
console.log("Temperature: " + temperature);
document.getElementById("temperature").innerHTML = "Temperature: " + temperature;
}
</script>
<div id="temperature"></div>
<div id="theory">
<p>Kinetic theory of gases:</p>
<p>The average kinetic energy of a gas molecule is directly proportional to the temperature of the gas.</p>
<p>T = 2 * kineticEnergy / (N * k)</p>
</div>
</body>
<script>
class Container {
constructor(x, y, w, h) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
display() {
stroke(0);
noFill();
rectMode(CENTER);
rect(this.x, this.y, this.w * 2, this.h * 2);
}
}
class Molecule {
constructor(x, y, vx, vy) {
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.mass = 4;
this.radius = 2;
}
display() {
stroke(0);
fill(0);
ellipse(this.x, this.y, this.radius * 2, this.radius * 2);
}
update() {
this.x += this.vx;
this.y += this.vy;
}
collide(container) {
if (this.x + this.radius > container.x + container.w) {
this.vx *= -1;
this.x = container.x + container.w - this.radius;
} else if (this.x - this.radius < container.x - container.w) {
this.vx *= -1;
this.x = container.x - container.w + this.radius;
}
if (this.y + this.radius > container.y + container.h) {
this.vy *= -1;
this.y = container.y + container.h - this.radius;
} else if (this.y - this.radius < container.y - container.h) {
this.vy *= -1;
this.y = container.y - container.h + this.radius;
}
}
applyForce(force, angle) {
this.vx += force * cos(angle) / this.mass;
this.vy += force * sin(angle) / this.mass;
}
}
</script>
</html>And the video of the final result. Pretty amazing! I can’t wait to see what more involved simulations I can use this to create after some coaxing!
