Conversion from Shadertoy
https://www.shadertoy.com/view/llsyDj
A Pen by Nicholas C. Raftis III on CodePen.
Created
December 21, 2017 13:43
-
-
Save MacroMachines/48533ab0babadf6e2a3730c271f02415 to your computer and use it in GitHub Desktop.
My Shadertoy Bubbles V3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="container"></div> | |
| <img src="https://booth.n-e-o.vision/wp-content/uploads/2017/10/NEO_BOOTH_BusinessCard_FrontWEB_noborder.png" /> | |
| <script id="vertexShader" type="x-shader/x-vertex"> | |
| void main() { | |
| gl_Position = vec4( position, 0.1 ); | |
| } | |
| </script> | |
| <script id="fragmentShader" type="x-shader/x-fragment"> | |
| uniform vec2 iResolution; | |
| uniform float iGlobalTime; | |
| uniform vec2 iMouse; | |
| void main(void) { | |
| //uv is between 0 and 1 | |
| vec2 uv = -1.0 + 2.0*gl_FragCoord.xy / iResolution.xy; | |
| uv.x *= iResolution.x / iResolution.y; | |
| vec2 ms = iMouse.xy / iResolution.xy; | |
| // background | |
| vec3 color = vec3(0.9 + 0.1*uv.y); | |
| // bubbles | |
| for( int i=0; i<40; i++ ) | |
| { | |
| // bubble seeds | |
| float pha = sin(float(i)*546.13+1.0)*0.5 + 0.5; | |
| float siz = pow( sin(float(i)*651.74+5.0)*0.5 + 0.5, 4.0 ); | |
| float pox = sin(float(i)*321.55+4.1) * iResolution.x / iResolution.y; | |
| // buble size, position and color | |
| float rad = 0.2 + 0.5*siz; | |
| vec2 pos = vec2( pox, -1.0-rad + (2.0+2.0*rad)*mod(pha+0.1*iGlobalTime*(0.1+0.1*siz),1.0)); | |
| pos *=0.6*length(pos - sin(ms * 0.5-0.5)); | |
| float dis = length( uv - pos ); | |
| vec3 col = mix( vec3(0.34,0.6,0.0), vec3(0.1,0.4,0.8), 0.5+0.5*sin(float(i)*1.2+1.9)); | |
| // col+= 8.0*smoothstep( rad*0.95, rad, dis ); | |
| // render | |
| float f = length(uv-pos)/rad; | |
| f = sqrt(clamp(1.0-f*f,0.0,1.0)); | |
| color -= col.zyx *(1.0-smoothstep( rad*0.95, rad, dis )) * f; | |
| } | |
| // vigneting | |
| color *= sqrt(1.5-0.5*length(uv)); | |
| gl_FragColor = vec4(color,1.0); | |
| } | |
| </script> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var container; | |
| var camera, scene, renderer; | |
| var uniforms; | |
| var startTime; | |
| //var mouse = new THREE.Vector2(), INTERSECTED; | |
| init(); | |
| animate(); | |
| function init() { | |
| container = document.getElementById( 'container' ); | |
| startTime = Date.now(); | |
| camera = new THREE.Camera(); | |
| camera.position.z = 1; | |
| scene = new THREE.Scene(); | |
| var geometry = new THREE.PlaneBufferGeometry( 2, 1 ); | |
| uniforms = { | |
| iGlobalTime: { type: "f", value: 1.0 }, | |
| iResolution: { type: "v2", value: new THREE.Vector2() }, | |
| iMouse: { type: "v2", value: new THREE.Vector2() } | |
| }; | |
| var material = new THREE.ShaderMaterial( { | |
| uniforms: uniforms, | |
| vertexShader: document.getElementById( 'vertexShader' ).textContent, | |
| fragmentShader: document.getElementById( 'fragmentShader' ).textContent | |
| } ); | |
| msX = 500.0; | |
| msY = 500.0; | |
| document.addEventListener('mousemove', (e) => { | |
| const w = window.innerWidth; | |
| const cw = w/90; | |
| const h = window.innerHeight; | |
| const ch= h/90; | |
| var rect = e.target.getBoundingClientRect(); | |
| msX = e.clientX;// - rect.left; | |
| msY = e.clientY;// - rect.top; | |
| document.documentElement.style.setProperty('--x-offset', (e.clientX-cw)/w) | |
| document.documentElement.style.setProperty('--y-offset', (e.clientY-ch)/h) | |
| }) | |
| var mesh = new THREE.Mesh( geometry, material ); | |
| scene.add( mesh ); | |
| renderer = new THREE.WebGLRenderer(); | |
| container.appendChild( renderer.domElement ); | |
| onWindowResize(); | |
| window.addEventListener( 'resize', onWindowResize, true ); | |
| } | |
| function onWindowResize( event ) { | |
| uniforms.iResolution.value.x = window.innerWidth; | |
| uniforms.iResolution.value.y = window.innerHeight; | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| } | |
| function animate() { | |
| requestAnimationFrame( animate ); | |
| render(); | |
| } | |
| function render() { | |
| // mouse.x = ( event.clientX );/// window.innerWidth ) * 2 - 1; | |
| // mouse.y = - ( event.clientY);// / window.innerHeight ) * 2 + 1; | |
| var currentTime = Date.now(); | |
| uniforms.iMouse.value.x = msX; //mouse.x* | |
| uniforms.iMouse.value.y = msY; //mouse.y* | |
| uniforms.iGlobalTime.value = (currentTime - startTime) * 0.001; | |
| renderer.render( scene, camera ); | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://threejs.org/build/three.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| img { | |
| position: absolute; | |
| z-index: 50; | |
| top: 50%; | |
| left: 50%; | |
| width: 1050px; | |
| height: 600px; | |
| margin-top: -300px; /* Half the height */ | |
| margin-left: -525px; /* Half the width */ | |
| } | |
| div { position: relative; top: 0px; z-index: 30; padding: 0px; } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment