Created
May 31, 2017 14:35
-
-
Save jun-mitani/5be20e4678e9c4a6d4154acc695e7026 to your computer and use it in GitHub Desktop.
Lorenz attractor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="ja"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Lorenz attractor</title> | |
<style type="text/css"> | |
body { | |
margin: 0; | |
padding: 0; | |
} | |
</style> | |
<script type="text/javascript"> | |
// 2017.5.31 Jun Mitani | |
const POINT_R = 1; | |
const TIME_INTERVAL_MS = 1; | |
var points = new Array(); | |
var ctx; | |
var canvas; | |
var intervalID; | |
var p = 10; | |
var r = 28; | |
var b = 8.0/3.0; | |
var dt = 0.001; | |
function RPoint(x, y, z) { | |
this.x = x; | |
this.y = y; | |
this.z = z; | |
} | |
RPoint.prototype.update = function() { | |
var dx = -p * this.x + p * this.y; | |
var dy = -this.x * this.z + r * this.x - this.y; | |
var dz = this.x * this.y - b * this.z; | |
this.x += dx * dt; | |
this.y += dy * dt; | |
this.z += dz * dt; | |
} | |
function drawItem() { | |
ctx.clearRect(0, 0, canvas.width, canvas.height); | |
for(var i = 0; i < points.length; i++) { | |
rpoint = points[i]; | |
rpoint.update(); | |
ctx.beginPath(); | |
var sx = rpoint.x * 10 + canvas.width / 2; | |
var sy = rpoint.y * 10 + canvas.height / 2; | |
ctx.arc(sx, sy, POINT_R*2, 0, Math.PI*2, true); | |
ctx.fill(); | |
} | |
} | |
function init() { | |
for (var i = 0; i < 1000; i++) { | |
points.push(new RPoint(1, 1, 1 + i * 0.001)); | |
} | |
canvas = document.getElementById("mycanvas"); | |
canvas.width = window.innerWidth;; | |
canvas.height = window.innerHeight; | |
if (canvas.getContext) { | |
ctx = canvas.getContext('2d'); | |
ctx.lineWidth = 1; | |
ctx.strokeStyle = 'rgba(0, 0, 0, 1.0)'; | |
ctx.fillStyle = 'rgba(0, 0, 0, 1.0)'; | |
if(intervalID) clearInterval(intervalID); | |
intervalID = setInterval(drawItem, TIME_INTERVAL_MS); | |
} | |
} | |
</script> | |
<style type="text/css"> | |
canvas { border: 1px solid #000000; } | |
</style> | |
</head> | |
<body onload="init()" onresize="init()"> | |
<canvas id="mycanvas" width="800" height="600"></canvas> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment