Lorenz Attractor

In this example below you will see how to do a Lorenz Attractor with some HTML / CSS and Javascript

View in -WEBKIT; Glitchy in FireFox*** Now I've coded the Lorenz Attractor before in Java, animated and rendered it with SVG through multiple iterations - but WoW...D3.js && Canvas takes it to a whole 'notha level!!

Thumbnail
This awesome code was written by tmrDevelops, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tmrDevelops ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Lorenz Attractor </title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- View in *Webkit browser - Glitchy in Firefox--

Some Background Info: 
 The Lorenz Attractor is a system
 of differential equations derived from simple models of weather phenomena. The beauty of it lies both in the mathematics and in the visualization of the model. Mathematically, the Lorenz Attractor is simple yet results in chaotic and emergent behavior. Visually, when the values given by the equations are plotted in two or three dimensional space, the behavior is reminiscent of an orbit of an object around two central origins; when looked at from the appropriate dimension the pattern appears similar to a figure eight !-->
<body>
  <div class='intro'>
    <h1>The Lorenz Attractor</h1>
    <h3>Move Your Mouse Around...</h3>
 </div>
</body>
  <script src='https://d3js.org/d3.v3.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tmrDevelops/lorenz-attractor-ByaYEY */
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700);
body {
  background: #000;
  height:100vh; 
  font-family: 'Ubuntu', sans-serif;
}
.intro{
  text-align:center;
	background:rgba(155, 89, 182,0.7);
  top:0; 
	padding:1em;
}
h1{ 
	color:#fff; 
	font-size:1.5em;
}
h3{
  font-size:1em;
  color:#fff;
}

/*Downloaded from https://www.codeseek.co/tmrDevelops/lorenz-attractor-ByaYEY */
/*LIfe's Not Complete Without Art (Expand Your Editor > ASCII Is Not Responsive ;)

                        b                         .$                    
                        4r                       .$$                    
                        4$r                     z$$$                    
                        $$$c                   d. $$                    
                        $$d$$c.eeeeePeee..   z"4-'P$                    
                       J$$$$$dP3"""*$*$$ee$$$$$ " $$F                   
                      z$*.P*$ "- .="         '\  $$$$                   
                    .P    'F" *e"               \/$$$                   
                    "      4  ^                  ^ $$b                  
                           4$%                    ^$$$r                 
                            F                      4$$$                 
                           4                        $$$b                
                .    4$b   P           .ec          $$$$b               
                     $"               4$P""         $$$$$$c             
               ^    4$$$r 4"          4$eec        4$$$$P"*$e           
     \         .     $$$   4          ^$$$F        $$$$$E.TMR$$"        
      ^\       F            r                     d$$P"  *$$$P .^       
         -.    .        %   ^.                   J$P      $$F.      /   
              "$\    .z.      -                 $P" ^    .P      .^     
                  ""3$$$$$$e    ".           .d"     ^   $F  -"         
                ^   $$$$$$$$L       ^""=="""""      /   ^               
                 -  3$ee= "$"                      /  ."                
                  ^. ^****"                      z"  ^                  
                                               z"  /                    
                      -.                   .e$"  =                      
                        ^ ec..... ....ee$$*"  .^                        
                         ".  """**"""     .=^                           
                              "  === """                             
|Felix|

*/


//I've included as many comments as possible for the variables associated with Lorenz Mathamatics so you can edit and play.  The rest of the script should be self - explanatory, if not, you can refer to the D3.js docs.

//Lorenz Attractor Parameters
	var dt = 0.005, // (δτ) Represents time. Draw curve - higher the value, straighter the lines
    p = 28, // (ρ) point of origin
    w = 10,  // (σ)width of main element - higher the number, narrower the width
    beta = 8 / 3,  // (β) points of equilibrium - this applied value results in the infinity symbol. higher values will break the equilibrium, causing the ends to separate and spread. When ρ = 28, σ = 10, and β = 8/3, the Lorenz system has chaotic solutions; it is this set of chaotic solutions that make up the Lorenz Attractor (the infinity symbol).  If ρ < 1 then there is only one equilibrium point, which is at the origin. This point corresponds to no convection. All orbits converge to the origin when ρ  < 1.  The 'fork' occurs at ρ = 1, or ρ > 1 Try it. 
      
	//Below x, y, and z values are the components of a given three dimensional location in space
    x0 = .5,   //change in x,y, or z with respect to time
    y0 = .5,   //"                                       "
    z0 = 10;   //"                                       "

var width = 1200,
    height = 600;

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

//Color Range
var color = d3.scale.linear()
    .domain([0, 20, 30, 45])
    .range(["yellow", "orange", "brown", "purple"])
    .interpolate(d3.interpolateHcl);

var $ = canvas.node().getContext("2d");

// set how the new images are drawn onto the existing image. 'lighter' will  display the new over the old

$.globalCompositeOperation = "lighter";
$.translate(width / 2, height / 2);
$.scale(12, 8);
$.lineWidth = .25;

//mouse reactions - included only for interactive fun
d3.select("canvas").on("mousemove", function() {
  var m = d3.mouse(canvas.node());
  x0 = (m[0] - width / 2) / 12;
  y0 = (m[1] - height / 2) / 8;
  z0 = 10;
});

//consistent timing of animations when concurrent transitions are scheduled for fluidity
d3.timer(function() {
  var x = x0 + (Math.random() - .5) * 4,
      y = y0 + (Math.random() - .5) * 4,
      z = z0 + (Math.random() - .5) * 4,
      n = Math.random() * 30 | 0,
      t1 = Math.random() * 500;

  d3.timer(function(t0) {
    for (var i = 0; i < n; ++i) {
      $.strokeStyle = color(z);
      $.beginPath();
      $.moveTo(x, y);
      x += dt * w * (y - x);
      y += dt * (x * (p - z) - y);
      z += dt * (x * y - beta * z);
      $.lineTo(x, y);
      $.stroke();
    }
    return t0 > t1;
  });

  $.save();
  $.setTransform(1, 0, 0, 1, 0, 0);
  
  //source-atop draws old image on top of the new image, eliminating the part of the old image that is outside of the new image range.
  $.globalCompositeOperation = "source-atop";
  $.fillStyle = "rgba(0,0,0,.03)";
  $.fillRect(0, 0, width, height);
  $.restore();
});

Comments