Dibujando X en la pantalla

Estoy escribiendo unos artículos que saldrán publicados en fascículos, dentro de muy poco, para aprender a programar desde la óptica de un desarrollador Full Stack (Aquel que puede programar tanto en el cliente como en el servidor). Mientras escribía, me distraje y se me ocurrió hacer un graficador de algunas funciones simples. Si a alguien le interesa, lo dejo por acá.

var canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;
document.getElementsByTagName('body')[0].appendChild(canvas);
var ctx = canvas.getContext('2d');

function dibujar(f) {
  ctx.clearRect(0, 0, 800, 600);
  var p = 0;

  for (var i = 0; i < 800; i+=0.1) {
    var r = f(i);
    ctx.fillText('x', r[0], r[1]);
  }
}

Y estas son algunas funciones:

var periodo = 0;
var amplitud = 100;
var sobre_eje_y = 200;
var sobre_eje_x = 400;

function seno(tiempo) {
    periodo += 0.01;
    return [tiempo, (Math.sin(periodo) * amplitud) + sobre_eje_y];
}

capture

function coseno(x) {
    periodo += 0.01;
    return [(Math.cos(periodo) * amplitud) + sobre_eje_x, x];
}

capture

function circulo() {
    periodo += 0.1;
    return [(Math.cos(periodo) * amplitud) + sobre_eje_x, (Math.sin(periodo) * amplitud) + sobre_eje_y];
}

capture

Anuncios


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s