Garciat/oxidacion.html

## oxidacion.html


<body></body>

<script>
var MAXW = 1000;
var MAXH = 600;
var STPX = 4;

var canvas = document.createElement('canvas');
canvas.width = MAXW;
canvas.height = MAXH;
canvas.style.border = '1px solid green';
document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');

var vol  = 10;
var ct_p = 1000;
var dc_p = 100;

var vvol  = [];
var vct_p = [];
var vdc_p = [];

function simular() {
  var fw_e = uniform(1, 4);
  var fw_s = uniform(1, 4);
  var dc_e = uniform(50, 100);

  vvol.push(vol);
  //vct_p.push(ct_p);
  //vdc_p.push(dc_p);

  //mmct_p.update(ct_p);
  //mmdc_p.update(dc_p);

  ctx.clearRect(0, 0, MAXW, MAXH);

  graph(ctx, vvol);

  vol  = vol + fw_e - fw_s;
  ct_p = ct_p + fw_e * dc_e - fw_s * dc_p;
  dc_p = ct_p / vol;
}

function loop() {
  simular();
  requestAnimationFrame(loop);
}

loop();

function uniform(a, b) {
  return a + (b - a) * Math.random();
}

function minmax() {
  var min = Infinity;
  var max = -Infinity;

  return {
    update: function (x) {
      min = Math.min(min, x);
      max = Math.max(max, x);
    },

    min: function () { return min; },
    max: function () { return max; },

    scale: function (x, mx) { return mx * (x - min) / (max - min); },

    interp: function(p) { return min + p * (max - min); }
  };
}

function graph(ctx, v) {
  var i = Math.max(0, v.length - MAXW/STPX);
  var sx = Math.max(0, MAXW - (v.length - i) * STPX);

  var mm = minmax();

  v.slice(i).forEach(function (x) {
    mm.update(x);
  });

  guide(ctx, mm);

  ctx.beginPath();
  ctx.moveTo(sx, MAXH - mm.scale(v[i], MAXH));

  for (; i < v.length - 1; ++i) {
    var px = v[i];

    var x1 = sx;
    var y1 = MAXH - mm.scale(v[i+0], MAXH);
    var x2 = sx + STPX;
    var y2 = MAXH - mm.scale(v[i+1], MAXH);

    var xc = (x1 + x2) / 2;
    var yc = (y1 + y2) / 2;

    ctx.quadraticCurveTo(x1, y1, xc, yc);

    sx += STPX;
  }

  ctx.strokeStyle = 'red';
  ctx.lineWidth = 2;
  ctx.stroke();
}

function guide(ctx, mm) {
  var max = mm.max();
  var min = mm.min();

  var sc = Math.pow(10, Math.floor(Math.log10(Math.abs(max - min))));
  var dd = Math.ceil(Math.abs(max - min) / 10 / sc) * sc;

  if (dd === 0) return;

  horizontal(ctx, mm, 0, 'blue');

  for (var y = dd; y < max; y += dd) {
    horizontal(ctx, mm, y, 'gray');
  }

  if (min < 0) {
    for (var y = -dd; y > min; y -= dd) {
      horizontal(ctx, mm, y, 'gray');
    }
  }
}

function horizontal(ctx, mm, y, c) {
  var gy = mm.scale(y, MAXH);
  ctx.beginPath();
  ctx.moveTo(0, MAXH - gy);
  ctx.lineTo(MAXW, MAXH - gy);
  ctx.strokeStyle = c;
  ctx.lineWidth = 1;
  ctx.stroke();

  var gt = y.toString();
  var tw = ctx.measureText(gt).width;
  ctx.font = '12px Arial';
  ctx.fillText(gt, MAXW - tw, MAXH - gy);
}
</script>


	<body></body>

	<script>
	var MAXW = 1000;
	var MAXH = 600;
	var STPX = 4;

	var canvas = document.createElement('canvas');
	canvas.width = MAXW;
	canvas.height = MAXH;
	canvas.style.border = '1px solid green';
	document.body.appendChild(canvas);

	var ctx = canvas.getContext('2d');

	var vol = 10;
	var ct_p = 1000;
	var dc_p = 100;

	var vvol = [];
	var vct_p = [];
	var vdc_p = [];

	function simular() {
	var fw_e = uniform(1, 4);
	var fw_s = uniform(1, 4);
	var dc_e = uniform(50, 100);

	vvol.push(vol);
	//vct_p.push(ct_p);
	//vdc_p.push(dc_p);

	//mmct_p.update(ct_p);
	//mmdc_p.update(dc_p);

	ctx.clearRect(0, 0, MAXW, MAXH);

	graph(ctx, vvol);

	vol = vol + fw_e - fw_s;
	ct_p = ct_p + fw_e * dc_e - fw_s * dc_p;
	dc_p = ct_p / vol;
	}

	function loop() {
	simular();
	requestAnimationFrame(loop);
	}

	loop();

	function uniform(a, b) {
	return a + (b - a) * Math.random();
	}

	function minmax() {
	var min = Infinity;
	var max = -Infinity;

	return {
	update: function (x) {
	min = Math.min(min, x);
	max = Math.max(max, x);
	},

	min: function () { return min; },
	max: function () { return max; },

	scale: function (x, mx) { return mx * (x - min) / (max - min); },

	interp: function(p) { return min + p * (max - min); }
	};
	}

	function graph(ctx, v) {
	var i = Math.max(0, v.length - MAXW/STPX);
	var sx = Math.max(0, MAXW - (v.length - i) * STPX);

	var mm = minmax();

	v.slice(i).forEach(function (x) {
	mm.update(x);
	});

	guide(ctx, mm);

	ctx.beginPath();
	ctx.moveTo(sx, MAXH - mm.scale(v[i], MAXH));

	for (; i < v.length - 1; ++i) {
	var px = v[i];

	var x1 = sx;
	var y1 = MAXH - mm.scale(v[i+0], MAXH);
	var x2 = sx + STPX;
	var y2 = MAXH - mm.scale(v[i+1], MAXH);

	var xc = (x1 + x2) / 2;
	var yc = (y1 + y2) / 2;

	ctx.quadraticCurveTo(x1, y1, xc, yc);

	sx += STPX;
	}

	ctx.strokeStyle = 'red';
	ctx.lineWidth = 2;
	ctx.stroke();
	}

	function guide(ctx, mm) {
	var max = mm.max();
	var min = mm.min();

	var sc = Math.pow(10, Math.floor(Math.log10(Math.abs(max - min))));
	var dd = Math.ceil(Math.abs(max - min) / 10 / sc) * sc;

	if (dd === 0) return;

	horizontal(ctx, mm, 0, 'blue');

	for (var y = dd; y < max; y += dd) {
	horizontal(ctx, mm, y, 'gray');
	}

	if (min < 0) {
	for (var y = -dd; y > min; y -= dd) {
	horizontal(ctx, mm, y, 'gray');
	}
	}
	}

	function horizontal(ctx, mm, y, c) {
	var gy = mm.scale(y, MAXH);
	ctx.beginPath();
	ctx.moveTo(0, MAXH - gy);
	ctx.lineTo(MAXW, MAXH - gy);
	ctx.strokeStyle = c;
	ctx.lineWidth = 1;
	ctx.stroke();

	var gt = y.toString();
	var tw = ctx.measureText(gt).width;
	ctx.font = '12px Arial';
	ctx.fillText(gt, MAXW - tw, MAXH - gy);
	}
	</script>