<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(80);
		let noiseLevel;
		let flucSpeed;

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

		p5.draw = () => {
			p5.translate(width / 7, height / 3);
			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("#aec3b0");
			p5.strokeWeight(10);
			p5.beginShape();
			for (let angle = 0; angle < 360; angle += 0.1) {
				const x = width / 3 + p5.cos(angle) * width / 3;
    			const y = width / 3 + p5.sin(angle) * width / 3;
				const n = p5.noise(x * noiseLevel, y * noiseLevel, p5.frameCount * flucSpeed / 5);
				const radius = p5.map(n, 0, 1, -100, 100);
				p5.vertex(x + radius * p5.cos(angle), y + radius * p5.sin(angle));
			}
			p5.noFill();
			p5.endShape();
		}
	};
</script>

<P5 {sketch} />