Bezier Test Cases

by Will Stott

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-full.min.js"></script>
<canvas width="100" height="100" id="main"></canvas>
<pre id="json"></pre>

CSS

canvas {
  background-color: pink;
}

pre {
  background-color: lightgreen;
  color: darkgreen;
}

JavaScript

// All Absolute co-ordinates.
let p1 = [0, 0];
let h1 = [100, 0];
let h2 = [0, 100];
let p2 = [100, 100];

var canvas = document.getElementById('main');
paper.setup(canvas);

// Have to convert the handles to relative co-ordinates.
var path = new paper.Path([
	new paper.Segment(p1, null, [h1[0] - p1[0], h1[1] - p1[1]]),
  new paper.Segment(p2, [h2[0] - p2[0], h2[1] - p2[1]])
]);
path.strokeColor = 'black';
paper.view.draw();

let vals = []; 

let c = 10;
for (let i = 0; i <= c; i++)
{
  let t = i / c;
  let p = path.firstCurve.getPointAtTime(t);
  /* console.log(t, p.x, p.y); */
  vals.push([t, [p.x, p.y]]);
}
document.getElementById('json').innerText += JSON.stringify({
	p1: p1,
  h1: h1,
  h2: h2,
  p2: p2,
  results: vals,
}, null, 2);