Skip to content

Instantly share code, notes, and snippets.

@aemkei
Forked from 140bytes/LICENSE.txt
Created October 27, 2011 17:16
Show Gist options
  • Star 33 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save aemkei/1320178 to your computer and use it in GitHub Desktop.
Save aemkei/1320178 to your computer and use it in GitHub Desktop.
Lorenz Attractor - 140byt.es

Lorenz Attractor - 140byt.es

The Lorenz Attractor is a fractal structure corresponding to the long-term behavior of the Lorenz oscillator.

The Lorenz oscillator is a 3-dimensional dynamical system that exhibits chaotic flow, noted for its lemniscate shape.

Check out the example!

For more information

See the 140byt.es site for a showcase of entries (built itself using 140-byte entries!), and follow @140bytes on Twitter.

To learn about byte-saving hacks for your own code, or to contribute what you've learned, head to the wiki.

140byt.es is brought to you by Jed Schmidt, with help from Alex Kloss. It was inspired by work from Thomas Fuchs and Dustin Diaz.

function(
h, // some
a, // ... magic
b, // ... arguments
c,
x, // x coord
y, // y coord
z, // z coord
j // callback to pass x,y,z
){
setInterval( // run in cycles
function(){
j( // execute callback
x+=h*a*(y-x), // and pass new coords
y+=h*(x*(b-z)-y), // calculate new values
z+=h*(x*y-c*z)
)
}, 9)
}
function(h,a,b,c,x,y,z,j){setInterval(function(){j(x+=h*a*(y-x),y+=h*(x*(b-z)-y),z+=h*(x*y-c*z))},9)}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "lorenzAttractor",
"description": "A 3-dimensional dynamical system that exhibits chaotic flow.",
"keywords": [
"math",
"3d",
"oscillator",
"visual",
"animation"
]
}
<!DOCTYPE html>
<title>Foo</title>
<body></body>
<a href="https://gist.github.com/1320178">Source code</a>
<style type="text/css" media="screen">
html {
background: #666;
position: relative;
}
a {
bottom: 10px;
left: 10px;
position: absolute;
}
body {
width: 500px;
height: 500px;
background: white;
}
div {
background-color: #069;
opacity: 0.5;
width: 5px;
height: 5px;
overflow: hidden;
display: block;
position: absolute;
margin: 250px 250px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
}
</style>
<script>
var lorenz =
function(h,a,b,c,x,y,z,j){setInterval(function(){j(x+=h*a*(y-x),y+=h*(x*(b-z)-y),z+=h*(x*y-c*z))},9)}
function init(){
var max = 1000, i = 0, divs = [];
for (i=0; i < max; i++){
div = document.createElement("div");
divs.push(div);
document.body.appendChild(div);
}
function callback(x,y,z){
divs[i=(i+1)%max].style.cssText =
"left:" + (x*8) + "px;" +
"top:" + (y*8) + "px;" +
"width:" + Math.abs(z/4) + "px;" +
"height:" + Math.abs(z/4) + "px;"
}
lorenz(0.008,10,28,8/3,0,10,10,callback);
}
init();
</script>
@aemkei
Copy link
Author

aemkei commented Oct 29, 2011

So, replaced setTimeout with setInterval to get it down to 101 bytes.
So now we have 39 chars left to inject some more logic .

@atk
Copy link

atk commented Oct 29, 2011

Maybe we could make it use canvas to draw the result?

@oroce
Copy link

oroce commented Oct 29, 2011

instead of function(){ j() } you can write j.bind() :)

@atk
Copy link

atk commented Oct 30, 2011

This will work only in ES5-compatible JS engines.

@aemkei
Copy link
Author

aemkei commented Oct 30, 2011

Okay, this is my 135 bytes version using canvas:

function(h,a,b,c,x,y,z,i,t,s,o){t.beginPath();for(;i--;)t.lineTo(o+s*(x+=h*a*(y-x)),o+s*(y+=h*(x*(b-z)-y))),z+=h*(x*y-c*z);t.stroke()}

Usage:

var ctx = document.getElementById("canvas").getContext("2d");
lorenz(0.008,10,28,8/3,0,10,10,10000,ctx,10,250);

See the demo: http://fiddle.jshell.net/aemkei/d99PL/show/

I somehow prefer the animated version. What do you think?

@aemkei
Copy link
Author

aemkei commented Oct 30, 2011

Save one byte:

function(h,a,b,c,x,y,z,i,t,s,o){t.beginPath();for(;i--;z+=h*(x*y-c*z))t.lineTo(o+s*(x+=h*a*(y-x)),o+s*(y+=h*(x*(b-z)-y)));t.stroke()}

@aemkei
Copy link
Author

aemkei commented Oct 30, 2011

And there is no need for beginPathso down to 119 bytes:

function(h,a,b,c,x,y,z,i,t,s,o){for(;i--;z+=h*(x*y-c*z))t.lineTo(o+s*(x+=h*a*(y-x)),o+s*(y+=h*(x*(b-z)-y)));t.stroke()}

@robinwhittleton
Copy link

Lovely! On a presentational level -moz-border-radius has been removed in Gecko recently so you’re getting squares there. At this point you don’t need the prefixed version for any browser.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment