<script>
	import { temperature, humidity, pressure, bsec, co2, gas, quaternion } from '$lib/dataStore';
	
	// https://openprocessing.org/sketch/1622800
	import P5 from 'p5-svelte';
	let width = 400;
	let height = 770;

	// let mouseXcounter = p5.map($quaternion.x, -1, 1, 0, 20);
	const sketch = (p5) => {
		let c = p5.color("#124559");
		c.setAlpha(0);

		let margin = 40;
		let radius;
		let step;
		let count = 0;
		let row = 10;
		let maxCount = 200;
		let qx = 0;
		let qxOld = 0;
		let qxDiff = 1;
		let qy = 0;
		let qyOld = 0;
		let qyDiff = 1;
		let qz = 0;
		let qzOld = 0;
		let qzDiff = 1;

		function drawPoint(count) {
			let x = count % row;
			let y = Math.floor(count / row);
			p5.ellipse(margin + x * step, margin + y * step, radius, radius);
		}

		p5.setup = () => {
			p5.pixelDensity(2);
			p5.createCanvas(width, height);
			step = (width - margin * 2) / (row - 1);
				
			p5.background("#124559");
			p5.frameRate(10);
		};

		p5.draw = () => {
			qx = p5.map($quaternion.x, -1, 1, 1, 100);
			qy = p5.map($quaternion.y, -1, 1, 1, 100);
			qz = p5.map($quaternion.z, -1, 1, 1, 100);

			qxDiff = p5.map(Math.abs(qx - qxOld), 0, 15, 1, 10);
			qyDiff = p5.map(Math.abs(qy - qyOld), 0, 15, 1, 10);
			qzDiff = p5.map(Math.abs(qz - qzOld), 0, 15, 1, 10);

			if (qxOld == 0) {
				qxDiff = 1;
			}
			if (qyOld == 0) {
				qyDiff = 1;
			}
			if (qyOld == 0) {
				qzDiff = 1;
			}

			qxOld = qx;
			qyOld = qy;
			qzOld = qz;

			p5.background(c);
			p5.fill("#aec3b0");
			p5.noStroke();
			// radius = p5.random(1, 10);
			radius = qxDiff + qyDiff + qzDiff;
			drawPoint(count);
			
			if (count < maxCount) {
				count = count + 1;
			} else {
				count = 0;
				p5.background("#124559");
			}
		};
	};
</script>

<P5 {sketch} />