# Complex Form with Black and White Bands

Developer
Size
3,209 Kb
Views
8,096

## How do I make an complex form with black and white bands?

After Sol Lewitt.Created by XORXOR, 2016 Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0). What is a complex form with black and white bands? How do you make a complex form with black and white bands? This script and codes were developed by XORXOR on 27 January 2023, Friday.

Complex Form with Black and White Bands Previews

## Complex Form with Black and White Bands - Script Codes HTML Codes

``````<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Complex Form with Black and White Bands</title> <link rel="stylesheet" href="css/style.css">
<body> <div id="container"></div>
<script id="vertexShader" type="x-shader/x-vertex"> void main() { gl_Position = vec4( position, 1.0 ); }
</script>
<script id="fragmentShader" type="x-shader/x-fragment"> uniform vec2 iResolution; uniform float iGlobalTime;
vec2 hash( vec2 p )
{	return fract( sin( vec2( p.x * p.y, p.x + p.y ) ) * vec2( 234342.1459123, 373445.3490423 ) );
}
// iq's voronoi
vec3 voronoi( in vec2 x )
{ vec2 n = floor(x); vec2 f = fract(x); //---------------------------------- // first pass: regular voronoi //----------------------------------	vec2 mg, mr, mo; float md = 8.0; for( int j=-1; j<=1; j++ ) for( int i=-1; i<=1; i++ ) { vec2 g = vec2(float(i),float(j));	vec2 o = hash( n + g ); vec2 r = g + o - f; float d = dot(r,r); if( d<md ) { md = d; mr = r; mg = g; mo = o; } } //---------------------------------- // second pass: distance to borders //---------------------------------- md = 8.0; for( int j=-2; j<=2; j++ ) for( int i=-2; i<=2; i++ ) { vec2 g = mg + vec2(float(i),float(j));	vec2 o = hash( n + g ); vec2 r = g + o - f; if( dot(mr-r,mr-r)>0.00001 ) md = min( md, dot( 0.5*(mr+r), normalize(r-mr) ) ); } return vec3( md, mo );
}
void main()
{	vec2 b = gl_FragCoord.xy / iResolution.x; vec2 p = gl_FragCoord.xy / iResolution.xy; float aspect = iResolution.x / iResolution.y; vec3 v = voronoi( b * 6.0 ); float rr = 5.28 * v.z; float c = cos( rr ); float s = sin( rr ); mat2 r = mat2( c, -s, s, c ); vec2 q = b * r; float o = smoothstep( 0.25, 0.4, 0.48 + 0.5 * sin( 150.0 * q.y + 5.0 * iGlobalTime ) ); o = mix( 0.0, o, smoothstep( .03, 0.06, v.x ) ); vec2 border = vec2( 0.03 ); border.x /= aspect; for ( float i = 3.0; i > 0.0; i -= 1.0 ) { float c = mod( i + 1.0, 2.0 );	o = mix( c, o, step( i * border.x, p.x ) );	o = mix( c, o, step( i * border.y, p.y ) );	o = mix( c, o, 1.0 - step( 1.0 - i * border.x, p.x ) );	o = mix( c, o, 1.0 - step( 1.0 - i * border.y, p.y ) ); }	gl_FragColor = vec4( vec3( o ), 1.0 );
}
</script> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>``````

## Complex Form with Black and White Bands - Script Codes CSS Codes

``````*{ padding: 0; margin: 0;
}``````

## Complex Form with Black and White Bands - Script Codes JS Codes

``````// Complex Form with Black and White Bands
// After Sol Lewitt.
//
// Created by XORXOR, 2016
// Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
var container;
var camera, scene, renderer;
var uniforms;
var startTime;
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( 4, 3 ); uniforms = { iGlobalTime: { type: "f", value: 1.0 }, iResolution: { type: "v2", value: new THREE.Vector2() } }; var material = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: document.getElementById( 'vertexShader' ).textContent, fragmentShader: document.getElementById( 'fragmentShader' ).textContent } ); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.WebGLRenderer(); container.appendChild( renderer.domElement ); onWindowResize(); window.addEventListener( 'resize', onWindowResize, false );
}
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() { var currentTime = Date.now(); uniforms.iGlobalTime.value = (currentTime - startTime) * 0.001; renderer.render( scene, camera );
}``````
 Developer XORXOR Username xorxor_hu Uploaded January 27, 2023 Rating 4 Size 3,209 Kb Views 8,096
Do you need developer help for Complex Form with Black and White Bands?

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.

XORXOR (xorxor_hu) Script Codes
 Name Size Cubic Tunnel 4,791 Kb Kaleidoscope 3,536 Kb Pastel Pump 3,763 Kb The Walking Raymarcher 7,934 Kb Birds 5,934 Kb Pipes 3,300 Kb 2050 3,612 Kb Complex Form with Black and White Spirals 3,340 Kb Morphing Tubes 3,406 Kb Grid of Birds 3,512 Kb
Create amazing marketing copy with AI!

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.