A Pen By
Max Kolyanov

` ````
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script id='vertexShader' type='x-shader/x-vertex'>
uniform float time;
varying vec3 vNormal;
void main() {
gl_Position = projectionMatrix *
modelViewMatrix *
vec4(position,1.0);
}
</script>
<script id='fragmentShader' type='x-shader/x-fragment'>
uniform float time;
uniform float delta;
uniform vec2 resolution;
varying vec3 vNormal;
float random (vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))*
43758.5453123);
}
void main() {
vec2 st = gl_FragCoord.xy/resolution.xy;
st.x *= resolution.x/resolution.y;
vec3 finalColor = vec3(0.0);
float d = 0.0;
float floor_y = floor(st.y*20.);
if(st.y > 0.5) {
st.x -= cos(time/floor_y * 1.1);
} else {
st.x -= sin(time/floor_y * 0.2 + 0.5);
}
st.x += sin(st.y*150.008 + 50.*(sin(time/10.)) )/100.;
float o_st_x = st.x;
vec3 c;
for(int i = 0; i < 3; i++) {
st.x += 0.;
float shift = 0.002 * abs(sin(time)) + 0.0045;
st.x = floor((o_st_x + float(i) * shift) * 100.);
st.y = floor_y;
float thickness = 0.852;
float patterns = smoothstep(0.260, thickness, random(st));
c[i] = patterns;
}
finalColor = c;
gl_FragColor = vec4((finalColor), 1.0);
}
</script>
```

` ````
var camera, renderer, plane;
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
var uniforms = {
time: { value: 1.0 },
delta: { value: .5 },
resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
}
var clock = new THREE.Clock();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 100;
scene = new THREE.Scene();
scene.background = new THREE.Color('#000');
geometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight);
material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
plane = new THREE.Mesh( geometry, material );
scene.add( plane );
renderer = new THREE.WebGLRenderer({ preserveDrawingBuffer: true });
renderer.autoClear = true;
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
}
function animate(time) {
requestAnimationFrame( animate );
render(time);
}
function render(time) {
time = time/1000;
var delta = clock.getDelta();
uniforms.time.value = time;
uniforms.delta.value = delta;
renderer.render( scene, camera );
}
init();
animate();
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers