Advertisement
Guest User

Untitled

a guest
Nov 24th, 2015
62
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.92 KB | None | 0 0
  1. Person.prototype.bezier = function(t, p0, p1, p2, p3){
  2. var cX = 3 * (p1.x - p0.x),
  3. bX = 3 * (p2.x - p1.x) - cX,
  4. aX = p3.x - p0.x - cX - bX;
  5.  
  6. var cY = 3 * (p1.y - p0.y),
  7. bY = 3 * (p2.y - p1.y) - cY,
  8. aY = p3.y - p0.y - cY - bY;
  9.  
  10. var x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t) + p0.x;
  11. var y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + p0.y;
  12.  
  13. return {x: x, y: y};
  14. },
  15.  
  16. (function(){
  17. var accuracy = 0.01, //this'll give the bezier 100 segments
  18. p0 = {x: 10, y: 10}, //use whatever points you want obviously
  19. p1 = {x: 50, y: 100},
  20. p2 = {x: 150, y: 200},
  21. p3 = {x: 200, y: 75},
  22. ctx = document.createElement('canvas').getContext('2d');
  23.  
  24. ctx.width = 500;
  25. ctx.height = 500;
  26. document.body.appendChild(ctx.canvas);
  27.  
  28. ctx.moveTo(p0.x, p0.y);
  29. for (var i=0; i<1; i+=accuracy){
  30. var p = bezier(i, p0, p1, p2, p3);
  31. ctx.lineTo(p.x, p.y);
  32. }
  33.  
  34. ctx.stroke()
  35. })()
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement