Exponential Function

by wio_dude

HTML

<canvas id="canvas" width="400" height="400"></canvas>
<br />
<label>p0</label> = (<input id="x0" type="text" value="-100"/>, <input id="y0" type="text" value="-100"/>)<br />
<label>p1</label> = (<input id="x1" type="text" value="100"/>, <input id="y1" type="text" value="100"/>)<br />
<label for="k">k</label> = <input id="k" type="text" value="0.01" /><br />
<label>pc</label> = (<input id="xc" type="text" value="100"/>, <input id="yc" type="text" value="-100"/>)<br />

CSS

canvas {
  background-color: whitesmoke;
}

JavaScript

const PERIOD_SECONDS = 60 * 3;

const $m = {
	p: null,
  downP: null,
};

const IDS = [
'canvas',
'x0',
'y0',
'x1',
'y1',
'k',
'xc',
'yc',
];
const $e = {};
for (const id of IDS) {
	$e[id] = document.getElementById(id);
}

for (const id of ['x0', 'x1', 'y0', 'y1', 'k', 'xc', 'yc']) {
	$e[id].addEventListener('input', updateCurve)
}

const dragged = {
	p0: false,
  p1: false,
  p2: false,
};


const draggableObjects = [
	{
  	dragged: false,
    move(dp) {
      $e.x0.value = parseFloat($e.x0.value) + dp[0];
      $e.y0.value = parseFloat($e.y0.value) + dp[1];
      updateCurve();
    },
    within(p) {
    	const dx = parseFloat($e.x0.value) - p[0];
    	const dy = parseFloat($e.y0.value) - p[1];
      return dx * dx + dy * dy < 5 * 5;
    },
  },
  {
  	dragged: false,
    move(dp) {
      $e.x1.value = parseFloat($e.x1.value) + dp[0];
      $e.y1.value = parseFloat($e.y1.value) + dp[1];
      updateCurve();
    },
    within(p) {
    	const dx = parseFloat($e.x1.value) - p[0];
    	const dy = parseFloat($e.y1.value) - p[1];
      return dx * dx + dy * dy < 5 * 5;
    },
  },
  {
  	dragged: false,
    move(dp) {
      $e.xc.value = parseFloat($e.xc.value) + dp[0];
      $e.yc.value = parseFloat($e.yc.value) + dp[1];
      updateCurve();
    },
    within(p) {
    	const dx = parseFloat($e.xc.value) - p[0];
    	const dy = parseFloat($e.yc.value) - p[1];
      return dx * dx + dy * dy < 5 * 5;
    },
  },
];



$e.canvas.addEventListener('mousedown', (evt) => {
	$m.p = mouseCoords($e.canvas, evt);
  $m.downP = $m.p;
  for (const draggable of draggableObjects) {
  	if (draggable.within($m.p)) {
    	draggable.dragged = true;
      selectable = true;
    }
  }
});

$e.canvas.addEventListener('mouseup', (evt) => {
  for (const draggable of draggableObjects) {
    draggable.dragged = false;
  }
	$m.p = null;
	$m.downP = null;
});

$e.canvas.addEventListener('mousemove', (evt) => {
	const lastP = $m.p;
	$m.p = mouseCoords($e.canvas, evt);
  
  
  let selectable =...