1

Mi idea es pintar una función de x usando JavaScript y Canvas, he estado mirando por internet y no he encontrado nada al respecto, puede que haya buscado mal, no lo se, pero la cuestión es que no tengo muy claro como empezar, aquí abajo dejo lo que llevo hasta ahora intentado:

$(document).ready(function() {

  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;

    //Establezco una escala que posteriormente aplico
  var scale = 100;

  var cv = document.getElementById("fx");
  cv.height = windowHeight;
  cv.width = windowWidth;

  var ctx = cv.getContext("2d");

   //Aquí traslado todo el contexto al centro de la pantalla
  ctx.translate((windowWidth / 2),(windowHeight / 2));

//Esta función simplemente dibuja los ejes (es lo de menos)
  drawaxis();
  function drawaxis() {

    var x_axis = {
      x: -windowWidth / 2,
      y: 0,
      xf: windowWidth / 2,
      yf: 0
    }

    var y_axis = {
      x: 0,
      y: -windowHeight / 2,
      xf: 0,
      yf: windowHeight /2
    }

    ctx.beginPath();
    ctx.moveTo(x_axis["x"],x_axis["y"]);
    ctx.lineTo(x_axis["xf"],x_axis["yf"]);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.moveTo(y_axis["x"],y_axis["y"]);
    ctx.lineTo(y_axis["xf"],y_axis["yf"]);
    ctx.stroke();
    ctx.closePath();

  }

//Aquí es donde empiezan los inconvenientes (que más abajo detallo)
  for (x = -windowWidth; x <= windowWidth; x = x + 0.01) {
    var y = Math.pow(x,2);
    drawfx(x,y);
  }

//Pintar los puntos para pintar los valores
  function drawfx(x,y) {

//Aquí es donde aplico la escala
    x = x*scale;
    y = y*scale;

    ctx.beginPath();
    ctx.arc(x, y, 1, 0, 2 * Math.PI);
    ctx.fill();
    ctx.closePath();
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<!-- El tamaño del canvas lo cambio en el script -->
  <canvas id="fx" width="0" height="0"></canvas>
</div>

Hecho esto, el resultado es más o menos decente, quedando tal que así: enter image description here

El problema de hacerlo de este modo es que hasta que el loop for no finaliza, la gráfica no se pinta y esto provoca un ligero tiempo de espera hasta que todos los valores son calculados.

Y el segundo problema está en (como bien se puede apreciar en la imagen) que al ser en este caso una función exponencial a medida que aumentan los valores los puntos están cada vez más separados y por esta razón la "línea continua" comienza a ser "discontinua".

Y ahora bien, mi pregunta está en si ésta es una manera más o menos decente de hacerlo o si hay maneras mucho mejores de hacerlo que me estoy perdiendo.......

Agradecería cualquier ayuda posible. ¡Gracias!

4
  • Podrías probar con window.requestAnimationFrame(function() { drawfx(x,y); }); para ver si así dibuja en forma paulatina.
    – ffflabs
    Commented el 9 mar. 2017 a las 17:56
  • Con requestAnimationFrame siempre dibujará, eso es un hecho ya que es prácticamente un loop infinito de alto rendimiento. Por otro lado, ¿has pensado en usar Chart.js para ésto? Te simplificaría las cosas bastante, además tiene un método update para actualizar en demanda la gráfica. Mira ésta pregunta.
    – gugadev
    Commented el 9 mar. 2017 a las 18:01
  • @GustavoGarcía siempre dibujará, pero hay un delay implícito entre cuadro y cuadro que podría permitir ver como la curva se va trazando. Es más elegante que usar un window.setTimeout con timeout cero.
    – ffflabs
    Commented el 9 mar. 2017 a las 18:05
  • @GustavoGarcía retiro lo dicho. Probé con rAF y no dibuja la curva. Al parecer esa técnica sólo tiene sentido redibujando el canvas completo en cada frame :(
    – ffflabs
    Commented el 9 mar. 2017 a las 18:26

3 respuestas 3

6

Si lo que quieres es graficar funciones matemáticas en todo el sentido de la palabra, esta librería es para ti http://mathjs.org/index.html

function draw() {
    try {
      functionPlot({
        target: '#plot',
        data: [{
          fn: document.getElementById('eq').value,
          sampler: 'builtIn',  // this will make function-plot use the evaluator of math.js
          graphType: 'polyline'
        }]
      });
    }
    catch (err) {
      console.log(err);
      alert(err);
    }
  }

  document.getElementById('form').onsubmit = function (event) {
    event.preventDefault();
    draw();
  };

  draw();
 input[type=text] {
      width: 300px;
    }
    input {
      padding: 6px;
    }
    body, html, input {
      font-family: sans-serif;
      font-size: 11pt;

    }
    form {
      margin: 20px 0;
    }
<title>math.js | plot</title>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/mathjs/3.10.0/math.min.js"></script>

  <!-- load http://maurizzzio.github.io/function-plot/ -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://wzrd.in/standalone/[email protected]"></script>
  
<form id="form">
  <label for="eq">Enter an equation:</label>
  <input type="text" id="eq" value="4 * sin(x) + 5 * cos(x/2)" />
  <input type="submit" value="Draw" />
</form>

<div id="plot"></div>

<p>
  Plot library: <a href="https://github.com/maurizzzio/function-plot">https://github.com/maurizzzio/function-plot</a>
</p>

5
  • 1
    Tremendo :D as always :)
    – Phi
    Commented el 9 mar. 2017 a las 18:25
  • gracias hermano! :D estamos para servir :D
    – fredyfx
    Commented el 9 mar. 2017 a las 18:29
  • 1
    Gracias @fredyfx !
    – lromeraj
    Commented el 9 mar. 2017 a las 18:32
  • de nada @Javi, dale con todo el power!
    – fredyfx
    Commented el 9 mar. 2017 a las 18:38
  • 1
    @fredyfx jajajajja, lo haré!
    – lromeraj
    Commented el 9 mar. 2017 a las 18:38
1

Podrías usar p5.js para hacer las curvas, algo así:

function draw() {
    // Acá van los cálculos para obtener los puntos
    // p5.js tiene funciones matemáticas, así que te
    // Podrían ser útiles

    beginShape(); //Para empezar a dibujar la figura
    vertex(x, y); // Para añadir vértices
    curveVertex(x, y); // Vértices para hacer curvas
    endShape(CLOSE); // Para terminar de dibujar
    // El parámetro "CLOSE" es opcional, y sirve
    // Para cerrar la figura.
}

Te sugiero que leas la Documentación.

Espero te sea útil!

0

Primero, sí te estás complicando de más, porque existe fooplot para generar exactamente lo que buscas.

Segundo: pensé que usando requestAnimationFrame se podría dibujar gradualmente. Me equivoqué en eso. No sabría cómo mostrar el dibujo progresivamente.

Tercero, para el tema de la línea discontinua, en vez de dibujar circulitos de 1px de radio, debieras dibujar una línea, como en la hipótesis de Riemann. La línea va de (x,y) a (x + dx, y + dy).

var interval = 0.01;

for (x = -windowWidth; x < windowWidth; x = x + interval) {
    drawfx(x, interval);
}

function drawfx(x,interval) {
    var x0 = x,
        y0 = Math.pow(x0,2),
        x1 = x + interval,
        y1 = Math.pow(x1,2);

    x0 = x0*scale;
    y0 = y0*scale;
    x1 = x1*scale;
    y1 = y1*scale;

    ctx.beginPath();
    ctx.moveTo(x0, y0);
    ctx.lineTo(x1, y1);
    ctx.stroke();
    ctx.closePath();
}

$(document).ready(function() {

  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;

    //Establezco una escala que posteriormente aplico
  var scale = 100;

  var cv = document.getElementById("fx");
  cv.height = windowHeight;
  cv.width = windowWidth;

  var ctx = cv.getContext("2d");

   //Aquí traslado todo el contexto al centro de la pantalla
  ctx.translate((windowWidth / 2),(windowHeight / 2));

//Esta función simplemente dibuja los ejes (es lo de menos)
  drawaxis();
  function drawaxis() {

    var x_axis = {
      x: -windowWidth / 2,
      y: 0,
      xf: windowWidth / 2,
      yf: 0
    }

    var y_axis = {
      x: 0,
      y: -windowHeight / 2,
      xf: 0,
      yf: windowHeight /2
    }

    ctx.beginPath();
    ctx.moveTo(x_axis["x"],x_axis["y"]);
    ctx.lineTo(x_axis["xf"],x_axis["yf"]);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.moveTo(y_axis["x"],y_axis["y"]);
    ctx.lineTo(y_axis["xf"],y_axis["yf"]);
    ctx.stroke();
    ctx.closePath();

  }

var interval = 0.01;

for (x = -windowWidth; x < windowWidth; x = x + interval) {
  drawfx(x, interval);
}

function drawfx(x,interval) {
    var x0 = x,
        y0 = Math.pow(x0,2),
        x1 = x + interval,
        y1 = Math.pow(x1,2);

    x0 = x0*scale;
    y0 = y0*scale;
    x1 = x1*scale;
    y1 = y1*scale;

    ctx.beginPath();
    ctx.moveTo(x0, y0);
    ctx.lineTo(x1, y1);
    ctx.stroke();
    ctx.closePath();
}

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
<!-- El tamaño del canvas lo cambio en el script -->
  <canvas id="fx" width="0" height="0"></canvas>
</div>

1
  • Gracias por tu aportación también @amenadiel
    – lromeraj
    Commented el 9 mar. 2017 a las 18:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.