quadLimit canvas demo

by secretgspot

HTML

<canvas></canvas>

CSS

body {
      font-family: sans-serif;
      background: #CCC;
      padding: 0;
    }
  
    canvas {
      background: white;
    }

JavaScript

var w = 600;
var h = 600;
var canvas, ctx;

const PI = Math.PI;
const TWO_PI = PI * 2;

var max = 1;
// where the value will cap off, [ 0 - 1 ]
var limit = 0.8;

// where the curve will start, relative to the length of the angle, [ 0 - 1 ]
var startCurve = 0.64;

var p1 = { x: w * limit * startCurve, y: h * limit * startCurve };
var cp = { x: w * limit, y: h * limit };
var p2 = { x: w, y: h * limit };


function circle( point, color ) {
  ctx.strokeStyle = color || 'black';
  ctx.beginPath();
  ctx.arc( point.x, point.y, 5, 0, Math.PI * 2 );
  ctx.stroke();
}

function line( pA, pB, color ) {
  ctx.strokeStyle = color || 'black';
  ctx.beginPath();
  ctx.moveTo( pA.x, pA.y )
  ctx.lineTo( pB.x, pB.y )
  ctx.stroke();
}

// get point between pointA & pointB, i
function getLerpPoint( pA, pB, i ) {
  return {
    x: ( pB.x - pA.x ) * i + pA.x,
    y: ( pB.y - pA.y ) * i + pA.y
  };
}

function lerp( a, b, i ) {
  return ( b - a ) * i + a;
}

function render( x ) {
  ctx.clearRect( 0, 0, w, h );
  ctx.lineWidth = 1;

  // draw vertical line for x
  ctx.lineWidth = 1;
  circle( { x: x * w, y: x * h}, '#0F0')


  // line to the point where the curve begins
  line( { x: 0, y: 0 }, p1, '#AAF' );
  // line from the point where the curve begins, to the max
  line( p1, cp, '#AAF' );
  // line to the max, to the end
  line( cp, p2, '#AAF' );

  // draw circle at where curve begins
  circle( p1, '#FAA');

  // var x = 0.5;
  var y;

  var i = Math.max( 0, (x - startCurve * limit) / (1 - startCurve * limit )  );

  // point on first line segment
  var sp1 = getLerpPoint( p1, cp, i );

  circle( sp1, '#F90' );
  // point on second line segment
  var sp2 = getLerpPoint( cp, p2, i );
  circle( sp2, '#F90' );
  // draw a tangent line on the curve
  line( sp1, sp2, '#F90' );


  // render quad curve
  ctx.lineWidth = 1;

  ctx.strokeStyle = 'hsla( 0, 100%, 50%, 0.5 )';
  ctx.beginPath();
  ctx.moveTo( p1.x, p1.y );
  ctx.quadraticCurveTo( cp.x, cp.y, p2.x, p2.y )
  ctx.stroke();

 ...