Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="shader"></div>
<script id="vertex" type="x-shader/x-vertex">
	varying vec2 vUv;
uniform float uTime;

attribute vec3 position2;
varying vec3 pos;
	uniform float u_progress;

void coswarp(inout vec3 trip, float warpsScale ){

trip.xyz += warpsScale * .1 * cos(3. * trip.yzx + (uTime * .015));
    trip.xyz += warpsScale * .05 * cos(11. * trip.yzx + (uTime * .015));
    trip.xyz += warpsScale * .025 * cos(17. * trip.yzx + (uTime * .015));
    
  }

void main(){
    vec4 modelPosition = modelMatrix * vec4(position, 1.);

modelPosition.x += sin(uTime +modelPosition.y) *5.;

vec4 modelPosition2 = modelMatrix * vec4(position, 1.);

vec4 viewPosition = viewMatrix * modelPosition;
    vec4 projectionPosition = projectionMatrix * viewPosition;
  
    gl_Position = projectionPosition;

gl_PointSize =( 500. )  * 1. * .5;

gl_PointSize *= (1.0/ -viewPosition.z);

vUv = uv;
    pos = modelPosition.xyz;
              }
</script>

varying vec2 vUv;
uniform vec2 uResolution;
varying vec3 pos;
const float PI = 3.1415926535897932384626433832795;

vec2 rotate2D (vec2 _st, float _angle) {
    _st -= 0.5;
    _st =  mat2(cos(_angle),-sin(_angle),
                sin(_angle),cos(_angle)) * _st;
    _st += 0.5;
    return _st;

}

void coswarp(inout vec3 trip, float warpsScale ){

trip.xyz += warpsScale * .1 * sin(3. * trip.yzx + (uTime * .15));
  trip.xyz += warpsScale * .05 * sin(uTime * trip.yzx + (uTime * .15));
  trip.xyz += warpsScale * .025 * sin(17. * trip.yzx + (uTime * .15));
  
}

void uvRipple(inout vec2 uv, float intensity){

vec2 p = uv -.5;

float cLength=length(p);

uv= uv +(p/cLength)*cos(cLength*15.0-uTime*.5)*intensity;

}

vec3 shape( in vec2 p, float sides ,float size)
{
  
   float d = 0.0;
  vec2 st = p *2.-1.;

// Number of sides of your shape
  float N = sides ;

// Angle and radius from the current pixel
  float a = atan(st.x,st.y)+PI ;
  float r = (2.* PI)/(N) ;

// Shaping function that modulate the distance
  d = cos(floor(.5+a/r)*r-a)*length(st);

return  vec3(1.0-smoothstep(size,size +.1,d));
}

void main() {
  vec2 uv = vUv;
  vec2 uv2 = uv;
  uv = (gl_FragCoord.xy - uResolution * .5) / uResolution.yy + 0.5;
  
  
  
 
 vec3 color = vec3(0.);
  
 
 vec2 coOrd = gl_PointCoord;

float alpha = 1.;

float t = (uTime *.8) + length(coOrd-.5);

coOrd = rotate2D(coOrd, PI + t);

uvRipple(uv, 1.5);

color = vec3(1.);

color = mix(color, 1.-color, step(shape(coOrd, 50., .6).r, .5));

color = mix(color, 1.-color, step(shape(coOrd, 50., .3).r, .5));

float distanceToCenter = distance(coOrd, vec2(.5));
       
	alpha = 1.- step(shape(coOrd, 50., .5).r, .4);

gl_FragColor = vec4(vec3(color.r, color.g, color.b), alpha);

}
</script>
</body>
</html>

console.log("Event Fired")
import * as THREE from "https://cdn.skypack.dev/three@0.149.0";

let camera, scene, renderer, clock, points;
let uniforms;

let sphere = new THREE.SphereGeometry(7, 50, 50);

function init() {
	const container = document.getElementById("shader");

clock = new THREE.Clock();

scene = new THREE.Scene();

uniforms = {
		uTime: { type: "f", value: 1.0 },
		uResolution: { type: "v2", value: new THREE.Vector2() },
		u_progress: {
			value: 0
		},
		uMouse: {
			value: { x: 0.5, y: 0.5 }
		}
	};

const material = new THREE.ShaderMaterial({
		uniforms,
		vertexShader: document.getElementById("vertex").textContent,
		fragmentShader: document.getElementById("fragment").textContent
	});

material.transparent = true;
	material.depthWrite = false;

const pointsGeometry = new THREE.BufferGeometry();

pointsGeometry.setAttribute(
		"position",
		new THREE.BufferAttribute(sphere.attributes.position.array, 3)
	);

renderer = new THREE.WebGLRenderer();
	renderer.setClearColor(0xffffff, 1);
	renderer.setPixelRatio(window.devicePixelRatio);

material.uniforms.uResolution.value.x = renderer.domElement.width;
	material.uniforms.uResolution.value.y = renderer.domElement.height;

camera = new THREE.PerspectiveCamera(
		75,
		renderer.domElement.width / renderer.domElement.height,
		0.1,
		100
	);
	camera.position.z = 12;
	camera.position.y = 0;
	camera.position.x = 0;

let running = false;

let finished = function () {
		running = false;
	};

points = new THREE.Points(pointsGeometry, material);
	scene.add(points);
	window.addEventListener("mousemove", function (e) {
		material.uniforms.uMouse.value.x =
			(event.clientX / window.innerWidth) * 2 - 1;
		material.uniforms.uMouse.value.y =
			-(event.clientY / window.innerHeight) * 2 + 1;
	});

// window.addEventListener("click", function (e) {
	// 	if (!running) {
	// 		running = true;
	// 		gsap.to(material.uniforms.u_progress, {
	// 			duration: 6.5,
	// 			value: material.uniforms.u_progress.value + Math.PI,
	// 			delay: 0,
	// 			onComplete: finished
	// 		});
	// 	}
	// });

container.appendChild(renderer.domElement);

onWindowResize();
	window.addEventListener("resize", onWindowResize);
}

function onWindowResize() {
	renderer.setSize(window.innerWidth, window.innerHeight);
	uniforms.uResolution.value.x = renderer.domElement.width;
	uniforms.uResolution.value.y = renderer.domElement.height;
}

function render() {
	uniforms.uTime.value = clock.getElapsedTime();
	renderer.render(scene, camera);

if (points) {
		points.rotation.x += 0.002;
		points.rotation.z += 0.0002;
	}
}

function animate() {
	render();
	requestAnimationFrame(animate);
}

init();
animate();

Frontend Forever App