Siple Particles Shortcode

function particles_shortcode()
{

	$particles = '
	<style>
	
#particles,
.particles {
	overflow: hidden; 
}
#particles canvas,
.particles canvas {
	display: block;
	width: 1909px;
	height: 1103px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -2;
	pointer-events: none;
}

	</style>
    <script async src="https://ga.jspm.io/npm:es-module-shims@1.5.1/dist/es-module-shims.js" crossorigin="anonymous"></script>

	<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.165.0/build/three.module.js",
			"three/addons/": "https://unpkg.com/three@0.165.0/examples/jsm/"
		}
	}
	</script>

		<script type="module">
		// https://discourse.threejs.org/t/particle-wave-code/67327

		import * as THREE from "three";
	import { SimplexNoise } from "three/addons/math/SimplexNoise.js";
	//import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";


	// general setup, boring, skip to the next comment

	console.clear( );





	var scene = new THREE.Scene();
	scene.background = new THREE.Color( "#4A2140" );

	var camera = new THREE.PerspectiveCamera( 6, innerWidth/innerHeight ); //ZOOM high: weiter weg
	camera.position.set( 5, 1, 9 ); //5 1 7 
	camera.lookAt( scene.position );
	//camera.rotation.y = 0;
	//camera.rotation.x = 0;


	var renderer = new THREE.WebGLRenderer( {antialias: true} );
	renderer.setAnimationLoop( animationLoop );
	renderer.setSize( innerWidth, 1000 ); //DICHTE was innerHeight but that zooms to close

	var container = document.getElementById("particles");
	container.appendChild(renderer.domElement);

	//var elements = getElementsByClassName(document, "particles");
	/*
	var elements = document.getElementsByClassName("particles");
	var n = elements.length;

	for (var i = 0; i < n; i++) {
		var e = elements[i];
		e.appendChild(renderer.domElement);
	}


	var elements = document.getElementsByClassName("particles");
	for (var i = 0; i < elements.length; i++) {
		elements[i].appendChild(renderer.domElement);
	}
	*/

/*
	window.addEventListener( "resize", (event) => {
		camera.aspect = innerWidth/innerHeight;
		camera.updateProjectionMatrix( );
		renderer.setSize( innerWidth, innerHeight );
	});
	*/

	// some waves with simplex noise

	// Particle grid parameters
	//const gridSize = 40;
	//const spacing = 2;
	const particles = [];
	/*
var geometry = new THREE.SphereGeometry(0.2, 8, 8);
var material = new THREE.MeshBasicMaterial({ color: 0x871F6E });
*/
	/*
for (let x = -gridSize; x < gridSize; x++) {
  for (let z = -gridSize; z < gridSize; z++) {
    var particle = new THREE.Mesh(geometry, material);
    particle.position.set(x * spacing, 0, z * spacing);
    scene.add(particle);
    particles.push(particle);
  }
}
*/

	// Animation loop
	function animate(time) {
		requestAnimationFrame(animate);
		const t = time * 0.001;

		// Wave animation - amplitude increased
		particles.forEach(p => {
			const distance = Math.sqrt(p.position.x ** 2 + p.position.z ** 2);
			p.position.y = Math.sin(distance * 0.1 - t) * 4; //boosted 10%
		});

		// Camera sway effect
		camera.position.x = Math.sin(t * 0.3) * 3;
		camera.lookAt(0, 0, 0);

		renderer.render(scene, camera);
	}



	//#abstand #linienabstand #dichte #pixelproline
	var geometry = new THREE.PlaneGeometry( 2, 10, 150, 700 ),

	pos = geometry.getAttribute( "position" ),
	simplex = new SimplexNoise( );

	var waves = new THREE.Points(
		geometry,
		new THREE.PointsMaterial( {
			size: 0.03,
			color: "#b753a6",

			//vertexColors: true,
			transparent: true,
			opacity: 0.5,
			//blending: THREE.AdditiveBlending,
			sizeAttenuation: true

		} )
	);	
	waves.rotation.x = -Math.PI/1.5; //2
	scene.add( waves );



	function animationLoop( t ) {
		for( var i=0; i<pos.count; i++ )
		{
			var x = pos.getX( i ),	
			y = pos.getY( i ),	
			z = 0.3*simplex.noise3d( x/1, y/1, t/12000 ); //higher slower

			pos.setZ( i, z );
		}
		pos.needsUpdate = true;

		renderer.render( scene, camera );
	}

	animate();
/*
	window.addEventListener("resize", () => {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(window.innerWidth, window.innerHeight);
	});
	*/

	</script>';


	echo $particles;
}
add_shortcode('particles', 'particles_shortcode');