Lorenz System Explanation

Back to Visualization

This webpage implements a visualization of the Lorenz System, a set of three ordinary differential equations (ODEs) that describe chaotic behavior in a dynamical system. The visualization is created using the p5.js library, which is a JavaScript library for creating graphics and interactive experiences.

css

Setup and Constants

The Lorenz System is defined by three ODEs with three parameters (a, b, and c). In the given code, these constants are set as follows:

const a = 10;
const b = 28;
const c = 8/3;
    

Initial values for the variables x, y, and z are also set, and an empty array called "points" is created to store the points generated by the Lorenz System:

let x = 0.01, y = 0, z = 0;
let points = [];

css

Initializing the Lorenz System

The initLorenzSystem function sets the background color to black and the color mode to HSB (hue, saturation, brightness):

function initLorenzSystem() {
background(0, 0, 0, 255);
colorMode(HSB);
}

sql

Updating the Lorenz System

The draw function updates the Lorenz System by calculating the new values for x, y, and z based on the Lorenz System's ODEs:

let dt = 0.01;
let dx = (a * (y - x)) * dt;
let dy = (x * (b - z) - y) * dt;
let dz = (x * y)

    - c * z) * dt;
    
    x += dx;
    y += dy;
    z += dz;
    

The new x, y, and z values are then used to create a new vector, which is added to the 'points' array:

    points.push(createVector(x, y, z));
    

Drawing the Lorenz System

The draw function also takes care of rendering the Lorenz System on the canvas. It does this by translating the origin to the center of the canvas, scaling the system, and rotating the view:

    translate(width / 2, height / 2, -width / 2);
    scale(width / 75); // Adjust this value to control the size
    rotateX(PI / 4);
    

The stroke weight is set to 2 pixels, and no fill is applied. A variable 'hue' is initialized to 0, and the points in the 'points' array are connected using beginShape and endShape:

    strokeWeight(2);
    noFill();
    
    let hue = 0;
    
    beginShape();
    for (let v of points) {
    stroke(hue, 255, 255);
    vertex(v.x, v.y, v.z);
    hue += 0.1;
    if (hue > 255) {
    hue = 0;
    }
    }
    endShape();
    

This section of the draw function uses the HSB color mode to assign a color to each point based on its hue. As the Lorenz System is iterated, the hue value increases, creating a gradient effect across the path of the system.

HTML and CSS

The HTML file includes the necessary p5.js library and the script.js file containing the Lorenz System visualization. The body of the HTML page contains a div with class "container," which includes content about the person, such as their name, interests, and education. The CSS file styles the page, including setting the background color to transparent and positioning the canvas behind the content of the page:

    body {
        background-color: transparent;
    }
    
    canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    }
    

The rest of the CSS styles are responsible for the appearance of the container and its content, such as typography, colors, and spacing.