25:["$","title",null,{"children":"The Lorenz System and its Initial Conditions | Jamison Talley | Observable"}] 49:T4ca,

Simulation 1:

Simulation 2:

(x)
(y)
(z)
(σ)
(b)
(r)

${x1} ${y1} ${z1} ${sigma1} ${b1} ${r1}

(x)
(y)
(z)
(σ)
(b)
(r)

${x2} ${y2} ${z2} ${sigma2} ${b2} ${r2}

${lorenz_animation}

4a:T479,second_view = { run const data = run_simulation(x1.value * 10,y1.value * 10,z1.value * 10,10,2.6667,28) const color_data = [{'dim': 'x', 'value': x1.value}, {'dim': 'y', 'value': y1.value}, {'dim': 'z', 'value': z1.value}] var second_plot = Plot.plot({ grid: true, title: "Movement Isolated By Axis (Simulation 1)", width: width, style: { backgroundColor: '#293845', color: '#ffffff', }, x: {label: "time", ticks: "none"}, y: {label: "coordinate value"}, color: { type: "categorical", domain: ['x','y','z'], range: ['#B54D4A','#71B656','#4AB2B5'], legend: true}, marks: [ Plot.frame(), Plot.dot(color_data, { x: 0, y: 'value', stroke: 'dim' }), Plot.line(data, { x: (d,i) => i, y: (d) => d["x"] / 10, stroke: '#B54D4A', }), Plot.line(data, { x: (d,i) => i, y: (d) => d["y"] / 10, stroke: '#71B656', }), Plot.line(data, { x: (d,i) => i, y: (d) => d["z"] / 10, stroke: '#4AB2B5', }), ]}) return second_plot }4b:T7dc,### About the Lorenz System The [Lorenz System](https://en.wikipedia.org/wiki/Lorenz_system) is a system of ODEs that is defined as follows: x' = σ(y - x) y' = x(r - z) - y z' = xy - bz This system is very sensitive to initial conditions, but with some specific choices of σ, b, and r, one can observe some very interesting stable scenarios. For example σ = 10, b = 8/3, and r = 28 produces the characteristic Lorenz attractors irrespective of the initial spacial conditions. There is no analytical solution for the Lorenz system, so we use numerical methods to simulate the system with different initial conditions. ### About the Project: Much of this project was aided by Gould's *An Introduction to Computer Simulation Methods*. The goal of this project was to help the viewer develop some intuition about the Lorenz System, as the high-dimensional nature of the system makes it hard to wrap your head around it when you are first introduced to it. A strong focus in this project was making the data visualization clear and accessible. The choice of color scheme was made to be color-blind friendly and visually appealing. The data is simulated using the user-selected values for initial conditions, the Lorenz Equations, and a JavaScript ODE integrator using the [fourth-order Runge-Kutta](https://en.wikipedia.org/wiki/Runge%E2%80%93Kutta_methods) method. I used NumJS to make the integrator in JavaScript, which is the `run_simulation` function in this notebook. I utilized a JavaScript library called THREE, as well as D3, to create the 3D display. The static view was done using Observable Plot and D3. The most significant liberty I took in this project was mirroring the two simulations about the z axis in the animated view. This allows one to view two simulations with two separate initial conditions side-by-side, as in the stable state set by default, the Lorenz Attractors appear entirely in the positive z domain. In effect, the horizontal axes can be thought of as: \[+x, +z, -x, +z]. 4c:T1649,lorenz_animation = { run let camera, renderer, scene, controls, cubeMesh, cubeGroup, folder, renderOnDemand=true, renderRequested=false, mainLight, material, height=400; init(); function createCamera() { // Create a Camera const fov = 15; // AKA Field of View const aspect = 1; const near = 0.1; // the near clipping plane const far = 1000; // the far clipping plane camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.set(-24, 20, -26); } function createLights() { // Create a directional light const ambientLight = new THREE.HemisphereLight(0xddeeff, 0x202020, 8); scene.add(ambientLight); } function createMeshes() { const group = new THREE.Group(); cubeGroup = group; const gridHelper2 = new THREE.GridHelper( 10, 10 , 'black', 'grey'); gridHelper2.rotation.x = Math.PI * -.5; gridHelper2.material.transparent = true; gridHelper2.material.opacity = 0.3; gridHelper2.material.clipIntersection = true; group.add(gridHelper2); const gridHelper = new THREE.GridHelper( 10, 10 , 'black', 'grey'); group.add(gridHelper); scene.add(group); } function createAnimation(group){ const dot_geo = new THREE.SphereGeometry( 0.05, 2, 16 ) const dot_mat = new THREE.MeshStandardMaterial({ color: 'grey', flatShading: true, opacity: 1, transparent: true, }) const point_1 = new THREE.Mesh( new THREE.SphereGeometry( 0.1, 32, 16 ), new THREE.MeshStandardMaterial({ color: 'black', }) ); point_1.position.set(x1.value, y1.value,z1.value,) group.add(point_1) const point_2 = new THREE.Mesh( new THREE.SphereGeometry( 0.1, 32, 16 ), new THREE.MeshStandardMaterial({ color: 'black', }) ); point_2.position.set(x2.value, y2.value,z2.value,) group.add(point_2) const data_1 = run_simulation(x1.value * 10,y1.value * 10, z1.value * 10,sigma1.value,b1.value,r1.value) const data_2 = run_simulation(x2.value * 10,y2.value * 10, z2.value * 10,sigma2.value,b2.value,r2.value) setTimeout(animate_simulation, 2000, data_1, point_1, d3.interpolateCividis) setTimeout(animate_simulation, 40000, data_2, point_2, d3.interpolateMagma, -1) function animate_simulation(data, point,color_scheme, reverse=1) { var mesh_path = Array(data.length) var dot_color = "" mesh_path[0] = new THREE.Mesh(dot_geo, dot_mat); mesh_path[0].position.set( data[0]['x'] / 10, data[0]['y'] / 10, data[0]['z'] / (10 * reverse)) for (let i1 = 2; i1 < data.length; i1++){ setTimeout(() => { dot_color = color_scheme(i1 / data.length) mesh_path[i1 - 1] = new THREE.Mesh(dot_geo, new THREE.MeshStandardMaterial({ color: dot_color, flatShading: true, })); mesh_path[i1 - 1].position.set( data[i1]['x'] / 10, data[i1]['y'] / 10, data[i1]['z'] / (10 * reverse)) group.add(mesh_path[i1 - 1]) point.position.set( data[i1]['x'] / 10, data[i1]['y'] / 10, data[i1]['z'] / (10 * reverse)) if (i1 == data.length - 1){ console.log("returned") return true } }, i1 * 3) } } } function createRenderer() { // create the renderer renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(600, 600); renderer.setPixelRatio(window.devicePixelRatio); renderer.gammaFactor = 2.2; renderer.gammaOutput = true; renderer.physicallyCorrectLights = true; } function init() { // create a Scene scene = new THREE.Scene(); // Set the background color scene.background = new THREE.Color('#e8e6dc'); createCamera(); createLights(); createMeshes(); createAnimation(cubeGroup); createRenderer(); controls = new THREE.OrbitControls(camera, renderer.domElement); invalidation.then(() => (controls.dispose(), renderer.dispose())); } function render() { renderer.render(scene, camera); } function update() { cubeGroup.rotation.y += 0.003; } function onWindowResize() { camera.aspect = 1; camera.updateProjectionMatrix(); renderer.setSize(600, 600) } window.addEventListener('resize', onWindowResize) function animationLoop(){ update(); render(); } controls.update() controls.enabled = false; controls.enableDamping = true; controls.dampingFactor = 0.05; controls.rotateSpeed = 0.1; renderer.setAnimationLoop(animationLoop) invalidation.then(() => { controls.dispose(); renderer.dispose(); window.removeEventListener('resize', onWindowResize); }); yield renderer.domElement }4d:T4d0,function run_simulation(x=0,y=0,z=0,sigma=10.0,b=2.6666,r=28) { let u_0 = nj.array([x,y,z]) let t_0 = 0 let t_end = 25 var times = [t_0] var states = [to_coords(u_0)] var t = t_0 let dt = 0.0025 let dt_ = dt let data = [] let u_1, k1, k2, k3, k4, dudt function to_coords(position_array){ return {'x':position_array.get(0), 'y':position_array.get(1), 'z':position_array.get(2)} } function rhs(u) { dudt = nj.array([(-sigma * u.get(0)) + (sigma * u.get(1)), (-u.get(0) * u.get(2)) + r * u.get(0) - u.get(1), (u.get(0) * u.get(1)) - (b * u.get(2))]) return dudt } function step(t, dt, u_0) { k1 = rhs(u_0) k2 = rhs(u_0.add(k1.multiply(dt / 2.0))) k3 = rhs(u_0.add(k2.multiply(dt / 2.0))) k4 = rhs(u_0.add(k3.multiply(dt))) u_1 = u_0.add((k1.add(k2.multiply(2)).add(k3.multiply(3)).add(k4)).multiply(dt / 6.0)) return u_1 } let iterations = t_end / dt for (let i1 = 0; i1 < iterations; i1++){ dt_ = Math.min(dt,t_end-t) u_1 = step(t,dt_,u_0) t = t + dt_ u_0 = u_1 times.push(t) states.push(to_coords(u_1)) } let t_vals = nj.array(times) return states }4e:[] 29:{"id":"cf706d85d6118bc3","slug":null,"title":"The Lorenz System and its Initial Conditions","thumbnail":"76ffbade660da588ebf450495d013515dea86741b2d5990ed19dc86bad988f00","access_level":"public","create_time":"$D2024-12-04T20:32:28.748Z","update_time":"$D2024-12-04T21:09:16.994Z","view_time":null,"first_public_time":"$D2024-12-04T20:56:23.183Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4c9ae63889372768","login":"jamisontalley","name":"Jamison Talley","avatar_url":"https://avatars-next.observableusercontent.com/42ec7f5aee830c629e021d48e8db9817efe4647d99dcd429dc2a7babec4515c2","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":55,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6deee0cfc98c3444","login":"jamison-talley","name":"Jamison Talley","avatar_url":"https://avatars-next.observableusercontent.com/e28d313ec82186113bcf14eef60d33b86b5e2aee5956d76932e551bc18ab2f1d","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"4c9ae63889372768","login":"jamisontalley","name":"Jamison Talley","avatar_url":"https://avatars-next.observableusercontent.com/42ec7f5aee830c629e021d48e8db9817efe4647d99dcd429dc2a7babec4515c2","tier":"starter_2024","role":"editor"},{"type":"individual","id":"6deee0cfc98c3444","login":"jamison-talley","name":"Jamison Talley","avatar_url":"https://avatars-next.observableusercontent.com/e28d313ec82186113bcf14eef60d33b86b5e2aee5956d76932e551bc18ab2f1d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The Lorenz System and its Initial Conditions","cells":[{"id":0,"value":"# The Lorenz System and its Initial Conditions\nAn interactive visualization of the Lorenz System aimed at building intuition.\n\n*Hint: Start by just playing with the x, y, and z sliders*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"

${viewof run}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"$49","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"viewof run = Inputs.button(html`

GO!

`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"x1 = Inputs.range([-10,10], {value: 0.1, step: 0.1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"y1 = Inputs.range([-10,10], {value: 0, step: 0.1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"z1 = Inputs.range([-10,10], {value: 0, step: 0.1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"sigma1 = Inputs.range([-20,20], {value: 10, step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"b1 = Inputs.range([-10,10], {value: 2.66666, step: 0.1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"r1 = Inputs.range([-50,50], {value: 28, step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"x2 = Inputs.range([-10,10], {vale: 0, step: 0.1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"y2 = Inputs.range([-10,10], {vale: 0, step: 0.1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"z2 = Inputs.range([-10,10], {vale: 0, step: 0.1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"sigma2 = Inputs.range([-20,20], {value: 10, step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"b2 = Inputs.range([-10,10], {value: 2.66666, step: 0.1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"r2 = Inputs.range([-50,50], {value: 28, step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.99.0/build/three.min.js\");\n await require(\"three@0.99.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return window.THREE;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"d33d = require('https://unpkg.com/d3-3d/build/d3-3d.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"nj = require('https://cdn.jsdelivr.net/gh/nicolaspanel/numjs@0.15.1/dist/numjs.min.js');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null