LINUX.ORG.RU

Как рисовать графики функций?

 , ,


0

1

Есть вот такой код, который считает метод прогонки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <script type="application/javascript">
	function f1(t)
	{
		return 1-t;
	}
	function f2(t)
	{
		return t;
	}
	function f3(t)
	{
		return (-1/6)*t*(t-1)*(t-2);
	}
	function f4(t)
	{
		return (1/6)*t*(t-1)*(t+1);
	}
	function f(x)
	{
		return x*Math.exp(-x);
	}
	var left=0,right=2;
	var x1=[],y1=[],a=[],b=[],c=[],d=[],u=[],v=[],y2=[],x=[];
	var N=10,h=(right-left)/N,i=-1;
	for(var x1=left;x1<=right;x1+=h)
		y1[++i] = -2*Math.exp(-x1)+Math.exp(-x1)*x1;
	a[1]=1;
	a[N]=1;
	b[1]=0;
	b[N]=0;
	c[1]=0;
	c[N]=0;
	d[1]=y1[0];
	d[N]=y1[y1.length-1];
	i=-1;
	for(var x1=left;x1<=right;x1+=h)
		y1[++i] = f(x1);
	alert(y1);	
	for(var i=2;i<N;i++)
	{
		a[i]=4;
		b[i]=1;
		c[i]=1;
		d[i]=6*(y1[i-1]-2*y1[i]+y1[i+1])/h;
	}
	u[1] = d[1]/a[1];
	v[1]=-b[1]/a[1];		
   	
	for(i=2;i<N;i++)
	{
		u[i]=(d[i]-c[i]*u[i-1])/(c[i]-v[i-1]+a[i]);
		v[i]=-b[i]/(c[i]*v[i-1]+a[i]);	
	}

	for(i=0;i<=N;i++)
		x[i] = i*h+left;
	alert(x);

	v[N]=0;
	u[N]=-1;
	y2[N]=d[N];
	for(i=N-1;i>-1;i--)
	{
		y2[i]=v[i]*y2[i+1]+u[i];
	}
	var s=[];
	var count=-1;
	for(var i=0;i<N;i++)
	{
		s[i] = 0;
		for(var xx=x[i];xx<=x[i+1];xx+=0.01)
		{
			t = (xx-x[i])/h;
			s[++count] = y1[i]*f1(t)+y1[i+1]*f2(t)+y2[i]*h*f3(t)+y2[i+1]*h*f4(t);
		}
	}

	alert(s);
	function draw() {
      		var canvas = document.getElementById('canvas');
	      	if (canvas.getContext) {
        		var ctx = canvas.getContext('2d');

    			ctx.beginPath();
    			ctx.moveTo(0, y1[0]);
	    		for(i=1;i<y1.length;i++)
				ctx.lineTo(100*i,100*Math.abs(y1[i]));
    			//ctx.closePath();
			ctx.strokeStyle = '#ff0000';
	    		ctx.stroke();

    			ctx.beginPath();
    			ctx.moveTo(0, s[0]);
	    		for(i=1;i<=s.length;i++)
				ctx.lineTo(5*i,100*Math.abs(s[i]));

			ctx.strokeStyle = '#00ff00';
	    		ctx.stroke();
      	}
   }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="1000" height="400" border="black"></canvas>
 </body>
</html>
Вопрос в том что мне приходится сверять графики функций через канву, где начальная точка находится в левом верхнем углу, а мне нужно рисовать как в тетради, есть конечно преобразование координат из экранных в бумажные и наоборот, но придется самому рисовать оси абсцисс и ординат и рисовать текстом легенды,масштаб и прочее, есть ли способ проще?



Последнее исправление: Gremlin_ (всего исправлений: 2)

ctx.beginPath ctx.moveTo ctx.lineTo

Ну и геморой. А почему просто не взять нормальную тулзу, в которой можно делать так:

plot(f1,f2,f3....)
yvv ★★☆
()
Ответ на: комментарий от yvv

Их там дочортиков, половина сложна, а половина не пригодна

Gremlin_
() автор топика
Ответ на: комментарий от beastie

Что-то не рисует вот код

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <script src="https://unpkg.com/d3@3/d3.min.js"></script>
  <script src="https://unpkg.com/function-plot@1/dist/function-plot.js"></script>
  <script>
	functionPlot({
  target: '#grid',
  xAxis: {
    label: 'real'
  }, 
  yAxis: {
    label: 'imaginary' 
  },
  grid: true,
  data: [
    { fn: 'sqrt(1 - x * x)' },
    { fn: '-sqrt(1 - x * x)' }
  ]
})
</script>
 </head>
 <body>
 </body>
</html>

Gremlin_
() автор топика
Ответ на: комментарий от Partisan

глянь код в моем сообщении модератору

Gremlin_
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.