D3OG

All examples By author By category About

Thanaporn-sk

Full window Github gist

Canvas Rossler attractor

Generation of the Rossler attractor and visualization of the solution of the system on the 3 planes.

This is the canvas version (except for the axes, so d3-axis could be used). Compare to the SVG version

Visualization of other attractors:

forked from gcalmettes's block: Canvas Rossler attractor

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

<style>

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

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

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

const svg = d3.select("svg")

// //Append marker in svg defs
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');

//canvas linear gradient
const canvasGradient = context.createLinearGradient(20, 0, 960, 0);
canvasGradient.addColorStop(0, '#d7191c');
canvasGradient.addColorStop(0.25, '#f29e2e');
canvasGradient.addColorStop(0.50, '#d7191c');
canvasGradient.addColorStop(0.75, '#f29e2e');
canvasGradient.addColorStop(1, '#d7191c');

//initial conditions and parameters for Rossler system
let x = 0,
    y = z = 1,
    t = 0.05,
    iter = 0,
    max_iter = 10000;

const rosslerParameters = {
  a: 0.2,
  b: 0.2,
  c: 5.7
}

//scale the rossler attractor
const scaleFactor = 14

//store the iterations of the solution of Rossler
let dataMain = [],
    dataXY = [],
    dataXZ = [],
    dataYZ = [];

//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);
};

//takes (x,y) coordinates
const lineGenerator = d3.line()
    .x(d => d.x)
    .y(d => d.y)
    .curve(d3.curveCardinal)
    .context(context);

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

//initial dataPoint
let dataPoint = new Vertex(x, y, z)

const dxMain = 500,
      dyMain = 400,
      dxXZ = 100,
      dyXZ = 400,
      dxXY = 100,
      dyXY = 100,
      dxYZ = 300,
      dyYZ = 100;

//rotation parameters for main viz
const rotTheta = 20 * - Math.PI / 180,  //z axis rotation (20deg)
    rotPhi = 20 * Math.PI / 180,      //y axis rotation (20deg)
    centerOrigin = {x: 0, y: 0, z: 0},//rotation origin
    currentProjection = orthoProjectXZ  //add other projections later?

// /////////////////////////////////////////////////
// //MAIN VIZ axes
const gTrackMain = svg.append("g")
	.attr("class", "gTrack")
	.attr("transform",
    `translate(500, 400)`)

//axes vertex and projection of axes
let axeCenter = new Vertex(-150, -150, 0)
rotate(axeCenter, centerOrigin, rotTheta, rotPhi)
let axeX = new Vertex(150, axeCenter.y, axeCenter.z)
rotate(axeX, centerOrigin, rotTheta, rotPhi)
let axeY = new Vertex(axeCenter.x, 400, axeCenter.z)
rotate(axeY, centerOrigin, rotTheta, rotPhi)
let axeZ = new Vertex(axeCenter.x, axeCenter.y, 200)
rotate(axeZ, centerOrigin, rotTheta, rotPhi)

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

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

const axes = gTrackMain.selectAll(".axisMain")
    .data(axeSystemMain)
    .enter()
  .append("g")
    .attr("class", "axisMain")

axes.append("path")
    .attr("d", d => lineGeneratorAxes(d))
    .attr("stroke", "black")
    .attr("marker-end", "url(#arrow)")
axes.append("text")
    .attr("class", "axisLabel")
    .attr("x", d => d[1].x + 5)
    .attr("y", d => d[1].y - 2)
    .text((d,i) => axisLabels[i])

/////////////////////////////////////////////////
//XY plane axes
const gTrackXY = svg.append("g")
  .attr("class", "gTrack")
  .attr("transform",
    `translate(${dxXY}, ${dyXY})`)

axesXY = gTrackXY.append("g")
    .attr("transform", "translate(-85, 95)")
    .selectAll(".axisXY")
    .data([{line: [{x: 0, y: 0}, {x: 180, y: 0}], label: "x"}, {line: [{x: 0, y: 0}, {x: 0, y: -170}], label: "y"}])
    .enter()

axesXY.append("path")
    .attr("class", "axisXY")
    .attr("d", d => lineGeneratorAxes(d.line))
    .attr("stroke", "black")
    .attr("marker-end", "url(#arrow)")

axesXY.append("text")
    .attr("class", "axisLabel")
    .attr("x", d => d.line[1].x + 5)
    .attr("y", d => d.line[1].y + 5)
    .text(d => d.label)

/////////////////////////////////////////////////
//XZ plane axes
const gTrackXZ = svg.append("g")
  .attr("class", "gTrack")
  .attr("transform",
    `translate(${dxXZ}, ${dyXZ})`)

axesXZ = gTrackXZ.append("g")
    .attr("transform", "translate(-85, 25)")
    .selectAll(".axisXZ")
    .data([{line: [{x: 0, y: 0}, {x: 180, y: 0}], label: "x"}, {line: [{x: 0, y: 0}, {x: 0, y: -180}], label: "z"}])
    .enter()

axesXZ.append("path")
    .attr("class", "axisXZ")
    .attr("d", d => lineGeneratorAxes(d.line))
    .attr("stroke", "black")
    .attr("marker-end", "url(#arrow)")

axesXZ.append("text")
    .attr("class", "axisLabel")
    .attr("x", d => d.line[1].x + 5)
    .attr("y", d => d.line[1].y + 5)
    .text(d => d.label)

