quad limit

by aybalasubramanian

HTML

<h1>quad limit</h1>

<canvas></canvas>

CSS

body {
    font-family: sans-serif;
    background: #DDD;
  }

  canvas {
    background: white;
  }

JavaScript

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

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

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

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

var startCurvePoint = {
  x: startCurve,
  y: startCurve
};
var cornerPoint = {
  x: limit,
  y: limit
};
var endCurvePoint = {
  x: max,
  y: 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;

  // circle for event
  ctx.lineWidth = 1;
  circle( { x: x, y: x }, '#0F0')


  // line to the point where the curve begins
  line( { x: 0, y: 0 }, startCurvePoint, '#AAF' );
  // line from the point where the curve begins, to the max
  line( startCurvePoint, cornerPoint, '#AAF' );
  // line to the max, to the end
  line( cornerPoint, { x: w, y: limit }, '#AAF' );

  // draw circle at where curve begins and ends
  circle( startCurvePoint, '#FAA');
  circle( endCurvePoint, '#FAA');
  

  // var x = 0.5;
  var y;

  // var i = Math.max( 0, (x - startCurve) / (limit - startCurve)  );
  // 
  // console.log( i );
  // 
  // // point on first line segment
  // var sp1 = getLerpPoint( startCurvePoint, cornerPoint, i );
  // 
  // circle( sp1, '#F90' );
  // // point on second line segment
  // var sp2 = getLerpPoint( cornerPoint, endCurvePoint, i );
  // circle( sp2, '#F90' );
  // // draw a tangent line on the curve
  // line( sp1, sp2, '#F90'...