graphing functions


              const FRAC = ['½', '⅓', '¼', '⅕', '⅙', '⅐', '⅛', '⅑', '⅒'], 
			_P = document.getElementById('p'), 
			_O = document.querySelector('output'), 
			_S = _O.parentNode, 
			_F = document.getElementById('f'), 
			_G = document.getElementById('g'), 
			_H = document.getElementById('h'), 
			GD = +getComputedStyle(_F).getPropertyValue('--gd'), 
			A = (_P.max || 100) - (_P.min || 0), 
			DATA = [], PREC = 1000, UNIT = 1/PREC;

let p = +_O.textContent, sw, thd, su;

function size() {
	let r = _S.getBoundingClientRect();
	
	sw = r.width;
	thd = r.height/1.5;
	su = (sw - thd)/A;
	
	updateExp();
};

function fillData() {
	for(let i = 0; i <= A; i++) {
		let e = i + +_P.min;
		
		e = Math.pow(Math.abs(e) + 1, Math.sign(e));
		
		DATA.push({ f: [], g: [], h: [] });
		
		for(let j = 0; j <= PREC; j++) {
			let k = j*UNIT, 
					f = Math.pow(k, e), g = 1 - f, 
					h = Math.pow(1 - k, e);
			
			k = Math.round(GD*k);
			DATA[i].f.push([k, -Math.round(GD*f)]);
			DATA[i].g.push([k, -Math.round(GD*g)]);
			DATA[i].h.push([k, -Math.round(GD*h)]);
		}
	}
};

function graph() {
	let i = _P.value - _P.min;
	
	_F.setAttribute('d', `M${DATA[i].f.join(' ')}`);
	_G.setAttribute('d', `M${DATA[i].g.join(' ')}`);
	_H.setAttribute('d', `M${DATA[i].h.join(' ')}`);
};

function updateExp() {
	let new_val = +_P.value, i, 
			new_p = Math.pow(Math.abs(new_val) + 1, Math.sign(new_val));
	
	if(p !== new_p) {
		p = new_p;
		i = new_val + .5*A;
		_O.textContent = p < 1 ? FRAC[Math.abs(1 + new_val)] : p;
		_O.style.left = `${i*su + .5*thd}px`;
		graph();
	}
};

(function init() {
	size();
	fillData();
	graph();
	
	_P.addEventListener('change', updateExp, false);
	_P.addEventListener('input', updateExp, false);
	addEventListener('rezize', size, false);
})();
            


!

Let's block ads! (Why?)

 

Propellerads
 

7 days ago

Leave a Reply