All examples By author By category About

gcalmettes

Full window Github gist

Visual exploration of the DeQuan Li attractor

Real-time orthographic projection of the Dequan Li attractor.

The attractor shape can be explored while the attractor is live-rendered by selecting different sets of angles to rotate the scene along the X and Z axes. Initials values of x,y,z (initial data point) can be chosen as well.

The rendering of the attractor is done by canvas, while the axis are rendered by svg.

Visualization of other attractors:

Lorenz attractor
Rossler attractor (svg version, canvas version)

<!DOCTYPE html>
<meta charset="utf-8">

<style>

label {
  display: inline-block;
  width: 5em;
  font-family: sans-serif;
  font-size: 1.1em;
}
legend {
  display: inline-block;
  width: 20em;
  font-family: sans-serif;
  font-size: 1.1em;
}
span {
  font-size: 1.1em;
}

input[type="range"] {
  width: 20em;
}
input[type="number"] {
  width: 4em;
}

canvas, svg {
  position: absolute;
  top: 5;
  left: 0;
}

#redrawButton {
  position: absolute;
  left: 100px;
  top: 40px;
}

#initialParams {
  position: absolute;
  left: 450px;
  top: 0px;
}

.axisLabel {
  font-family: sans-serif;
  font-size: 20;
}
</style>

<div>
  <div id="initialParams">
    <legend>Initial conditions:</legend>
    x:
    <input type="number" id="xi" value="1.5"><br>
    y:
    <input type="number" id="yi" value="3.2"><br>
    z:
    <input type="number" id="zi" value="0.4"><br>
    <button id="redrawButton">Redraw</button>
  </div>
  <div>
    <label>Z rotation:</label>
    <input type="range" min="0" max="360" id="theta" value=30>
    <span id="theta-value">30</span>
  </div>
  <div>
    <label>X rotation:</label>
    <input type="range" min="0" max="360" id="phi" value=10>
    <span id="phi-value">10</span>
  </div>
  <div>
    <label>Scale:</label>
    <input type="range" id="scale" min="0.01" max="5" step="0.01" value=0.9>
    <span id="scale-value">0.9</span>
  </div>
</div>
<div>
  <canvas width="960" height="500"></canvas>
  <svg width="960" height="500"></svg>
</div>

//canvas linear gradient
const canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");

const canvasGradient = context.createLinearGradient(80, 0, 960, 0);
canvasGradient.addColorStop(0, '#EDCA3A');
canvasGradient.addColorStop(0.25, '#F25754');
canvasGradient.addColorStop(0.50, '#1FBAD6');
canvasGradient.addColorStop(0.75, '#E6B0F1');
canvasGradient.addColorStop(1, '#8BC53F');

//Append marker in svg defs
const svg = d3.select("svg")
const defs = svg.append("defs");
const marker = defs.append('marker')
    .attr("id", "arrow")
    .attr("refX", 12)
    .attr("refY", 6)
    .attr("markerUnits", 'userSpaceOnUse')
    .attr("markerWidth", 12)
    .attr("markerHeight", 18)
    .attr("orient", 'auto')
  .append('path')
    .attr("d", 'M 0 0 12 6 0 12 3 6');

//initial conditions and parameters for Rossler system
let t = 0.001,
    iter = 0

const dequanliParameters = {
  a: 40,
  c: 11.0/6.0,
  d: 0.16,
  e: 0.65,
  k: 55,
  f: 20
}

//initial angles parameters
let theta = +d3.select("#theta-value").text(),
    phi = +d3.select("#phi-value").text(),
    scaleFactor = +d3.select("#scale-value").text(),
    x = +d3.select("#xi")._groups[0][0].value,
    y = +d3.select("#yi")._groups[0][0].value,
    z = +d3.select("#zi")._groups[0][0].value

let rotTheta = theta * - Math.PI / 180,  //z axis rotation (20deg)
    rotPhi = phi * Math.PI / 180,         //y axis rotation (20deg)
    initialPoint;

const dx = 480,
      dy = 250,
      centerOrigin = {x: 0, y: 0, z: 0},   //rotation origin
      currentProjection = orthoProjectXZ   //add other projections later?

//To store spatial coordinates
const Vertex = function(x, y, z) {
  this.x = parseFloat(x);
  this.y = parseFloat(y);
  this.z = parseFloat(z);
};

const Vertex2D = function(x, y) {
  this.x = parseFloat(x);
  this.y = parseFloat(y);
};

function projectPoint(d){
  //rotate point in space and return current chosen projection
  let rotatedPoint = rotateVertex(d, initialPoint, rotTheta, rotPhi)
  //initial drawn point will be drawn at (dx,dy), and rotation will be done around it
  rotatedPoint.x = rotatedPoint.x - initialPoint.x
  rotatedPoint.y = rotatedPoint.y - initialPoint.y
  rotatedPoint.z = rotatedPoint.z - initialPoint.z

let projectedPoint = currentProjection(rotatedPoint, dx, dy, scaleFactor)
  return projectedPoint
}

//path generator on the projected data
const lineTransform = d3.line()
    .x(d => projectPoint(d).x)
    .y(d => projectPoint(d).y)
    .curve(d3.curveCardinal)
    .context(context);

const lineGeneratorAxes = d3.line()
    .x(d => d.x)
    .y(d => d.y)
    .curve(d3.curveBasis)

// svg group element for the axes
const gTrackMain = svg.append("g")
  .attr("class", "gTrack")
  .attr("transform",
    `translate(80, 150)`)

