3f:null 40:["$","title",null,{"children":"The kinetic theory of gases | Sam Verstraete | Observable"}] 46:T47a,md` ## Introduction The kinetic theory of gases is a theory in physics that explains macroscopic properties of gases starting from what they are at the microscopic level - colliding molecules. A good intro to the theory can be found on wikipedia [here](https://en.wikipedia.org/wiki/Kinetic_theory_of_gases). Despite its basic assumptions, the theory is heavy on statistics and gets complicated quickly. I was wondering if some of the non-trivial results of that theory could be obtained by making a simulation of the colliding molecules. For the time being we keep all the sizes dimensionless. The particles that have size 'one' could be one meter or one nano-meter. Later on we will fill in some real dimensions to get a feeling for the scale of the simulation. To get an idea of the order of magnitude involved for molecules: the Van der Waals radius for oxygen gas (O2) is about 0.2 nanometer, while the speed of a typical molecule at room temperature is around 500 m/s - yes, meters per second. The simulation is based on Three.js and d3.js - all other classes are defined in the notebook, in the section *classes used in this notebook* `47:T5ff,{ // simple object to get elapsed time in seconds let chrono = new chronoClass() // loop forever while (true) { // don't waste time if invisible await visibility(); // get the interval let interval = chrono.getInterval() // reset the collisions array and the octree collisions.resetList() octree.reset() // for each object in the object group for (let group of [group1, group2]) { const nP = group.particles.length let particle=null for (let i=0; i < nP; i++) { // simplify notation particle = group.particles[i] // calculate the new position of the particle particle.newPosition(interval) // the collison detector - returns false if the moving objects aabb is not in the toplevel octant // and thus collides with the container walls in that interval if ( ! octree.collisionCheck(particle, interval, collisions)) container.collisionCheck(particle, interval, collisions) } } // Now we have an array of objects that collide - but we still have to calculate the actual collisions collisions.collide(interval) // now we set the matrix that corresponds to the position of each particle for (let group of [group1, group2]) { // update the position of the particles in the scene group.placeParticlesInScene(studio.scene) } // render studio.renderer.render(studio.scene, studio.camera) //..and yield yield(studio.renderer.domElement) } }48:T4b0,viewof chartParam = (function legend() { const space = " " const form = html` ` form.oninput=() => { form.value=[ form.distri.value, form.col1.value, form.col2.value, form.col3.value ] } form.oninput() return form })()49:T809,speedChart = { chartSVG invalidation.then( () => {} ) let speedChart = this if (!speedChart) speedChart = new chartClass("speed-chart") // set labels, range and data according to the selected chart type let type = chartParam[0] if (type == "particle") { speedChart.setXLabel("particles").setYLabel("speed of each particle") .setData(results1.name,"line",results1.speed,results1.color) .addData(results2.name,"line",results2.speed,results2.color) } else if (type == "histogram") { speedChart.setXLabel("speed").setYLabel("fraction of particles with speed between s and s+ds") .setData(results1.name,"bar",results1.histogram,results1.color) .addData(results2.name,"bar",results2.histogram,results2.color) } else if (type == "cumulative") { speedChart.setXLabel("speed").setYLabel("fraction of particles with speed equal or lower then s") .setData(results1.name,"line",results1.cumulative,results1.color) .addData(results2.name,"line",results2.cumulative,results2.color) } // update every 100 ms let step = 100 let adaptCount = 10 while (true) { // calculate the size of the speed vector and store in the results let n1 = results1.speed.length, n2 = results2.speed.length for (let i=0; i < n1; i++) results1.speed[i].y = group1.particles[i].speed.length() for (let i=0; i < n2; i++) results2.speed[i].y = group2.particles[i].speed.length() //check if we also need the the histogram or the cumulative distribution if (type == "histogram") results1.makeHistogram(), results2.makeHistogram() else if (type == "cumulative") results1.makeCumulative(), results2.makeCumulative() // we only do this a few times - you can scale and move in the chart as required if (adaptCount-- > 0) { speedChart.xRangeAdapt().yRangeAdapt(1.1) speedChart.drawAll() } else speedChart.drawDataSeries() // done yield Promises.delay(step,speedChart) } }4a:T6c0,timeChart = { chartSVG; invalidation.then( () => {} ) let timeChart = this if (!timeChart) { timeChart = new timeChartClass("time-chart") timeChart.setTimeFormat("relative","%H:%M:%S") .setTimeRange("00:00:00","00:00:59") collisions.clearData() } timeChart.setYLabel(`collisions per second and pressure`) .setData("p-p","line", collisions.pp,chartParam[1]) .addData("p-w","line", collisions.pw,chartParam[2]) .addData("pressure","line",collisions.pressure,chartParam[3]) // now update every second let adaptCount = 5 let mSec = 1000 while (true) { // get he interval that we have observed - in our case it will be roughly one second let interval = collisions.period // wait for data if (interval < 0.1) { yield Promises.delay(mSec,timeChart) continue } // get the collisions per second and pressure let pw = container.getCollisions() let pp = ( collisions.count - pw ) let pressure = container.getPressure() // store the results let now = Date.now() collisions.pw.push({x:now,y:pw / interval}) collisions.pp.push({x:now,y:pp / interval}) collisions.pressure.push({x:now,y:pressure}) // reset the counters in the collisions object and the container collisions.reset() container.reset() // we set a reasonable range the few first times - afterwards you can zoom and shift as you like if (adaptCount-- > 0) timeChart.yRangeAdapt(1.2) // shift one step if the last added datapoint falls of the chart and adapt the y-range if necessary timeChart.shiftIntoView().drawAll() yield Promises.delay(mSec,timeChart) } }4b:T5af,md`The *speedchart* allows to look at the speeds of the particles in three different ways. The first graph shows the speed of each particle individually, the second as a histogram where the particles with a speed between s and s+ds are counted in bins, and thirdly as a cumulative distribution. The most interesting curve is the histogram, because it shows the emerging form of the **maxwell-boltzmann** distribution. Playing around with the parameters of the simulation allows to investigate what parameters affect the distribution and the pressure in the cuboid. There are several interesting things to notice: * The speed between the particles quickly converges to the maxwell-boltzmann distribution. * The histogram for the lighter particles is always more spread out then the one for the heavier particles. Size of the particles has little influence. * The particle-particle collisions are very sensitive to the size of the particles - the particle wall collisions are not so sensitive to that (I know, you do not need a simulation to get that), but they will also increase when the size of the particles increases. * Pressure is proportional to the number of particle-wall collisions. When you double the speed the pressure increases fourfold because on the one hand the number of particle-wall collisions increases linearly with the speed, and on the other hand because the change in momentum (a.k.a. force) increases linearly with the speed. `4c:T4b4,{ xpDisplay let chrono = new chronoClass() // notation let col = xp.collisions, oct = xp.octree, cont = xp.container, group = xp.group, studio = xp.studio // loop forever //let counter = 0 while (xpStart) { // don't waste time if invisible await visibility(); // get the interval let interval = chrono.getInterval() // reset the collisions array and the octree col.resetList() oct.reset() // for each object in the object group const nP = group.particles.length let particle=null for (let i=0; i < nP; i++) { // simplify notation particle = group.particles[i] // calculate the new position of the particle particle.newPosition(interval) // the collison detector if ( ! oct.collisionCheck(particle, interval,col)) cont.collisionCheck(particle, interval, col) } // calculate the actual collisions col.collide(interval) // update the position of the particles in the scene group.placeParticlesInScene(studio.scene) // render studio.renderer.render(studio.scene, studio.camera) //..and yield yield(md`fps: ${chrono.getFps(10).toFixed(0)}`) } }4d:T6be,xpChart = { xpDisplay let xpChart = this let ppArray = [] let pwArray = [] let radius={min:0.0005, max:0.05, inc:0.0005, val:0.0} if (! xpChart) { xpChart = new chartClass("xp-chart") xpChart.setYLabel(`particle/particle and particle/wall collisions per sec as a function of radius`) .setXLabel("particle radius") .setXRange(0,radius.max) .drawAll() } xpChart.setData("pp","scatter", ppArray,xp.group.color) xpChart.addData("pw","scatter", pwArray,xp.container.color) // push the button to start if (!xpStart) return this // initialise the radius radius.val = radius.min xp.group.changeRadius(radius.val) // reset the collision counters xp.collisions.reset() xp.container.reset() // let the simulation start running.. let mSec = 500 yield Promises.delay(mSec,xpChart) // loop while (true) { await visibility() // get the duration of the interval let period = xp.collisions.period // calculate the nr of particle-particle collisions per second let pw = xp.container.getCollisions() let pp = xp.collisions.count - pw if (pp < 0) pp=0 // save the data point ppArray.push({x:radius.val, y:pp/period}) pwArray.push({x:radius.val, y:pw/period}) // reset xp.collisions.reset() xp.container.reset() // we set a reasonable range with some headroom xpChart.yRangeAdapt(1.2) // draw xpChart.drawAll() // new radius radius.val += radius.inc if (radius.val > radius.max) return xpChart xp.group.changeRadius(radius.val) // and wait for the next 'stable' measurement yield Promises.delay(mSec,xpChart) } }4e:T4b9,{ xp2Display let chrono = new chronoClass() // notation let col = xp2.collisions, oct = xp2.octree, cont = xp2.container, group = xp2.group, studio = xp2.studio // loop forever //let counter = 0 while (xp2Run) { // don't waste time if invisible await visibility(); // get the interval let interval = chrono.getInterval() // reset the collisions array and the octree col.resetList() oct.reset() // for each object in the object group const nP = group.particles.length let particle=null for (let i=0; i < nP; i++) { // simplify notation particle = group.particles[i] // calculate the new position of the particle particle.newPosition(interval) // the collison detector if ( ! oct.collisionCheck(particle, interval,col)) cont.collisionCheck(particle, interval, col) } // calculate the actual collisions col.collide(interval) // update the position of the particles in the scene group.placeParticlesInScene(studio.scene) // render studio.renderer.render(studio.scene, studio.camera) //..and yield yield(md`fps: ${chrono.getFps(10).toFixed(0)}`) } }4f:T69d,xp2Chart = { xp2Display let xpChart = this let pwArray = [] let prArray = [] let speed={min:0.1, max:5.0, inc:0.1, val:0.0} if (! xpChart) { xpChart = new chartClass("xp2-chart") xpChart.setYLabel(`particle-wall collision/sec and pressure as a function of speed`) .setXLabel("particle speed") .setXRange(0,speed.max) .drawAll() } xpChart.addData("pw","scatter", pwArray,xp2.container.color) xpChart.addData("pr","scatter", prArray,"#00ffff") // push the button to start if (!xp2Run) return this // initialise the radius speed.val = speed.min xp2.group.initSpeed(speed.val) // reset the collision counters xp2.collisions.reset() xp2.container.reset() // let the simulation start running.. let mSec = 500 yield Promises.delay(mSec,xpChart) // loop while (true) { await visibility() // get the duration of the interval let period = xp2.collisions.period // calculate the nr of particle-particle collisions per second let pw = xp2.container.getCollisions() let pr = xp2.container.getMomentum()/period / xp2.container.area // save the data point pwArray.push({x:speed.val, y:pw/period}) prArray.push({x:speed.val, y:pr}) // reset xp2.collisions.reset() xp2.container.reset() // we set a reasonable range with some headroom xpChart.yRangeAdapt(1.2) // draw xpChart.drawAll() // new radius speed.val += speed.inc if (speed.val > speed.max) return xpChart xp2.group.initSpeed(speed.val) // and wait for the next 'stable' measurement yield Promises.delay(mSec,xpChart) } }50:T4d9,md`Let us now set up a simulation for air. More then 99% of dry air is made up of just three molecules: 78% (nitrogen - N2), 21% (oxygen - O2) and 1% (argon - Ar). One cubic meter of air at sea-level weighs 1.2 kg. Using the molar mass of these molecules and Avogadro's number you can calculate that 1.2 kg of air contains 1948x10e22 (N2), 523x10e22 (O2) and 19x10e22 (Ar) molecules. Or - more manageable for our purposes - that 100,000 nm³ contains 1948 N2 molecules, 523 O2 molecules and 23 Ar molecules. 100,000 nm³ is a cube with a rib of 46.4 nm. One mole contains 6.022x10e23 molecules, so one molecule of nitrogen has a mass of 28/6.022 x 10e-23g or 4.65 units, where the unit is 10e-23 gram. The same calculations give us 5.31 units for oxygen and 6.64 units for argon mass. If we use spheres to represent the molecules, we will use the Van der Waals radius of the molecules as their size: 0.225 nm for N2, 0.206 nm for O2 and 0.188 nm for Ar. Now we can use these figures to set up our simulation and to see what a tiny cube of air looks like. Because of the high speed of the molecules we have to slow down the simulation dramatically. In the simulation below the Nitrogen molecules are grey, oxygen is blue and argon is red.`51:T5e8,{ let chrono = new chronoClass() // notation let studio = air.studio, container = air.container, octree = air.octree, collisions = air.collisions let nitrogen = air.nitrogen, oxygen = air.oxygen, argon = air.argon // loop forever while (true) { await visibility(); // get the interval let interval = chrono.getInterval() // reset the collisions array and the octree collisions.resetList() octree.reset() // for each object in the object group for (let gas of [nitrogen, oxygen, argon]) { const nP = gas.particles.length let particle=null for (let i=0; i < nP; i++) { // simplify notation particle = gas.particles[i] // calculate the new position of the particle particle.newPosition(interval) // the collison detector if ( ! octree.collisionCheck(particle, interval, collisions)) container.collisionCheck(particle, interval, collisions) } } // Now we have an array of objects that collide - but we still have to calculate the actual collisions collisions.collide(interval) // now we set the matrix that corresponds to the position of each particle for (let gas of [nitrogen, oxygen, argon]) { // update the position of the particles in the scene gas.placeParticlesInScene(studio.scene) } // render studio.renderer.render(studio.scene, studio.camera) // done yield(md`fps: ${chrono.getFps(10).toFixed(3)}`) } }52:T6a6,{ // reset the collision counters air.collisions.reset() air.container.reset() // get the div let div = document.getElementById("air-div") // update every second let mSec = 1000 // loop while (true) { await visibility() // get the duration of the interval let interval = air.collisions.period // calculate the nr of particle-particle collisions per second let wall = air.container.getCollisions() let all = air.collisions.count // force is the change of momentum over time let force = air.container.getMomentum()/interval let area = air.container.area let pp = (all-wall)/interval let pw = wall/interval let pr = force/area const timeFactor = 500e9/air.oxygen.speedUp const massFactor = 1e-26 const surfaceFactor = 1e18 // surface is in the denominator // molecules weight unit is 1e-26 kg surface in nm² or 1e-18 m² let prPascal = pr*timeFactor*massFactor*surfaceFactor // reset air.collisions.reset() air.container.reset() //div.insertAdjacentHTML('afterbegin', html`This ${pw} ${pp} ${pr}`) div.innerHTML = `
Nr of particle-particle collisions/sec: ${pw.toFixed(0)}

Nr of particle-wall collissions/sec: ${pp.toFixed(0)}

Pressure inside the cuboid: ${pr.toFixed(2)}

Nr of particles: N2 ${air.nitrogen.particles.length} - O2 ${air.oxygen.particles.length} - Ar ${air.argon.particles.length}
Note that in real time molecules move at 500 m/s or ${timeFactor.toFixed(0)} (${timeFactor.toExponential(0)}) times faster than in this simulation.
` yield Promises.delay(mSec) } } 53:T6ee,// a class for the studio class studioClass { constructor(h=480, w=width, canvasId=null) { let canvas=null if (canvasId) { canvas = document.getElementById(canvasId) w = canvas.clientWidth h = canvas.clientHeight } // camera and window settings let far = 1000, near = 1, fov = 30 // the camera this.camera = new THREE.PerspectiveCamera(fov, w / h, near, far) this.camera.position.set(1,1,3) this.camera.lookAt(0,0,0) //the scene this.scene = new THREE.Scene(); // we will create an ambient and a point light this.lights = {ambient:null, point:null} // add an ambient light this.lights.ambient = new THREE.AmbientLight(0xffffff, 0.2) this.scene.add(this.lights.ambient) // add a point light this.lights.point = new THREE.PointLight(0xffffff, 0.9, 0, 2); this.lights.point.position.set(30,30,30) this.scene.add(this.lights.point) // set up the renderer if (canvas) this.renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true}) else this.renderer = new THREE.WebGLRenderer({antialias: true}) this.renderer.setClearColor(0x000000) this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setSize(w,h) // set up the orbit controls this.orbitControls = new OrbitControls( this.camera,this.renderer.domElement ) this.orbitControls.minDistance = near this.orbitControls.maxDistance = far this.orbitControls.maxPolarAngle = Math.PI; // add an axes helper to the scene - RGB = XYZ this.scene.add( new THREE.AxesHelper( 1 ) ) } dispose() { this.orbitControls ? this.orbitControls.dispose():0 this.renderer ? this.renderer.dispose():0 this.scene ? this.scene.dispose():0 } }54:T185c,class cuboidContainerClass { // scene : we need this because we want to add the mesh of the container // s(ize): defines the size of the container as vector: (x,y,z) constructor(scene, s, color="#ffffff") { // the container is positioned around 0 let p = {x:0, y:0, z:0} // geometry, material, mesh this.geometry = this.material = this.mesh = null // make the bounding box this.bBox = new THREE.Box3( new THREE.Vector3(p.x-s.x/2, p.y-s.y/2, p.z-s.z/2), new THREE.Vector3(p.x+s.x/2, p.y+s.y/2, p.z+s.z/2)) // save the color this.color = color // the material settings this.materialSettings = { color: color,wireframe: true,transparent: true,opacity: 0.5} // an object to keep track of the forces exerted on the walls of the container this.force = { x1:0.0, x2:0.0, y1:0.0, y2:0.0, z1:0.0, z2:0.0} // an object to keep track of the nr of collisions with the container wall this.collisions = { nX1:0, nX2:0,nY1:0, nY2:0,nZ1:0, nZ2:0} // calculate the area of the cuboid this.area = 2*(s.x*s.y + s.x*s.z + s.y*s.z) // make the material this.makeMaterial() // make the mesh of the box this.makeGeometry(s) // make the mesh this.addMesh(scene) } // to clean up when required destructor(scene) { if (this.mesh) scene.remove(this.mesh), this.mesh=null if (this.geometry) this.geometry.dispose(), this.geometry = null if (this.material) this.material.dispose(), this.material = null } changeSize(scene, s) { // the container is positioned around 0 let p = {x:0, y:0, z:0} // make the bounding box this.bBox = new THREE.Box3( new THREE.Vector3(p.x-s.x/2, p.y-s.y/2, p.z-s.z/2), new THREE.Vector3(p.x+s.x/2, p.y+s.y/2, p.z+s.z/2)) // re-calculate the area of the cuboid this.area = 2*(s.x*s.y + s.x*s.z + s.y*s.z) // make the mesh of the box this.makeGeometry(s) // make the mesh this.addMesh(scene) } makeGeometry(s) { // get the smallest side of the cuboid let min = Math.min(s.x, s.y, s.z) // calculate a nr of subdivisions for each side let [nx,ny,nz] = [4*Math.round(s.x/min), 4*Math.round(s.y/min), 4*Math.round(s.z/min)] // get rid of old geometry if any and create the new one if (this.geometry) this.geometry.dispose() this.geometry = new THREE.BoxGeometry(s.x, s.y, s.z, nx, ny, nz) } makeMaterial() { if (this.material) this.material.dispose() this.material = new THREE.MeshLambertMaterial(this.materialSettings) } addMesh(scene) { if (this.mesh) scene.remove(this.mesh) this.mesh = new THREE.Mesh(this.geometry, this.material) scene.add(this.mesh) } diagonal() { return this.bBox.max.clone().sub(this.bBox.min).length() } // a function to check if a particle will collide with the container wall // the position of the particle is the position at the end of the interval ! // we do not care about the collision time - reflection is simple to calculate // we set collision time at 100 - after sorting, collisions with the container will be at the end of the collision array collisionCheck(particle, interval, collisions) { // notation let p = particle.pos, box = this.bBox, r = particle.radius // check if the particle is beyond the box - in the x, y or z direction if ((p.x < box.min.x + r) || (p.x > box.max.x - r)|| (p.y < box.min.y + r) || (p.y > box.max.y - r)|| (p.z < box.min.z + r) || (p.z > box.max.z - r) ) { // if it is it will collide with the box in this interval, so push it on the collision-array collisions.add(this, particle, 100.0) } } // Calculates the new position of the object after collision with the cuboid // Note that the position of the object is already the new position but without the collision // Here we simply calculate the reflected position and the reflected speed // We also calculate the force excerted on the wall and the increment the appropriate collision counter collide( object, tCol, interval ) { let p = object.pos, v = object.speed, r = object.radius, m= object.mass let box = this.bBox // x-direction if (p.x < box.min.x + r) { p.x = -p.x + 2*(box.min.x + r) v.x = -v.x this.force.x1 += 2*m*v.x this.collisions.nX1++ } else if ( p.x > box.max.x - r ) { p.x = -p.x + 2*(box.max.x - r) v.x = -v.x this.force.x2 -= 2*m*v.x this.collisions.nX2++ } // y-direction if (p.y < box.min.y + r) { p.y = -p.y + 2*(box.min.y + r) v.y = -v.y this.force.y1 += 2*m*v.y this.collisions.nY1++ } else if (p.y > box.max.y - r) { p.y = -p.y + 2*(box.max.y - r) v.y = -v.y this.force.y2 -= 2*m*v.y this.collisions.nY2++ } // z-direction if ( p.z < box.min.z + r) { p.z = -p.z + 2*(box.min.z + r) v.z = -v.z this.force.z1 += 2*m*v.z this.collisions.nZ1++ } else if ( p.z > box.max.z - r ) { p.z = -p.z + 2*(box.max.z - r) v.z = -v.z this.force.z2 -= 2*m*v.z this.collisions.nZ2++ } } // get the pressure excerted on the walls of the container getPressure() { // notation let f = this.force // make s contain the length of the ribs of the cuboid let s = this.bBox.max.clone().sub(this.bBox.min) // calculate let force = f.x1 + f.x2 + f.y1 + f.y2 + f.z1 + f.z2 let area = 2*(s.x*s.y + s.x*s.z + s.y*s.z) // done return force/area } getMomentum() { // notation let f = this.force // calculate the change in momentum during this interval let momentum = f.x1 + f.x2 + f.y1 + f.y2 + f.z1 + f.z2 // done return momentum } getCollisions() { let c = this.collisions let count = c.nX1 + c.nX2 + c.nY1 + c.nY2 + c.nZ1 + c.nZ2 return count } reset() { // reset the nr of collisions let c = this.collisions c.nX1 = c.nX2 = c.nY1 = c.nY2 = c.nZ1 = c.nZ2 = 0 // reset the force let f = this.force f.x1 = f.x2 = f.y1 = f.y2 = f.z1 = f.z2 = 0.0 } } // end of container class55:T1372,class particleClass { constructor(mass, radius) { // a particle has a position, speed, mass and radius this.pos = new THREE.Vector3() this.speed = new THREE.Vector3() this.radius = radius this.mass = mass // the bounding box when moving from one position to another, // i.e. the bounding box of a trajectory in a given interval this.bBox = new THREE.Box3 // for debugging we sometimes want to see the bounding boxes - not essential this.boxHelper = null // particles can be added to a linked list in the octree (see later) this.next = null } // calculate the new position of the particle after an interval of t seconds newPosition(t) { // calculate the new position let q = this.pos.clone().addScaledVector(this.speed,t) // adjust the bounding box this.setBBox(q) // copy the new position this.pos.copy(q) } // calculate the size of the bounding box for the trajectory based on // the new position q and the size of the ball setBBox(q) { // notation let p = this.pos, r = this.radius, min = this.bBox.min, max = this.bBox.max // we subtract/add r to make sure the ball lies completely in the box min.x = p.x < q.x ? p.x-r : q.x-r min.y = p.y < q.y ? p.y-r : q.y-r min.z = p.z < q.z ? p.z-r : q.z-r max.x = p.x > q.x ? p.x+r : q.x+r max.y = p.y > q.y ? p.y+r : q.y+r max.z = p.z > q.z ? p.z+r : q.z+r // a box that has collided changes gradually to the normal color if (this.boxHelper) this.boxHelper.material.color.lerp(cc.freeClr,0.1) } // a function to test for intersection of trajectories of this and an 'other' particle in a given interval intersects( other, interval ) { // if the trajectory boxes intersect.. if (this.bBox.intersectsBox(other.bBox)) { // ..we have a collision candidate - calculate relative position and speed of the two particles // p = p2-p1, v= v2-v1 - note that p is already the new position // by using p and v it is as if one particle stands still while the other one moves relative to it let p = other.pos.clone().sub(this.pos) let v = other.speed.clone().sub(this.speed) // calculate a,b and c of the quadratic distance equation let a = v.lengthSq() let b = 2*p.dot(v) let c = p.lengthSq() - (other.radius+this.radius)**2 // the determinant let det = b*b - 4*a*c // if the determinant is positive there are intersections if ( det > 0) { // show that the objects will collide if requested by changing the color of the boxHelper if (this.boxHelper) this.boxHelper.material.color.copy(cc.hitClr) if (other.boxHelper) other.boxHelper.material.color.copy(cc.hitClr) // calculate the roots - note that t1 is the smallest root let sqrt = Math.sqrt(det) let t1 = (-b - sqrt)/(2*a) // there is a second 'collision' at t2 when the balls intersect when moving apart // t2 = (-b + sqrt)/(2*a) // t2 = -tCol - b/a // t2 > 0 becomes then t1 < -b/a // so if we have missed the first intersection (at t1) but t2 is still in the future, we still consider t1 // the collision should have happened in the interval except when the second collision is still in the future if ( ( t1 < 0 ) && ((t1 > -interval) || (t1 < -b/a)) ) return t1 else return Infinity } else return Infinity } return Infinity } // we know that the two particles collide in the given interval collide( other, tCol, interval ) { // bring the two objects back to the moment of the collision - tCol is always negative ! this.pos.addScaledVector(this.speed, tCol) other.pos.addScaledVector(other.speed, tCol) // formula to be found in wikipedia https://en.wikipedia.org/wiki/Elastic_collision#Two-dimensional let p = this.pos.clone().sub(other.pos) let v = this.speed.clone().sub(other.speed) // the factors for the speed calculation let f1 = ( 2 * other.mass / (this.mass + other.mass) ) * ( v.dot(p) / p.lengthSq() ) let f2 = this.mass/other.mass // calculate the new speeds - keep the order - p is changed in the first line ! this.speed.sub( p.multiplyScalar(f1) ) other.speed.add( p.multiplyScalar(f2) ) // the two objects have still tCol seconds to travel with the new speed (-tCol is positive !) this.pos.addScaledVector( this.speed, -tCol ) other.pos.addScaledVector( other.speed, -tCol ) } }56:T1f93,class particleGroupClass { constructor(name, color) { // save the name of the group this.name = String(name) // each particle has the same characteristics this.color = color this.mass = 1 this.radius = 1 this.speedUp = 1.0 // the particles in this group this.particles = [] // the box helper group - not essential this.boxHelperGroup = null // the mesh, geometry and material applicable to all particles this.mesh = this.geometry = this.material = null // the material this.material = new THREE.MeshLambertMaterial({color: new THREE.Color(this.color)}) } // clean-up if required destructor(scene) { if (this.mesh) scene.remove(this.mesh) if (this.geometry) this.geometry.dispose() if (this.material) this.material.dispose() } // make the required changes to the group if any of the parameters changes change(scene, count, mass, radius, speedUp, color) { // make sure we have na integer count = Math.ceil(count) // if the nr of objects changed if (count != this.particles.length) { // create an array for all objects this.newParticleCount(scene, count, mass, radius) // calculate the position of each object let cuboid = container.bBox.max.clone().sub( container.bBox.min ) this.initPosition(cuboid,{x:0,y:0,z:0}) // create a speed vector for each object - we set the this.initSpeed(speedUp) // also set the aabbox (axis alligned bounding box) of the objects - used for collision detection this.initBBox() } // set the radius of the objects if needed if (radius != this.radius) this.changeRadius(radius) // set the mass of the objects if (mass != this.mass) this.changeMass(mass) // the speed will only be changed if the accelerator changed if (speedUp != this.speedUp) this.accelerate(speedUp) // change the color if ((typeof color == "string")&&(color != this.color)) this.changeColor(color) // make the objects visible in the scene this.placeParticlesInScene(scene) } // when the nr of particles changes ... newParticleCount(scene, count, mass, radius) { // remove the box helpers if any if (this.boxHelperGroup != null) { scene.remove( this.boxHelperGroup ) this.boxHelperGroup = null } // if we still have a mesh - release it if (this.mesh) { scene.remove(this.mesh) this.mesh = null } // if the array is too big - if (this.particles.length >= count) { //...trim this.particles.length = count } else { // allocate a new array this.particles = new Array(count) // initialize for (let i=0; i 0) { // it contains 8 new octants this.octant = [null, null, null, null, null, null, null, null] // dp is a vector with the size of the octant at this level let dp = new THREE.Vector3( (p2.x-p1.x)/2,(p2.y-p1.y)/2,(p2.z-p1.z)/2 ) // get a new vector let p = new THREE.Vector3() // make a total of eight new octants let n = 0 for (let i=0; i<2; i++) for (let j=0; j<2; j++) for (let k=0; k<2; k++) { // p defines one point of the octant.. p.set( p1.x + i*dp.x, p1.y + j*dp.y , p1.z + k*dp.z) // ..and p+dp is the diagonally opposed point this.octant[n++] = new octreeClass(p, p.clone().add( dp ), level-1) } } } // when the size of the container changes, the sizes of the octants have to be adapted as well sizeChange(p1,p2) { // change the size of the box this.space.min = {...p1} this.space.max = {...p2} // if there are there still sub-octants.. if (this.octant) { // dp is a vector with the size of the octant at this level let dp = new THREE.Vector3( (p2.x-p1.x)/2,(p2.y-p1.y)/2,(p2.z-p1.z)/2 ) // a copy of p1 let p = new THREE.Vector3() // adjust the size for for all octants let n = 0 for (let i=0; i<2; i++) for (let j=0; j<2; j++) for (let k=0; k<2; k++) { // p defines one point of the octant.. p.set( p1.x + i*dp.x, p1.y + j*dp.y , p1.z + k*dp.z) // ..and p+dp is the diagonally opposed point this.octant[n++].sizeChange(p, p.clone().add( dp )) } } } // all the particle lists are reset reset() { // reset the particle list this.particleList.reset() // check the sub-octants if (this.octant) for (let i=0; i < this.octant.length; i++) if (this.octant[i]) this.octant[i].reset() } // particle is checked against the other particles already in the octree // secTime is the duration of the interval in seconds // collisions is an array that will contain all collision events in the interval collisionCheck( particle, secTime, collisions) { // take the first particle on the objects in this octant let other = this.particleList.first let when = 0.0 // check against collisions with objects stored at this level while (other != null ) { // calculate if the particles bbox intersect and if so at what time in the interval if ( ( when = particle.intersects(other, secTime)) != Infinity ) collisions.add(particle,other,when) other = other.next } // check the sub-octants if (this.octant) { // check for each octant.. for (let i=0; i r1.t - r2.t ) // do all collisions let len = list.length let col = null for (let i=0; i < len ; i++) { // get the collision record col = list[i] // parameters are the other particle, the collision time (relative to the the interval) and the interval col.a.collide(col.b, col.t, interval) } // keep track of the total nr of collisions over a given period this.period += interval this.count += len } get() { return {count: this.count, period: this.period} } }59:T8b9,// a simple class to collect speed data and histogram class resultsClass { constructor(name, color, nParticles) { // this is a heuristic rule that is often used to determine the number of histogram buckets let nBins = Math.ceil(Math.sqrt(nParticles)) this.name = name this.color = color this.speed = new Array(nParticles) this.cumulative = new Array(nParticles) this.histogram = new Array(nBins) // initialise the arrays for (let i=0;i xMax) xMax = points[i].y } // the bin size let bSize = (1.1*xMax - 0.9*xMin)/nB if (bSize == 0) bSize = 1.0 // initialize the buckets for (let i=0; i yMax) yMax = bins[i].y } // return the min and max value return [xMin, xMax, yMin, yMax] } makeCumulative() { let points = this.speed let cumul = this.cumulative let nP = points.length // copy but swap x and y for (let i=0; i < nP; i++) cumul[i].x = points[i].y // sort the array cumul.sort( (a, b) => a.x - b.x ) // change the y values for (let i=0; i< nP; i++) cumul[i].y = i/nP } }5a:T4842,class chartClass { constructor(svgId,log=false){ // get the svg let svg = d3.select("#" + svgId) if (svg == null) return this.svg = svg // the container for the chart this.log = log // set if scale is not linear this.xLabel = "" this.xRange = {min:0,max:1} // x range this.xScale = null // x-axis scale function this.yLabel = "" this.yRange = {min:0,max:1} // y-range this.yScale = null // y-axis scale function this.dataSeries = [] // data objects - each object has a name + type + color + data points this.chartArea = { // the svg for the chart area (change cursor etc) width : 0, height : 0, svg:null, // the svg of the chartArea } // The css settings that this chart uses this.css = { margin:{ top:0,right:0,bottom:0,left:0}, labelFontSize: null, labelColor: null, defaultDataColor: null, chartBackground: null, selectBoxColor: null, } // get the CSS settings this.getCSS(svg) } // some of the settings of the chart are read from css variables getCSS(svg) { // get the computed style let style = getComputedStyle( svg.node() ) if (style == null) return; // get the margin setting let marginString = style.getPropertyValue("--chart-margin") // check if (marginString ) { // regular expression for a floating point number let regex = /[+-]?[0-9]*\.?[0-9]+/g // parse the margin settings let marginArray = marginString.match(regex) // set the margin this.css.margin.top = +marginArray[0] this.css.margin.right = +marginArray[1] this.css.margin.bottom = +marginArray[2] this.css.margin.left = +marginArray[3] } // getPropertyValue returns a string with quotes around it (stringify) ! let prop = (p) => { return JSON.parse( style.getPropertyValue( p ) ) } // get the other values this.css.labelFontSize = prop("--chart-lblsz") this.css.labelColor = prop("--chart-lblclr") this.css.defaultDataColor = prop("--chart-dataclr") this.css.chartBackground = prop("--chart-bckgrnd") this.css.selectBoxColor = prop("--chart-selectclr") } // redraws the entire chart drawAll(){ // clean up the current chart this.svg.selectAll("g").remove() // create an svg for the chart area this.addChartArea() // set the scale for the x axis this.makexScale() // set the scale for the y-axis this.makeyScale() // if there is data to display draw the chart using the y and x scale this.drawDataSeries() // now we draw the x-axis this.drawxAxis() // draw the y-axis this.drawyAxis() } // only re-draws the data drawDataSeries() { // clean up the current graph - ACTUALLY because the g has no id, it gets overwritten anyhow ! this.chartArea.svg.selectAll("g").remove() // if there is data to display draw the chart using the y and x scale if (this.dataSeries.length > 0) this.dataSeries.forEach( (item)=> { if (item.type == "line") this.drawLine(item.points,item.color) else if (item.type == "bar") this.drawBar(item.points,item.color) else if (item.type == "scatter") this.drawScatter(item.points,item.color) }) } setXRange(min,max) { this.xRange.min = min this.xRange.max = max return this } // finds the optimum xRange xRangeAdapt() { // check first if (!this.dataSeries[0] || this.dataSeries[0].points.length == 0) return this // initialize min and max let min = this.dataSeries[0].points[0].x, max = min // in all dataseries look for the biggest x-range for (let i = 0; i < this.dataSeries.length; i++) { let n = this.dataSeries[i].points.length if (!n) continue if (min > this.dataSeries[i].points[0].x) min = this.dataSeries[i].points[0].x if (max < this.dataSeries[i].points[n-1].x) max = this.dataSeries[i].points[n-1].x } // change this.xRange.min = min this.xRange.max = max return this } // finds the optimum y range - the factor allows for some 'headroom' yRangeAdapt(factor = 1.0) { // check first if (!this.dataSeries[0] || this.dataSeries[0].points.length == 0) return this // initialise min and max let min = this.dataSeries[0].points[0].y let max = min let xr = this.xRange // check all dataseries for (let i = 0; i < this.dataSeries.length; i++) { let n = this.dataSeries[i].points.length // check each point in a dataserie for (let j = 0; j < n; j++) { let p = this.dataSeries[i].points[j] // only check the y values for which the x is in the range ! if ((p.x >= xr.min) && (p.x <= xr.max)) { // check for min/max if (p.y < min ) min = p.y else if (p.y > max ) max = p.y } } } // make sure we see 0 if (min > 0) min = 0 else if (max < 0) max = 0 let yr= this.yRange if (min*factor < yr.min) yr.min = min*factor if (max*factor > yr.max || max < yr.max*factor) yr.max = max*factor return this } setXLabel(label) { this.xLabel = label return this } setYLabel(label) { this.yLabel = label return this } // adds data to the series of data addData(name, type, points, color) { // check if it exists for (let i = 0; i < this.dataSeries.length; i++) { if (this.dataSeries[i].name == name) { this.dataSeries[i].type = type this.dataSeries[i].points = points this.dataSeries[i].color = color return this } } // not found - add the new series this.dataSeries.push({name, type, points, color}) return this } // just sets the first series to the data to draw setData(name, type, points, color) { this.dataSeries.length = 1 this.dataSeries[0] = {name,type,points,color} return this } addChartArea() { // clean up the current chart if (this.chartArea.svg) this.chartArea.svg.remove() // notation let margin = this.css.margin // set the width and height of the chart area based on the containing svg let width = +this.svg.property("clientWidth") - margin.left - margin.right let height = +this.svg.property("clientHeight") - margin.top - margin.bottom // set the size of the chart area this.chartArea.width = width this.chartArea.height = height // create an svg for the chart area this.chartArea.svg = this.svg.append("svg") .attr("x", margin.left) .attr("y", margin.top) .attr("width",width) .attr("height",height) .attr("style","clip-path: view-box") // a background rectangle this.chartArea.svg.append("rect") .attr("x", 0) .attr("y", 0) .attr("width",this.chartArea.width) .attr("height",this.chartArea.height) .attr("fill",this.css.chartBackground) .attr("opacity",1) .attr("style","cursor:move") .call(d3.zoom().on("zoom", () => this.zoomXY())) } makexScale() { if (this.log) this.xScale = d3.scalePow() .exponent(2) .range([0,this.chartArea.width]).domain([this.xRange.min, this.xRange.max]) else this.xScale = d3.scaleLinear() .range([0,this.chartArea.width]) .domain([this.xRange.min, this.xRange.max]) } makeyScale() { if (this.log) this.yScale = d3.scalePow() .exponent(2) .range([this.chartArea.height, 0]).domain([this.yRange.min, this.yRange.max]) else this.yScale = d3.scaleLinear() .range([this.chartArea.height, 0]) .domain([this.yRange.min, this.yRange.max]) } drawxAxis() { // shorter notation const width = this.chartArea.width const height = this.chartArea.height const margin = this.css.margin // append a group for the axis const xAxis = this.svg.append("g") .attr("class", "x-axis") .attr("transform", `translate( ${margin.left}, ${height + margin.top})`) // make the x-axis draw function let draw = d3.axisBottom(this.xScale).tickSize(-height) // draw the x-axis ticks - no selection or any other action on the ticks ! xAxis.append("g") .attr("class", "x-ticks") .attr("cursor", "none") .attr("pointer-events", "none") .call(draw) // put a label on the axis xAxis.append("text") .attr("fill", this.css.labelColor) .attr("font-size",this.css.labelFontSize) .attr("x",width - (this.xLabel.length)*10) .attr("y",margin.bottom - 3) .attr("text-anchor", "start") .text(this.xLabel) // make an invisible rectangle over the chart + x-axis for the zooming behaviour xAxis.append("rect") .attr("x", 0).attr("y", 0) .attr("width",width) .attr("height",margin.bottom) .attr("opacity",0) .attr("style","cursor:e-resize") .call(d3.zoom().on("zoom", () => this.zoomXAxis())) } drawyAxis(){ // notation const margin = this.css.margin const width = this.chartArea.width const height = this.chartArea.height // create the y-axis group const yAxis = this.svg.append("g") .attr("class", "y-axis") .attr("transform", `translate( ${margin.left}, ${margin.top} )`) // make the y-axis draw function let draw = d3.axisLeft(this.yScale).tickSize(-width) // draw the y-axis yAxis.append("g") .attr("class", "y-ticks") .attr("fill","#ff0000") .attr("cursor", "none") .attr("pointer-events", "none") .call(draw) // put a label on the axis yAxis.append("text") .attr("fill", this.css.labelColor) .attr("font-size",this.css.labelFontSize) .attr("y",-margin.top/3) .attr("x",0) .attr("text-anchor", "start") .text(this.yLabel) // make an invisible rectangle over the axis for zooming behaviour yAxis.append("rect") .attr("x", `${-margin.left}`).attr("y",0 ) .attr("width",margin.left).attr("height",height) .attr("opacity",0) .attr("style","cursor:n-resize") .call(d3.zoom().on("zoom", () => this.zoomYAxisInAxis())) } drawLine(points,color) { // notation let xScale = this.xScale let yScale = this.yScale let xMin = this.xRange.min, xMax = this.xRange.max // define a group for the chart area let chart = this.chartArea.svg.append("g") // create a line generator - returns a path string - check if the data fits on the graph first let line = d3.line() .defined( d => {if ((d.x > xMax)||(d.x < xMin)) return false; else return true}) .x ( d => xScale(d.x)) .y ( d => yScale(d.y)) .curve(d3.curveLinear) // add the line to the chart chart.append("path") .datum(points) .attr("fill", "none") .attr("stroke", color) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 2) .attr("d", line) } drawBar(points,color) { if (points.length < 2) return // notation let xScale = this.xScale let yScale = this.yScale let xMin = this.xRange.min, xMax = this.xRange.max // define a group for the chart area let chart = this.chartArea.svg.append("g") let barWidth = xScale(points[1].x) - xScale(points[0].x) let zeroY = yScale(0) let opacity = 1 - (this.dataSeries.length - 1)*0.1 chart.selectAll("rect") .data(points) .join( enter => enter .filter( d => {if ((d.x > xMax)||(d.x < xMin)) return false; else return true }) .append("rect") .attr("x", d=>xScale(d.x)-barWidth/2) .attr("y", d=>yScale(d.y)) .attr("width",barWidth) .attr("height",d => Math.abs(yScale(d.y) - zeroY) ) .attr("fill", color) .attr("opacity",opacity), // actually - there is no update section ! update => update.attr("fill","red") ) } // in low x-resolution discrete functions are drawn with little circles drawScatter(points,color) { // notation let xScale = this.xScale let yScale = this.yScale let xMin = this.xRange.min, xMax = this.xRange.max let yMin = this.yRange.min, yMax = this.yRange.max // define a group for the chart data let chart = this.chartArea.svg.append("g") // the radius of the symbols used let radius = 2.5 chart.selectAll("circle") .data(points) .join( enter => // only draw a circle for data that is on the graph area enter.filter( d => {if ((d.x > xMax)||(d.x < xMin)||(d.y > yMax)||(d.y < yMin)) return false; else return true}) .append("circle") .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .attr("r", radius) .attr("fill",color), // actually - there is no update section ! update => update.attr("fill","red") ) } // the zoom function when zooming and moving in the chart area zoomXY() { // the source event let e = d3.event.sourceEvent // check the event type if (e.type == "wheel") this.scaleYAxis(e, this.yRange ) else if (e.type == "mousemove") this.moveXY(e, this.xRange, this.yRange) else return // and draw the chart this.drawAll() } moveXY(e,xRange, yRange) { let move = this.xScale.invert(e.movementX) - this.xScale.invert(0) xRange.min -= move xRange.max -= move move = this.yScale.invert(e.movementY) - this.yScale.invert(0) yRange.min -= move yRange.max -= move } // the zoom callback when zooming in the x-axis zoomXAxis( ) { // the source event let e = d3.event.sourceEvent // check the event type if (e.type == "wheel") this.scaleXAxis(e,this.xRange) else if (e.type == "mousemove") this.moveXAxis(e,this.xRange) else return // redraw this.drawAll() } scaleXAxis(e, range) { // select a scale factor let k = +e.wheelDelta > 0 ? 0.9 : 1.1 // get the range equivalent of the pixel position of the cursor let cursor = this.xScale.invert(+e.offsetX - this.css.margin.left) // adapt the range range.min = k*(range.min - cursor) + cursor range.max = k*(range.max - cursor) + cursor } moveXAxis( e, range) { let move = this.xScale.invert(e.movementX) - this.xScale.invert(0) range.min -= move range.max -= move } // the zoom callback when zooming and moving in the y-axis zoomYAxis( ) { // the source event let e = d3.event.sourceEvent // check the event type if (e.type == "wheel") this.scaleYAxis(e, this.yRange ) else if (e.type == "mousemove") this.moveYAxis(e, this.yRange) else return // and draw the chart this.drawAll() } // the zoom callback for zooming when the cursor is in the axis zoomYAxisInAxis( ) { // the source event let e = d3.event.sourceEvent // check the event type if (e.type == "wheel") this.scaleYAxisAroundCursor(e, this.yRange ) else if (e.type == "mousemove") this.moveYAxis(e, this.yRange) else return // and draw the chart this.drawAll() } scaleYAxis(e, range) { // select a scale factor let k = +e.wheelDelta > 0 ? 0.9 : 1.1 // get the range equivalent of the pixel position of the cursor let cursor = this.yScale.invert(e.offsetY - this.css.margin.top) // adjust the range //range.min = k*(range.min - cursor) + cursor //range.max = k*(range.max - cursor) + cursor range.max = k*range.max } // the value under the cursor is kept central scaleYAxisAroundCursor(e, range) { // select a scale factor let k = +e.wheelDelta > 0 ? 0.9 : 1.1 // get the range equivalent of the pixel position of the cursor let cursor = this.yScale.invert(e.offsetY - this.css.margin.top) // adjust the range range.min = k*(range.min - cursor) + cursor range.max = k*(range.max - cursor) + cursor } moveYAxis(e, range) { let move = this.yScale.invert(e.movementY) - this.yScale.invert(0) range.min -= move range.max -= move } }5b:T3263,class timeChartClass extends chartClass{ constructor(svgId, log=false){ // call the super constructor super(svgId, log) // a date object used in calculations this.date = new Date() // the function to draw a time axis this.timeAxis = { ticks: null, format: "", label: "" } // a default time format this.timeFormat = "%H:%M:%S" // default time type - can be relative or absolute this.timeType = "relative" // the default range is 60 seconds this.xRange = { min: Date.now(), max: Date.now() + 60000 } } // redraws the entire chart drawAll(){ // clean up the current chart this.svg.selectAll("g").remove() // create an svg for the chart area this.addChartArea() // set the scale for the time this.createTimeScale() // set the scale for the y-axis this.makeyScale() // if there is data to display draw the chart using the y and x scale this.drawDataSeries() // now we draw the x-axis this.drawTimeAxis() // draw the y-axis this.drawyAxis() } setTimeFormat(type, format) { // check if ((type == "relative")||(type == "absolute")) this.timeType = type else console.log("INVALID TIME TYPE:", type) // check if ( (d3.timeParse(format)) == null) console.log("INVALID TIME FORMAT:", format) else this.timeFormat = format return this } setTimeRange(minStr, maxStr) { let parse = d3.timeParse(this.timeFormat) let delta = parse( maxStr ).getTime() - parse( minStr ).getTime() if (this.timeType == "relative") this.xRange.min = 0 else if (this.timeType == "absolute") this.xRange.min = Date.now() this.xRange.max = this.xRange.min + delta return this } yRangeAdapt(factor) { // check first if (!this.dataSeries[0] || this.dataSeries[0].points.length == 0) return this let min = this.dataSeries[0].points[0].y let max = min, x0=0,x1=0 let xr = this.xRange x0 = this.timeType == "relative" ? this.dataSeries[0].points[0].x + xr.min : xr.min x1 = this.timeType == "relative" ? this.dataSeries[0].points[0].x + xr.max : xr.max for (let i = 0; i < this.dataSeries.length; i++) { let n = this.dataSeries[i].points.length for (let j = 0; j < n; j++) { let p = this.dataSeries[i].points[j] // only check the y values for which the x is in the range ! if ((p.x >= x0) && (p.x <= x1)) { if (p.y < min ) min = p.y if (p.y > max ) max = p.y } } } // make sure we see 0 if (min > 0) min = 0 else if (max < 0) max = 0 let yr= this.yRange if (min*factor < yr.min) yr.min = min*factor if (max*factor > yr.max || max < yr.max*factor) yr.max = max*factor return this } // a very general timescale - can range from msec to years createTimeScale(){ let min = new Date(this.xRange.min) let max = new Date(this.xRange.max) let format = "" let ticks = 0 let label = "" // I count the hours since you went away - I count the minutes and the seconds too // determine the type of scale we will show - day week month year let nrOfDays = d3.timeDay.count(min, max) if (nrOfDays > 1) { if (nrOfDays > 3650) format = "%y", ticks = d3.timeYear.every(5), label = "year" else if (nrOfDays > 730) format = "%Y", ticks = d3.timeYear.every(1), label = "year" else if (nrOfDays > 365) format = "%b'%y", ticks = d3.timeMonth.every(3), label = "month" else if (nrOfDays > 60) format = "%b", ticks = d3.timeMonth.every(1), label = "month" else if (nrOfDays > 10) format = "%a", ticks = d3.timeDay.every(7), label = "day" else if (nrOfDays > 1) format = "%a", ticks = d3.timeDay.every(1), label = "day" } else { // count the nr of hours let nrOfHours = d3.timeHour.count(min, max) if (nrOfHours > 12) format = "%H", ticks = d3.timeHour.every(3), label = "hr" else if (nrOfHours > 2) format = "%H", ticks = d3.timeHour.every(1), label = "hr" // count the minutes else { let nrOfMinutes = d3.timeMinute.count(min, max) if (nrOfMinutes > 30) format = "%M", ticks = d3.timeMinute.every(15), label = "min" else if (nrOfMinutes > 15) format = "%M", ticks = d3.timeMinute.every(5), label = "min" else if (nrOfMinutes > 2) format = "%M", ticks = d3.timeMinute.every(1), label = "min" else { // count the seconds let nrOfSeconds = d3.timeSecond.count(min, max) if (nrOfSeconds > 60) format = "%S", ticks = d3.timeSecond.every(15), label = "sec" else if (nrOfSeconds > 30) format = "%S", ticks = d3.timeSecond.every(10), label = "sec" else if (nrOfSeconds > 15) format = "%S", ticks = d3.timeSecond.every(5), label = "sec" else if (nrOfSeconds > 1) format = "%S", ticks = d3.timeSecond.every(1), label = "sec" else { // count the ms let nrOfms = d3.timeMillisecond.count(min, max) if (nrOfms > 150) format = "%L", ticks = d3.timeMillisecond.every(100), label = "msec" else if (nrOfms > 15) format = "%L", ticks = d3.timeMillisecond.every(10), label = "msec" else format = "%L", ticks = d3.timeMillisecond.every(1), label = "msec" } } } } // save the results this.timeAxis.ticks = ticks this.timeAxis.format = format this.timeAxis.label = label // set the scale for the x-axis this.xScale = d3.scaleTime().range([0,this.chartArea.width]).domain([min, max]) return true } drawTimeAxis() { // shorter notation const width = this.chartArea.width const height = this.chartArea.height const margin = this.css.margin // append a group for the axis const xAxis = this.svg.append("g") .attr("class", "x-axis") .attr("transform", `translate( ${margin.left}, ${height + margin.top})`) let drawAxis = d3.axisBottom(this.xScale).ticks( this.timeAxis.ticks ) .tickFormat(d3.timeFormat( this.timeAxis.format )).tickSize(-height) // draw the x-axis ticks - no selection or any other action on the ticks ! xAxis.append("g") .attr("class", "x-ticks") .attr("cursor", "none") .attr("pointer-events", "none") .call(drawAxis) // put a label on the axis xAxis.append("text") .attr("fill", this.css.labelColor) .attr("font-size",this.css.labelFontSize) .attr("x",width - (this.timeAxis.label.length)*10) .attr("y",margin.bottom) .attr("text-anchor", "start") .text(this.timeAxis.label) // make an invisible rectangle over the chart + x-axis for the zooming behaviour xAxis.append("rect") .attr("x", 0).attr("y", 0) .attr("width",width).attr("height",margin.bottom) .attr("opacity",0) .attr("style","cursor:e-resize") .call(d3.zoom().on("zoom", () => this.zoomTimeAxis())) } // shift one position to the left shiftIntoView( points = this.dataSeries[0].points ) { let nPoints = points.length if (nPoints < 2) return this let r = this.xRange let x0 = this.timeType == "relative" ? points[0].x : 0 // only shift into view if we are adding points to the end of the visible chart if ( (r.max < points[nPoints-1].x - x0) && (r.max >= points[nPoints-2].x - x0)) { let delta = r.max - r.min r.max = points[nPoints-1].x - x0 r.min = r.max - delta } return this } drawLine(points,color) { // we need at least two points for the bar chart if (!points.length) return // notation let xScale = this.xScale let yScale = this.yScale let date = this.date // define a group for the chart area let chart = this.chartArea.svg.append("g") let zeroY = yScale(0) let zeroX = this.timeType == "relative" ? points[0].x : 0 let xMin = this.xRange.min, xMax = this.xRange.max // create a line generator - returns a path string - check if the data fits on the graph first let line = d3.line() .defined( d => {if ((d.x - zeroX > xMax)||(d.x - zeroX < xMin)) return false; else return true}) .x ( d => xScale( date.setTime(d.x - zeroX)) ) .y ( d => yScale(d.y)) .curve(d3.curveLinear) // add the line to the chart chart.append("path") .datum(points) .attr("fill", "none") .attr("stroke", color) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 3) .attr("d", line) } drawBar(points,color) { // we need at least two points for the bar chart if (points.length < 2) return // notation let xScale = this.xScale let yScale = this.yScale //let yMin = this.yRange.min, yMax = this.yRange.max let date = this.date // define a group for the chart area let chart = this.chartArea.svg.append("g") let barWidth = xScale(date.setTime(points[1].x)) - xScale(date.setTime(points[0].x)) let zeroY = yScale(0) let zeroX = this.timeType == "relative" ? points[0].x : 0 let xMin = this.xRange.min, xMax = this.xRange.max chart.selectAll("rect") .data(points) .join( enter => enter .filter( d => {if ((d.x - zeroX > xMax)||(d.x - zeroX < xMin)) return false; else return true }) .append("rect") .attr("x", d=>xScale(date.setTime(d.x - zeroX))-barWidth/2) .attr("y", d=>yScale(d.y)) .attr("width",barWidth) .attr("height",d => Math.abs(yScale(d.y) - zeroY) ) .attr("fill", color), // actually - there is no update section ! update => update .attr("fill","red") ) } drawScatter(points,color) {} // the zoom callback zoomTimeAxis( ) { // the source event let e = d3.event.sourceEvent // check the event type if (e.type == "wheel") this.scaleTimeAxis(e, this.xRange ) else if (e.type == "mousemove") this.moveTimeAxis(e, this.xRange) else return // redraw this.drawAll() } scaleTimeAxis(e, range) { // select a scale factor let k = +e.wheelDelta > 0 ? 0.9 : 1.1 // get the range equivalent of the pixel position of the cursor let cursor = this.xScale.invert(+e.offsetX - this.css.margin.left) let c = cursor.getTime() let a = range.min let b = range.max // check - a scale of 10 ms is the smallest if ((b-a < 10)&&(k<1)) return // c stays where it was range.min = k*(a-c) + c range.max = k*(b-c) + c } moveTimeAxis( e, range) { // get the move let move = this.xScale.invert(e.movementX).getTime() - this.xScale.invert(0).getTime() range.min -= move range.max -= move } zoomXY() { // the source event let e = d3.event.sourceEvent // check the event type if (e.type == "wheel") this.scaleYAxis(e, this.yRange ) else if (e.type == "mousemove") this.moveXY(e, this.xRange, this.yRange) else return // and draw the chart this.drawAll() } moveXY(e,xRange, yRange) { // get the time move let move = this.xScale.invert(e.movementX).getTime() - this.xScale.invert(0).getTime() xRange.min -= move xRange.max -= move // get the y-move move = this.yScale.invert(e.movementY) - this.yScale.invert(0) yRange.min -= move yRange.max -= move } }5c:T5fe,function getGroupSliders(color, count=250, mass=1, radius=0.01, speed=1) { const w = width/7 const sp = " " const form = html`

count

${sp}mass

${sp}radius

${sp}accel

`; form.oninput = () => { form.value = [ form.count.valueAsNumber, form.mass.valueAsNumber, form.radius.valueAsNumber, form.speed.valueAsNumber, form.color.value ]; form.querySelector("#o-count").innerHTML = form.count.value form.querySelector("#o-mass").innerHTML = form.mass.value form.querySelector("#o-radius").innerHTML = form.radius.value form.querySelector("#o-speed").innerHTML = form.speed.value } form.oninput(); return form; }5d:T543,// a linked list of elements class singleLinkedList { constructor() { this.n = 0 this.first = null this.last = null } reset() { this.n = 0 this.first = null this.last = null } length() { return this.n } // attach detach at the end of the list attach(p) { p.next = null if (this.last == null) { this.first = this.last = p } else { this.last.next = p this.last = p } this.n++ } detach() { if (this.last==null) return null let p = this.last if (this.last==this.first) this.first = this.last = null else { this.last = this.first while (this.last.next) this.last = this.last.next } this.n-- return p } // push and pop at the front of the list push(p) { p.next = this.first if (this.first == null) { this.first = this.last = p } else { this.first = p } this.n++ } pop() { if (this.first == null) return null let p = this.first this.first = p.next p.next = null if (this.first == null) this.last = null this.n-- return p } }5e:[] 44:{"id":"918a225b5b9bdcd1","slug":"the-kinetic-theory-of-gases","title":"The kinetic theory of gases","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2020-03-03T07:40:23.471Z","update_time":"$D2021-05-08T14:55:16.269Z","view_time":null,"first_public_time":"$D2020-03-12T09:21:54.590Z","has_unpublished_edits":null,"fork":true,"stars":6,"starred":false,"owner":{"type":"team","id":"a850affe6f62e128","login":"samvers","name":"Sam Verstraete","avatar_url":"https://avatars-next.observableusercontent.com/1988baa60c6ad1326c04b67570c17f170a07022a7592f5e5d1383703fa64940e","tier":"starter_2024","bio":"Visualize Analyze Simulate","following":false},"version":2733,"publish_version":2733,"role":null,"authored":false,"authors":[{"type":"individual","id":"0cabb0106e483fce","login":"samvers","name":"Sam Verstraete","avatar_url":"https://avatars-next.observableusercontent.com/1988baa60c6ad1326c04b67570c17f170a07022a7592f5e5d1383703fa64940e","tier":null,"bio":"Visualize Analyze Simulate","following":false}],"members":[{"type":"individual","id":"0cabb0106e483fce","login":"samvers","name":"Sam Verstraete","avatar_url":"https://avatars-next.observableusercontent.com/1988baa60c6ad1326c04b67570c17f170a07022a7592f5e5d1383703fa64940e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The kinetic theory of gases","cells":[{"id":0,"value":"md`# The kinetic theory of gases`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"md`## Setting up a simulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"md`We start with creating a studio based on the studio class.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"studio = { \n // clean up when required\n invalidation.then(() => {if (studio) studio.dispose(); return null})\n \n // create the studio - the parameter is the height of the window - default is 480\n const studio = new studioClass(400)\n \n //done\n return studio\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":642,"value":"md`Next we make the container for the simulation. We will use a cuboid container.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"// cuboid are settings from the sliders below\ncontainer = {\n if (this) {\n this.changeSize(studio.scene,{x:cuboid[0][0], y:cuboid[0][1], z:cuboid[0][2]})\n return this\n }\n else return new cuboidContainerClass(studio.scene,{x:cuboid[0][0], y:cuboid[0][1], z:cuboid[0][2]})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2619,"value":"md`In order to manage the collisions we need an octree for the container. An octree is a recurive subdivision of space in eight octants that allows to reduce significantly the number of particle pairs that have to be checked for collision.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"// we use an octree of level 3 for collision management - level 3 = 8³ + 8² + 8 + 1 = 585 leafs\noctree = {\n if (this) {\n this.sizeChange(container.bBox.min, container.bBox.max)\n return this\n }\n else return new octreeClass(container.bBox.min, container.bBox.max, 3)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"value":"md`Next we create the particles that will collide in the container. In order to make the simulation more interesting we make two groups of particles.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"group1 = {\n // clean up when required\n invalidation.then(() => {})\n \n // if the group does not exist - create it\n let group = this\n \n // get the group settings\n let count = param1[0],mass = param1[1],radius = param1[2],speed = param1[3], color = param1[4] \n\n if (group === undefined) group = new particleGroupClass(\"one\",color)\n group.change(studio.scene, count, mass, radius, speed, color)\n \n return group\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1556,"value":"group2 = {\n // clean up when required\n invalidation.then(() => {})\n \n // if the group does not exist - create it\n let group = this\n \n // get the group settings\n let count = param2[0],mass = param2[1],radius = param2[2],speed = param2[3], color = param2[4] \n\n // check if we need tp create\n if (group === undefined) group = new particleGroupClass(\"two\",color)\n \n // only the settings that have changed will be modified\n group.change(studio.scene, count, mass, radius, speed, color)\n \n return group\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"md`Colliding in the simulation is a two-step process. First, all collider candidates - both particle-particle and particle-wall - are collected in the *collisions* array, then that array is sorted according the time of collision in a given time-frame, and then the result of the collisions are calculated.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1019,"value":"collisions = new collisionClass()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"md`The results object is used to store the particle speed, speed histogram and cumulative distribution.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"results1 = new resultsClass(group1.name, param1[4], param1[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1558,"value":"results2 = new resultsClass(group2.name, param2[4], param2[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"md`Now we can run our first simulation. There are three rows of sliders below: the first row allows to change the dimensions of the particle container and the second and third row allow to change the parameters of the particle groups in the simulation. The charts below the simulation show the results of the simulation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"viewof cuboid = inputsGroup(\n [[\n slider({min: 0.1, max: 10, value: 2.5, step: 0.1, description:'container width (x)'}),\n slider({min: 0.1, max: 10, value: 1.0, step: 0.1, description:'container height (y)'}),\n slider({min: 0.1, max: 10, value: 1.0, step: 0.1, description:'container depth (z)'}),\n ]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1408,"value":"viewof param1 = getGroupSliders(\"#0080d0\",500,1,0.02,1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1533,"value":"viewof param2 = getGroupSliders(\"#ff8000\",500,5,0.04,0.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"chartSVG={\n style\n invalidation.then( () => {})\n return html`\n
\n \n \n
\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1731,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1338,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1334,"value":"md`On the *timechart* at the right we show the collisions per second and the resulting pressure in the cuboid. The collisions between particles and the collisions between particles and the container walls are shown. The scale at the left of the chart is for the collisions - pressure is here dimensionless because the mass and the speed of the particle is dimensionless.\n\nThe chart will shift to the left when it reaches the righ-hand side. If you move the chart, because you want to zoom in on some data, it will no longer shift but it will restart shifting if you move the endpoints into view again.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1614,"value":"md`## Doing experiments with the simulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1618,"value":"md`Suppose that we want to examine the relations between some of the parameters in the simulation, for example the relation between the number of particle-particle collisions and the size of the particles. It is actually quite simple to set something up like that.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2436,"value":"md`**Experiment 1 - collisions as a function of particle radius**\n\nWe start with creating a function to set up all objects that we have created for the simulation above, all in one step.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1796,"value":"function setUpExperiment(canvas,name, color, count, mass, radius, speed) {\n let studio = new studioClass(0,0,canvas)\n let container = new cuboidContainerClass(studio.scene,{x:1, y:1, z:1}, \"#0080d0\")\n let octree = new octreeClass(container.bBox.min, container.bBox.max, 3)\n let group = new particleGroupClass(name,color)\n group.change(studio.scene, count, mass, radius, speed, color)\n let collisions = new collisionClass()\n return {studio, container, octree, group, collisions}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2640,"value":"md`Next we create a simulation using that function.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1815,"value":"xp = {\n xpDisplay\n let xp = this\n if (xp == null) xp = setUpExperiment(\"xp-canvas\",\"xp 1\",xpParam[4], xpParam[0], xpParam[1],xpParam[2], xpParam[3])\n else xp.group.change(xp.studio.scene, xpParam[0],xpParam[1],xpParam[2],xpParam[3], xpParam[4])\n return xp\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2642,"value":"md`We change our set-up somewhat - we only have one group of particles and we place the results-chart next to the simulation. Push the *start* button to start the experiment.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1848,"value":"viewof xpParam = getGroupSliders(\"#ff8000\",300,5,0.04,2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2041,"value":"xpDisplay={\n style\n invalidation.then( () => {})\n return html`\n
\n \n \n
\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1813,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1624,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2071,"value":"viewof xpStart = {\n const form = html`\n
\n \n
`\n form.value = false\n form.toggle.onclick = event => {\n event.preventDefault()\n form.dispatchEvent(new CustomEvent(\"input\"))\n form.toggle.value = form.toggle.value==\"start\" ? \"stop\" : \"start\"\n };\n form.oninput= ()=> form.value = !form.value\n return form\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2154,"value":"md`Obviously it is not too difficult to change or extend the example above to get graphs for other experiments. In a second example we look at how the nr of collisions change as a function of the particle speed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2397,"value":"md`**Experiment 2 - pressure as a function of particle speed**\n\nIn this experiment we change speed of the particles at every time-step to a new value. We then give the simulation enough time for the speed distribution to settle into the maxwell-boltzman distribution - which is quite fast - and then we plot the nr of collisions/sec that we measured during that step.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2390,"value":"xp2 = {\n xp2Display\n let xp2 = this\n if (xp2 == null) xp2 = setUpExperiment(\"xp2-canvas\",\"xp2\",xp2Param[4], xp2Param[0], xp2Param[1],xp2Param[2], xp2Param[3])\n else xp2.group.change(xp2.studio.scene, xp2Param[0],xp2Param[1],xp2Param[2],xp2Param[3], xp2Param[4])\n return xp2\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2392,"value":"viewof xp2Param = getGroupSliders(\"#ff8000\",1000,1,0.01,1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2395,"value":"xp2Display={\n style\n invalidation.then( () => {})\n return html`\n
\n \n \n
\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2399,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2401,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2718,"value":"viewof xp2Run = toggle(\"start\", \"stop\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2168,"value":"md`## A real world example - air`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2182,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2194,"value":"air = (function makeAir() {\n let studio = new studioClass(0,0,\"air-canvas\")\n \n // we make a container of 100000 nm³ = 46.4³\n let rib = 46.4\n \n // put the camera frther away\n studio.camera.position.set(rib,rib*3/2,rib*3)\n studio.camera.lookAt(0,0,0)\n \n\n let container = new cuboidContainerClass(studio.scene, {x:rib, y:rib, z:rib})\n let octree = new octreeClass(container.bBox.min, container.bBox.max, 3)\n let collisions = new collisionClass()\n\n // we have three groups of molecules\n let nitrogen = new particleGroupClass(\"nitrogen\",\"#cccccc\")\n let oxygen = new particleGroupClass(\"oxygen\",\"#00ffff\")\n let argon = new particleGroupClass(\"argon\",\"#ff0000\")\n let speed = 5.0\n nitrogen.change(studio.scene, 1948, 4.65, 0.225, speed)\n oxygen.change(studio.scene,523, 5.31, 0.206, speed)\n argon.change(studio.scene,23, 6.64, 0.188, speed)\n \n // done\n return {studio, container, octree, collisions,nitrogen, oxygen, argon}\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2205,"value":"airDisplay={\n style\n return html`\n
\n \n
\n
\n
\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2216,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2286,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2654,"value":"md`## Conclusion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2657,"value":"md`There is a lot more that one could do with this set-up to show what the kinetice gas theory is about, to do virtual experiments and to deduce the laws of the theory etc. \n\nMy main goal with this notebook was to learn and test the observable platform - an experience I greatly enjoyed. I hope you do to.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"md`## Classes used in this notebook`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`### The studio`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md` The first thing we need for our simulation is a 3d setup - we'll call it a studio. The studio is built using the three.js library and consists of a camara, some lights and a renderer.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"md`### The particle container`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"md`The colliding particles are enclosed in a container. To make things easy for ourselves we choose a cuboid container with walls parallel to the axes of our frame of reference. The class for the container is defined below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":903,"value":"md`### The particles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"md`The particles are simple inelastic spheres. The two most important functions for a particle are, first, to check if it will collide in a given timeframe and, second, to calculate the new speed and position resulting from that collision.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"md`### The particle group`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"md`Particles of the same size and mass form a group. A group is identified by a name and a color. All the particles in a group have the same size and mass. Think of a group as a group of molecules for example.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"$56","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"md`### Managing collisions: the octree`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"md`The number of particles is an important parameter for the simulation because in principle checking for calculations increases as n². By using space sub-division - an octree - and with some reasonable assumptions about the particle speeds, we can keep the calculations manageable for a fairly large number of particles.\n\nAn octree is a recursive structure and defines eight octants at each new subdivision. If the bounding box of a moving object - defined by the position of the object at frame *n* and at frame *n+1* - is completely contained in the smallest possible octant, it is added to the collision list for that octant. We only have to check for collisions then with particles whose trajectory also fit in that octant or with particles that fit in an octant higher-up in the hierarchy.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"$57","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"md`### Keeping track of the results`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"md`The *collision* object keeps track of the collisions during each timestep. \n\nDuring each timestep we first check if two particles collide and, if so, put them on the collision list. When we have done that for all particles, we sort the array according collision time so we are sure we calculate the collisions in the right time order.\n\nThe collisions per second are stored in two arrays: one for the particle-particle collisions and one for the particle-wall collisions. We also have an array to store the pressure in the cuboid per second. Pressure is force over the surface, and the force in this simulation comes from the sum of every collision of a particle with the wall, where the force is the change in momentum for that particle.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"$58","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"md`The *results* object keeps track of the speed amplitude of each particle and calculates the speed histogram and cumulative distribution as required.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"$59","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"md`### Displaying the results`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1234,"value":"md`*Chartclass* allows to show one or several dataseries in an x-y chart with zooming and moving in the chart area and in the axes areas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1228,"value":"$5a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1242,"value":"md`*timeChartClass* is a variation on the chartclass above, where the x-coordinate is time. It redefines the functions that are typical for handling time, like the time-axis. It also allows to use absolute time, real calender date and wall-clock time, and relative time, i.e. time since the start of the chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1243,"value":"$5b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1479,"value":"md`### Group settings widget`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1483,"value":"$5c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2696,"value":"function toggle(v1, v2){\n const form = html`\n
\n \n
`\n form.value = false\n form.toggle.onclick = event => {\n event.preventDefault()\n form.dispatchEvent(new CustomEvent(\"input\"))\n form.toggle.value = form.toggle.value == v1 ? v2 : v1\n };\n form.oninput= ()=> form.value = !form.value\n return form\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2157,"value":"md`### Sundry`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"// cc stands for common constants\ncc = ({ \n freeClr: new THREE.Color(\"#00FF00\"), // color of the bounding box at a collision\n hitClr: new THREE.Color(\"#FF0000\"), // color of the bounding box without collision\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"$5d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2219,"value":"class chronoClass {\n // a function to get the length of the interval between frames\n constructor() {\n this.past = window.performance.now()\n this.nI = 0\n this.cumul = 0.0\n this.fps = 0\n }\n \n getInterval() {\n let present = window.performance.now()\n \n // delta in seconds\n let delta = (present - this.past)/1000\n this.past = present\n \n // also count the n of intervals and cumulative duration\n this.nI++\n this.cumul += delta\n \n // large intervals mean the simulation was stopped\n if (delta > 1.0) return 1/60; else return delta\n }\n \n // calculate the fps over n frames\n getFps(n) {\n // measure at least n intervals before changing the value\n if (n < this.nI) {\n if (this.cumul > 0) this.fps = this.nI/this.cumul \n this.nI = 0\n this.cumul = 0\n }\n return this.fps\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`\n## Software and libraries\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"THREE = require(\"three/build/three.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"OrbitControls = require(\"orbit-controls-es6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"import {inputsGroup} from \"@bumbeishvili/input-groups\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"import {slider, color, radio, checkbox, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`\n## Style settings for this notebook`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2512,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W5e","stdlib":"1"}} 45:"$44:body"