
Среда программирования:
Любая
Статья по теме:
Для определённого количества точек, заданных своими координатами, построить кривую, называемую β-сплайном, которая является аппроксимацией неизвестной функции, содержащей исходные точки.
Код программы:
//Создаем канвас var canvasElem= document.createElement('canvas'); canvasElem.id = "canvas"; canvasElem.width = 600; canvasElem.height = 600; canvasElem.style.margin = 'auto'; canvasElem.style.display = 'flex'; document.body.appendChild(canvasElem); canvas = canvasElem.getContext('2d'); //для правильной работы программы необходимо чтоб переменная canvas содержала 2d context какого либо канваса drawSpline( {r:255, g:0, b:0, a:255}, 100, 100, 250, 250, 400, 50, 50, 300); //рисуем нашу кривую(β-сплайн) var plot = function(x, y) { //кисточка - ставит пиксель своего цвета if(isFinite(x) && isFinite(y)){ setPixel(x,y, plot.color); } }; function setPixel (x,y,c) { //ставит пиксель цвета с var p=canvas.createImageData(1,1); p.data[0]=c.r; p.data[1]=c.g; p.data[2]=c.b; p.data[3]=c.a; var data = canvas.getImageData(x, y, 1,1).data; if(data[3] <= p.data[3]) //сравниваем прозрачность canvas.putImageData(p,x,y); } function drawSpline(color) { var args = Array.prototype.slice.call(arguments, 1); var coords = []; var num = 0; for(var i=0; i<args.length; i+=2){ coords[i/2+1] = {X:args[i], Y:args[i+1]}; if(i>0){ var deltaX = coords[i/2+1].X - coords[i/2].X; var deltaY = coords[i/2+1].Y - coords[i/2].Y; num += Math.sqrt(deltaX*deltaX+deltaY*deltaY); } } coords[0] = coords[1]; coords[coords.length] = coords[coords.length-1]; plot.color = color; for (var i = 1; i <= coords.length-3; i++)// в цикле по всем четвёркам точек { var a = [], b = []; arrs = {a:a, b:b}; _SplineCoefficient(i, arrs, coords);// считаем коэффициенты q ` var points = {};// создаём массив промежуточных точек for(var j=0;j<num;j++) { var t = j/num;// шаг интерполяции // передаём массиву точек значения по методу beta-spline points.X = (arrs.a[0] + t * (arrs.a[1] + t * (arrs.a[2] + t * arrs.a[3]))); points.Y = (arrs.b[0] + t * (arrs.b[1] + t * (arrs.b[2] + t * arrs.b[3]))); plot(points.X, points.Y,color.a/255); } } }
Прикрепленный файл | Размер |
---|---|
plyush_spline.zip | 1.46 кб |