Advertisement
fevzi02

Untitled

Jan 8th, 2022
44
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Ex</title>
  5. <meta charset="utf-8">
  6. <script type="text/javascript">
  7.  
  8. var plot = function(x, y, c) { // Установить пикселб в т. (x, y) с прозрачностью c
  9. if(isFinite(x) && isFinite(y)){
  10. var color = {
  11. r: plot.color.r,
  12. g: plot.color.g,
  13. b: plot.color.b,
  14. a: plot.color.a*c
  15. };
  16.  
  17. setPixel(x,y, color);
  18. }
  19. };
  20.  
  21. function setPixel (x,y,c) { // Функция установки пикселя в js
  22. var p=canvas.createImageData(1,1);
  23. p.data[0]=c.r;
  24. p.data[1]=c.g;
  25. p.data[2]=c.b;
  26. p.data[3]=c.a;
  27. var data = canvas.getImageData(x, y, 1,1).data;
  28. canvas.putImageData(p,x,y);
  29. }
  30.  
  31.  
  32. function drawSpline(color) {
  33. var args = Array.prototype.slice.call(arguments, 1);
  34. var coords = [];
  35. var num = 0;
  36. for(var i=0; i<args.length; i+=2){
  37. coords[i/2+1] = {X:args[i], Y:args[i+1]};
  38. if(i>0){
  39. var deltaX = coords[i/2+1].X - coords[i/2].X;
  40. var deltaY = coords[i/2+1].Y - coords[i/2].Y;
  41. num += Math.sqrt(deltaX*deltaX+deltaY*deltaY);
  42. }
  43. }
  44. coords[0] = coords[1];
  45. coords[coords.length] = coords[coords.length-1];
  46. plot.color = color;
  47. for (var i = 1; i <= coords.length-3; i++)// в цикле по всем четвёркам точек
  48. {
  49. var a = [], b = [];
  50. arrs = {a:a, b:b};
  51. _SplineCoefficient(i, arrs, coords);// считаем коэффициенты q `
  52. var points = {};// создаём массив промежуточных точек
  53. for(var j=0;j<num;j++)
  54. {
  55. var t = j/num;// шаг интерполяции
  56. // передаём массиву точек значения по методу beta-spline
  57. points.X = (arrs.a[0] + t * (arrs.a[1] + t * (arrs.a[2] + t * arrs.a[3])));
  58. points.Y = (arrs.b[0] + t * (arrs.b[1] + t * (arrs.b[2] + t * arrs.b[3])));
  59. plot(points.X, points.Y,color.a/255);
  60. }
  61.  
  62. }
  63. }
  64.  
  65. function _SplineCoefficient(i, arrs, coords)// в функции рассчитываются коэффициенты a0-a3, b0-b3
  66. {
  67. arrs.a[3] = (-coords[i - 1].X + 3*coords[i].X - 3*coords[i + 1].X + coords[i + 2].X)/6;
  68. arrs.a[2] = (coords[i - 1].X - 2*coords[i].X + coords[i + 1].X)/2;
  69. arrs.a[1] = (-coords[i - 1].X + coords[i + 1].X)/2;
  70. arrs.a[0] = (coords[i - 1].X + 4*coords[i].X + coords[i + 1].X)/6;
  71. arrs.b[3] = (-coords[i - 1].Y + 3*coords[i].Y - 3*coords[i + 1].Y + coords[i + 2].Y)/6;
  72. arrs.b[2] = (coords[i - 1].Y - 2*coords[i].Y + coords[i + 1].Y)/2;
  73. arrs.b[1] = (-coords[i - 1].Y + coords[i + 1].Y)/2;
  74. arrs.b[0] = (coords[i - 1].Y + 4*coords[i].Y + coords[i + 1].Y)/6;
  75. }
  76.  
  77. </script>
  78. </head>
  79. <body style="margin: 0; height: 100vh;">
  80. <script type="text/javascript">
  81. var canvasElem= document.createElement('canvas');
  82. canvasElem.id = "canvas";
  83. canvasElem.width = 600;
  84. canvasElem.height = 600;
  85. canvasElem.style.margin = 'auto';
  86. canvasElem.style.display = 'flex';
  87. document.body.appendChild(canvasElem);
  88. canvas = canvasElem.getContext('2d');
  89. canvasX = canvasElem.width;
  90. canvasY = canvasElem.height;
  91. drawSpline({r:255, g:0, b:0, a:255}, 100, 100, 250, 250, 400, 50, 0, 300, 50,400);
  92.  
  93.  
  94. </script>
  95. </body>
  96.  
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement