Skip to content

Instantly share code, notes, and snippets.

@kinsteronline

kinsteronline/quadratic_cubic_bezier.html

Created August 25, 2010 19:02
Show Gist options
  • Save kinsteronline/550071 to your computer and use it in GitHub Desktop.
Save kinsteronline/550071 to your computer and use it in GitHub Desktop.
Download ZIP
How is a Quadratic Bezier Curve drawn? In a naive way...
Raw
quadratic_cubic_bezier.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="d" width="800" height="800"></canvas>
<script type="text/javascript">
//
// I just wanted to draw my own curve, understand the equation, and
// try to visualize it as an easing function.
//
// http://en.wikipedia.org/wiki/Cubic_bezier#Examination_of_cases
//
var quadraticBezier = function(ctx,
curveStartX, curveStartY,
curveEndX, curveEndY,
controlOneX, controlOneY,
controlTwoX, controlTwoY) {
for(var t = 0; t < 1; t += 1/128) {
x = Math.pow((1 - t), 3) * curveStartX + 3 * Math.pow((1 - t), 2) * t * controlOneX + 3 * (1 - t) * Math.pow(t,2) * controlTwoX + Math.pow(t,3) * curveEndX;
y = Math.pow((1 - t), 3) * curveStartY + 3 * Math.pow((1 - t), 2) * t * controlOneY + 3 * (1 - t) * Math.pow(t,2) * controlTwoY + Math.pow(t,3) * curveEndY;
ctx.beginPath();
ctx.arc(Math.round(x), Math.round(y), 4, 0 , Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
};
var ctx = document.getElementById("d").getContext("2d");
ctx.globalAlpha = 0.45;
quadraticBezier(ctx,180,420,690,770,70,380,720,60);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment