dg.js quadratic function with user input example - Djordje Rakonjac / december, 2015

function: f(x) = a * x^2 + c a: c:

Try dragging sliders and see how function changes relative to parametars. P.S. We've used bootstrap-slider.js lib to help us animate sliders.

dg.js example code

		var canvas = dg.Canvas("testcanvas", { border: "1px solid #ccc"});
		var axes = dg.Axes([canvas.width() / 2, canvas.height() / 1.5]).hide(false);
		
		
		var f = dg.Function(function(x) { return x*x; }, "#ff0000").color(dg.color.rand());

		var a = 1;
		var c = 0;
		
		var slider = new Slider('#ex1', {
				formatter: function(value) {
					return 'Current value: ' + value;
				}
		});
		var sliderc = new Slider('#ex2', {
				formatter: function(value) {
					return 'Current value: ' + value;
				}
		});		
		slider.on("slide", function(evt) {
			a = evt;
			f.setF(	function(x) { return a * x*x + c; } );	
		});
		sliderc.on("slide", function(evt) {
			c = evt;
			f.setF(	function(x) { return a * x*x + c; } );	
		});	
					
					
copyright 2016, Djordje Rakonjac