/////////////////////////////////////////////////
//YZ plane axes
const gTrackYZ = svg.append("g")
  .attr("class", "gTrack")
  .attr("transform",
    `translate(${dxYZ}, ${dyYZ})`)

axesYZ = gTrackYZ.append("g")
    .attr("transform", "translate(-25, 95)")
    .selectAll(".axisYZ")
    .data([{line: [{x: 0, y: 0}, {x: 180, y: 0}], label: "z"}, {line: [{x: 0, y: 0}, {x: 0, y: -170}], label: "y"}])
    .enter()

axesYZ.append("path")
    .attr("class", "axisXY")
    .attr("d", d => lineGeneratorAxes(d.line))
    .attr("stroke", "black")
    .attr("marker-end", "url(#arrow)")

axesYZ.append("text")
    .attr("class", "axisLabel")
    .attr("x", d => d.line[1].x + 5)
    .attr("y", d => d.line[1].y + 5)
    .text(d => d.label)

/////////////////////////////////////////
function rossler(callback) {
  //update dataPoint position
  dataPoint.x += t * (- dataPoint.y - dataPoint.z)
  dataPoint.y += t * (dataPoint.x + rosslerParameters.a * dataPoint.y)
  dataPoint.z += t * (rosslerParameters.b + dataPoint.z * (dataPoint.x - rosslerParameters.c));

//apply rotation/transformation Main viz
  rotatedPointMain = new Vertex(dataPoint.x, dataPoint.y, dataPoint.z)
  rotate(rotatedPointMain, centerOrigin, rotTheta, rotPhi)

//apply rotation/transformation XZ plane
  dataPointXZ = new Vertex(dataPoint.x, dataPoint.y, dataPoint.z)
  //apply rotation/transformation XY plane
  dataPointXY = new Vertex(dataPoint.x, dataPoint.y, dataPoint.z)
  //apply rotation/transformation XY plane
  dataPointYZ = new Vertex(dataPoint.x, dataPoint.y, dataPoint.z)

callback(rotatedPointMain, dataPointXY, dataPointXZ, dataPointYZ);
}

//callback functions to draw the different planes
function draw(dataPointMain, dataPointXY, dataPointXZ, dataPointYZ, project = currentProjection) {
  //add latest point projection to data
  dataMain.push(project(dataPointMain, dxMain, dyMain, scaleFactor))
  dataXY.push(orthoProjectXY(dataPointXY, dxXY, dyXY, 8))
  dataXZ.push(orthoProjectXZ(dataPointXZ, dxXZ, dyXZ, 8))
  dataYZ.push(orthoProjectYZ(dataPointYZ, dxYZ, dyYZ, 8))

//Main
  context.clearRect(0, 0, 960, 500);
  context.beginPath();
  lineGenerator(dataMain);
  context.lineWidth = 0.5;
  context.strokeStyle = canvasGradient;
  context.stroke();
  //dot
  context.beginPath();
  context.arc(dataMain[dataMain.length-1].x, dataMain[dataMain.length-1].y, 3, 0, 2*Math.PI);
  context.fillStyle = 'rgba(225,225,225,0.3)';
  context.fill()
  context.strokeStyle = 'gray';
  context.stroke();

//XY
  context.beginPath();
  lineGenerator(dataXY);
  context.lineWidth = 0.5;
  context.strokeStyle = canvasGradient;
  context.stroke();
  //dot
  context.beginPath();
  context.arc(dataXY[dataXY.length-1].x, dataXY[dataXY.length-1].y, 3, 0, 2*Math.PI);
  context.fillStyle = 'rgba(225,225,225,0.3)';
  context.fill()
  context.strokeStyle = 'gray';
  context.stroke();

//XZ
  context.beginPath();
  lineGenerator(dataXZ);
  context.lineWidth = 0.5;
  context.strokeStyle = canvasGradient;
  context.stroke();
  //dot
  context.beginPath();
  context.arc(dataXZ[dataXZ.length-1].x, dataXZ[dataXZ.length-1].y, 3, 0, 2*Math.PI);
  context.fillStyle = 'rgba(225,225,225,0.3)';
  context.fill()
  context.strokeStyle = 'gray';
  context.stroke();

//YZ
  context.beginPath();
  lineGenerator(dataYZ);
  context.lineWidth = 0.5;
  context.strokeStyle = canvasGradient;
  context.stroke();
  //dot
  context.beginPath();
  context.arc(dataYZ[dataYZ.length-1].x, dataYZ[dataYZ.length-1].y, 3, 0, 2*Math.PI);
  context.fillStyle = 'rgba(225,225,225,0.3)';
  context.fill()
  context.strokeStyle = 'gray';
  context.stroke();

}

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

// Rotate a vertice
function rotate(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;

//update/mutate current vertice
  M.x = ct * x - st * cp * y + st * sp * z + center.x;
  M.y = st * x + ct * cp * y - ct * sp * z + center.y;
  M.z = sp * y + cp * z + center.z;
}

let timeInterval = d3.interval(function() {
  iter++; //time increment
  if (iter >= max_iter) timeInterval.stop();
  // rossler(drawMain, drawXZ, drawXY, drawYZ)
  rossler(draw)

}, 10);

</script>

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