function drawScene() {
  //initial dataPoint
  let dataPoint = new Vertex(x, y, z)
  //initial transformed point, to set initial drawn point to zero
  initialPoint = rotateVertex(new Vertex(x, y, z), new Vertex(x, y, z), rotTheta, rotPhi)

//store the iterations of the solution of Rossler
  let dataMain = []
  dataMain.push(new Vertex(x, y, z))

drawAxes()

let timeInterval = d3.timer(function() {
    dequanli(drawMain)
  });

/////////////////////////////////////////
  function dequanli(callback) {
    //update dataPoint position
    dataPoint.x += t * (dequanliParameters.a * (dataPoint.y - dataPoint.x) + dequanliParameters.d * dataPoint.x * dataPoint.z)
    dataPoint.y += t * (dequanliParameters.k * dataPoint.x + dequanliParameters.f * dataPoint.y - dataPoint.x * dataPoint.z)
    dataPoint.z += t * (dequanliParameters.c * dataPoint.z + dataPoint.x * dataPoint.y - dequanliParameters.e * Math.pow(dataPoint.x, 2))

callback(new Vertex(dataPoint.x, dataPoint.y, dataPoint.z));
  }
  //callback
  function drawMain(point) {
    //add latest point projection to data
    dataMain.push(point)

// let projectedPoint = currentProjection(point, dx, dy, scaleFactor)
    let projectedPoint = projectPoint(point)

//update visualization of dot and dotTrack
    context.clearRect(0, 0, 960, 500);
    context.beginPath();
    lineTransform(dataMain);
    context.lineWidth = 0.5;
    context.strokeStyle = canvasGradient;
    context.stroke();
    //dot
    context.beginPath();
    context.arc(projectedPoint.x, projectedPoint.y, 3, 0, 2*Math.PI);
    context.fillStyle = 'rgba(225,225,225,0.3)';
    context.fill()
    context.strokeStyle = 'gray';
    context.stroke();
  }
}

function drawAxes(){

const axisLabels = ['x', 'y', 'z']

//axes vertex and projection of axes
  let axeCenter = rotateVertex(new Vertex(0, 0, 0), centerOrigin, rotTheta, rotPhi)
  let axeX = rotateVertex(new Vertex(50, axeCenter.y, axeCenter.z), centerOrigin, rotTheta, rotPhi)
  let axeY = rotateVertex(new Vertex(axeCenter.x, 50, axeCenter.z), centerOrigin, rotTheta, rotPhi)
  let axeZ = rotateVertex(new Vertex(axeCenter.x, axeCenter.y, 50), centerOrigin, rotTheta, rotPhi)

let axeSystemMain = [
    [currentProjection(axeCenter), currentProjection(axeX)],  //x axis line
    [currentProjection(axeCenter), currentProjection(axeY)],  //y axis line
    [currentProjection(axeCenter), currentProjection(axeZ)]   //z axis line
  ]

//add paths for axes
  const axes = gTrackMain.selectAll(".axisPath")
      .data(axeSystemMain)

axes.exit().remove()

const axesEnter = axes.enter()
    .append("path")
      .attr("class", "axisPath")
      .attr("d", d => lineGeneratorAxes(d))
      .attr("stroke", "black")
      .attr("marker-end", "url(#arrow)")
    .merge(axes)
      .attr("d", d => lineGeneratorAxes(d))

const axesText = gTrackMain.selectAll(".axisLabel")
      .data(axeSystemMain)

axesText.exit().remove()

const axesTextEnter = axesText.enter()
    .append("text")
      .attr("class", "axisLabel")
      .attr("x", d => d[1].x + 5)
      .attr("y", d => d[1].y - 2)
      .text((d,i) => axisLabels[i])
    .merge(axesText)
      .attr("x", d => d[1].x + 5)
      .attr("y", d => d[1].y - 2)
}

//orthographic projections for each axe
function orthoProjectXZ(M, dx=0, dy=0, scale = 1) {
  return new Vertex2D(dx + scale * M.x, dy + scale * - M.z);
}
function orthoProjectXY(M, dx=0, dy=0, scale = 1) {
  return new Vertex2D(dx + scale * M.x, dy + scale * - M.y);
}
function orthoProjectYZ(M, dx=0, dy=0, scale = 1) {
  return new Vertex2D(dx + scale * M.z, dy + scale * - M.y);
}

// Rotate a vertice
function rotateVertex(M, center, theta, phi) {
  // Rotation matrix coefficients
  const ct = Math.cos(theta);
  const st = Math.sin(theta);
  const cp = Math.cos(phi);
  const sp = Math.sin(phi);

// Rotation
  const x = M.x - center.x;
  const y = M.y - center.y;
  const z = M.z - center.z;

return new Vertex(
    ct * x - st * cp * y + st * sp * z + center.x,
    st * x + ct * cp * y - ct * sp * z + center.y,
    sp * y + cp * z + center.z,
  )
}

d3.select("#theta")
  .on("input", function () {
    //update theta and displayed value
    theta = +this.value
    d3.select("#theta-value").text(theta)
    rotTheta = theta * - Math.PI / 180 //update rotTheta
    drawAxes()
});

d3.select("#phi")
  .on("input", function () {
    //update phi and displayed value
    phi = +this.value
    d3.select("#phi-value").text(phi)
    rotPhi = phi * Math.PI / 180 //update rotPhi
    drawAxes()
});

d3.select("#scale")
  .on("input", function () {
    //update phi and displayed value
    scaleFactor = +this.value
    d3.select("#scale-value").text(scaleFactor)
    drawAxes()
});

d3.select('#redrawButton')
  .on('click', function() {
    x = +d3.select("#xi")._groups[0][0].value
    y = +d3.select("#yi")._groups[0][0].value
    z = +d3.select("#zi")._groups[0][0].value
    initialPoint = rotateVertex(new Vertex(x, y, z), new Vertex(x, y, z), rotTheta, rotPhi)
    drawScene()
  })

drawScene()

</script>

https://d3js.org/d3.v4.min.js