как рисовать графики

[him]

в какой то момент заинтересовался рисование графиков.
погуглился... какие то варианты нашел.
их достаточно много оказалось.
поэтому вопрос!

мне надо рисовать график по точкам,
эти точки надо соединять сглаженно.
в матиматике вроде это называется квадратичное или кубическое отклонение что ли. но именно когда линия точно проходит через точку.

посоветуйте, кто чем рисует...
я пробовал http://dumpz.org/13715/
но что то график как был прямолинеен так и остался...

хочется что то типа:
http://www.hi-fi.ru/sven/i/ht-435d/dimension_2b.jpg

[Sweet]

Я ошибаюсь, или это рисуется просто множеством .lineTo(x, y)???

[Sweet]

это рисуется просто множеством .lineTo(x, y)

Т.е. уот так уот:

<canvas id="canvas" width="400" height="100"></canvas>

<script>

var context = canvas.getContext("2d");
var y0 = canvas.height / 2;

context.beginPath();
context.moveTo(0, y0);

for (var x = 0; x < canvas.width; x++) {
  var y = f(x);
  context.lineTo(x, y + y0);
}

context.stroke();


function f(x) {
  return Math.sin(x / 16) * 48;
}

</script>

[him]

возможно я как то не правильно изложил мысль. есть напимер точки:

$points1 = array(
    array(0,1)
    , array(1,3)
    , array(2,-4)
    , array(3,2)
    , array(4,0.5)
    , array(5,0.7)
    , array(6,-1)
    , array(7,4)
    , array(8,2)
);

надо красиво нарисовать график.
речь не идет о синусах и других матиматических функциях.

[Nlk]

Sweet,
Интересный пример, спасибо

[Alexandroppolus]

надо красиво нарисовать график.

Если имеется всего несколько точек, то рисование lineTo сделает ломаную. Потому что за единицу размера (расстояние по оси Х между соседними точками) придется взять не один, а несколько пикселей.

Тебе нужен bezierCurveTo.
https://msiter.ru/references/html5-canvas/beziercurveto

Контрольные точки (см.картинку в статье) лежат на касательных, проходящих через твои точки. Остаётся только смекнуть углы наклона этих касательных.

Для любой точки (кроме двух крайних) можно считать, что касательная параллельна линии, проходящей через соседнюю точку слева и соседнюю точку справа. Какую касательную брать для первой и последней точки, сходу не придумывается, тут поэкспериментируй сам..

Ну и второй момент - где именно на этих касательных ставить контрольные точки. Навскидку подойдёт вариант брать по 1/3 единичного расстояния по оси Х, хотя опять же тут надо экспериментировать.

[Nexus]

Alexandroppolus, на дату публикации поста обратите внимание.
Вряд ли автор все 6 лет дожидается ответа