<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("#aec3b0");
		c.setAlpha(80);
		let noiseLevel;
		let flucSpeed;

		p5.setup = () => {
			p5.createCanvas(width, height);
			p5.background(c);
		};

		p5.draw = () => {
			noiseLevel = p5.map($quaternion.x, -1, 1, 0.001, 0.02);
			flucSpeed = p5.map($quaternion.y, -1, 1, 0.001, 0.02);
			
			// p5.background(180, 10)
			p5.background(c);
			drawNoiseProfile();
		};

		function drawNoiseProfile() {
			p5.stroke("#124559");
			p5.strokeWeight(5);
			for (let x = 0; x < width; x++) {
				const n = p5.noise(x * noiseLevel, height * noiseLevel, p5.frameCount * flucSpeed / 5);
				const barHeight = p5.map(n, 0, 1, 0, height);
				p5.rect(x, height - barHeight, 1, barHeight);
			}
			p5.noFill();
		}
	};
</script>

<P5 {sketch} />