Frontend Forever

#mathober2024

About this Code

Hello reader, I am TomHinton. Nice to meet you again in this free code sharing website. In this post I am going to explain about #mathober2024. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

<!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>

xxxxxxxxxx
 
<!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;
  

xxxxxxxxxx
 
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
* {
    margin: 0px;
    cursor: pointer;
}
​

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();

xxxxxxxxxx
    material.uniforms.uResolution.value.y = renderer.domElement.height;
 
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();

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

#mathober2024

About this Code

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

cpc-todo-list

A Concept

#mathober2024

A beautiful mess

target range inside

About Us

Frontend Forever