[WebGL] Rainbow Pulse
How do I make an [webgl] rainbow pulse?
I'm working on getting better at shaders. For this one I wanted to use the HSV color space to create something interesting.. What is a [webgl] rainbow pulse? How do you make a [webgl] rainbow pulse? This script and codes were developed by Chris Johnson on 01 October 2022, Saturday.
[WebGL] Rainbow Pulse - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>[WebGL] Rainbow Pulse</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script id="fragmentShader" type="x-shader/x-fragment">
uniform float time;
uniform vec2 resolution;
#define PI 3.14159265359
#define T (time/2.)
vec3 hsv2rgb(vec3 c) { vec4 K = vec4(1.,2./3.,1./3.,3.); vec3 p = abs(fract(c.xxx + K.xyz) * 6. - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0., 1.), c.y);
}
float ease_x(float n) { // normalized Hermite h10 return n*(1.-n)*(1.-n)*27./4.;
}
float nd(float n) { // normal dist (σ=0.01,μ=0.0) return exp(-n*n/0.0002)/sqrt(PI*0.0002);
}
float ease_y(float n) { // easeOutExpo modified by nd float expo = -pow(2., -10. * n) + 1.; return expo - 0.04*nd(n);
}
void main( void ) { vec2 p = ( gl_FragCoord.xy / resolution.xy ); vec2 f = vec2(fract(T), 0.5); float v = 1. - 2.*ease_x(fract(p.x-f.x)) - ease_y(abs(f.y-p.y)); float flare = 1. - pow(length(p-f)*(p.x < f.x ? 15. : 30.),.5) + 0.002*nd(fract(f.x-p.x)) + 0.01*nd(abs(f.y-p.y)); gl_FragColor = vec4( mix(hsv2rgb(vec3(p.x-.35, 1., v)),vec3(1.),max(0.,min(1.,flare))), 1.0 );
}
</script>
<script id="vertexShader" type="x-shader/x-vertex"> void main() { gl_Position = vec4( position, 1.0 ); }
</script>
<div id="container"></div>
<div id="info">Rainbow Pulse - GLSL shader - with <a href="https://threejs.org" target="_blank">three.js</a>
</div>
<div id="controls"> <label for="resolution">resolution: </label> <select id="resolution" value="2"> <option value="0.5">0.5x</option> <option value="1" selected>1x</option> <option value="2">2x</option> <option value="4">4x</option> <option value="8">8x</option> </select>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
[WebGL] Rainbow Pulse - Script Codes CSS Codes
body { color: #ffffff; font-family: Monospace; font-size: 13px; text-align: center; font-weight: bold; background-color: #000; margin: 0px; overflow: hidden;
}
#container { padding: 40vh 0;
}
#info, #controls { position: absolute; width: 100%; padding: 5px; background: rgba(0, 0, 0, 0.4);
}
#info { top: 0;
}
#controls { bottom: 0;
}
a { color: #ffffff; transition: 150ms all;
}
a:hover, a:focus { color: #ffc107;
}
[WebGL] Rainbow Pulse - Script Codes JS Codes
var lastUpdate;
var container;
var camera, scene, renderer;
var uniforms;
function init(showStats) { // stats if (showStats) { var stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0'; stats.domElement.style.top = '0'; document.body.appendChild(stats.domElement); requestAnimationFrame(function updateStats(){ stats.update(); requestAnimationFrame(updateStats); }); } // basic setup container = document.getElementById( 'container' ); camera = new THREE.Camera(); camera.position.z = 1; scene = new THREE.Scene(); var geometry = new THREE.PlaneBufferGeometry( 2, 2 ); // shader stuff uniforms = { time: { type: "f", value: 1.0 }, resolution: { type: "v2", value: new THREE.Vector2() } }; var material = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: document.getElementById( 'vertexShader' ).textContent, fragmentShader: document.getElementById( 'fragmentShader' ).textContent } ); lastUpdate = new Date().getTime(); // put it together for rendering var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio / 2 ); container.appendChild( renderer.domElement ); // event listeners onWindowResize(); window.addEventListener( 'resize', onWindowResize, false); document.getElementById('resolution').addEventListener('change', onResolutionChange, false);
}
// events
function onWindowResize(evt) { renderer.setSize( window.innerWidth, Math.max(window.innerHeight/5,100) ); uniforms.resolution.value.x = renderer.domElement.width; uniforms.resolution.value.y = renderer.domElement.height;
}
function onResolutionChange(evt) { var newResolutionScale = parseFloat(evt.target.value); renderer.setPixelRatio( window.devicePixelRatio / newResolutionScale ); uniforms.resolution.value.x = renderer.domElement.width; uniforms.resolution.value.y = renderer.domElement.height;
}
function animate() { var currentTime = new Date().getTime() var timeSinceLastUpdate = currentTime - lastUpdate; lastUpdate = currentTime; requestAnimationFrame( animate ); render(timeSinceLastUpdate);
}
function render(timeDelta) { uniforms.time.value += (timeDelta ? timeDelta / 1000 : 0.05); renderer.render( scene, camera );
}
// boot
init(false);
animate();
Developer | Chris Johnson |
Username | jhnsnc |
Uploaded | October 01, 2022 |
Rating | 4.5 |
Size | 4,067 Kb |
Views | 38,456 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Text Effect - Optimist | 3,467 Kb |
Incremental Delaunay Triangulation Demo | 8,204 Kb |
Shader Template | 3,345 Kb |
Text Effect - Mystique | 3,405 Kb |
Headlander Title Animation | 11,702 Kb |
Vector Star Eye | 1,788 Kb |
Bluemix Logo Scratch Animation | 5,976 Kb |
F Loader | 1,981 Kb |
HAL9000 | 3,056 Kb |
Colorized Perlin Noise Generator | 6,714 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
Responsive slide | Thorien | 2,400 Kb |
Portfolio Layout Flex | Lahvjal | 3,489 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Reading Grid | Tappily | 4,306 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
Mondrian | Chrisarmstrong | 2,787 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!