Complex Form with Black and White Spirals
How do I make an complex form with black and white spirals?
After Sol Lewitt's Complex Form with Black and White Bands.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 spirals? How do you make a complex form with black and white spirals? This script and codes were developed by XORXOR on 27 January 2023, Friday.
Complex Form with Black and White Spirals - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Complex Form with Black and White Spirals</title> <link rel="stylesheet" href="css/style.css">
</head>
<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;
// Complex Form with Black and White Spirals
// Created by XORXOR, 2016
// Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
// https://www.shadertoy.com/view/MtcXD7
//
// Thanks to iq for voronoi
// https://www.shadertoy.com/view/ldl3W8
// Spiral idea from Fingerprint generator by diviaki
// https://www.shadertoy.com/view/4t3SWN
#define ANIMATE
vec2 hash( vec2 p )
{ return fract( sin( vec2( p.x * p.y, p.x + p.y ) ) * vec2( 234342.1459123, 373445.3490423 ) );
}
// iq's voronoi
// https://www.shadertoy.com/view/ldl3W8
vec4 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 ); #ifdef ANIMATE o = 0.5 + 0.3*sin( iGlobalTime + 6.2831*o ); #endif 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 ); #ifdef ANIMATE o = 0.5 + 0.3*sin( iGlobalTime + 6.2831*o ); #endif 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 vec4( md, mr, mo.x + mo.y );
}
void main()
{ vec2 b = 6.0 * gl_FragCoord.xy / iResolution.x; vec4 v = voronoi( b ); vec2 q = v.yz; float a = iGlobalTime + atan( sign( v.w - 1.0 ) * q.y, q.x ); float l = length( q * 5.0 / ( sqrt( v.x ) ) ) + 0.319 * a; float m = mod( l, 2.0 ); float o = ( 1.0 - smoothstep( 1.7, 2.0, m ) ) * smoothstep( 1.0, 1.3, m ); o = mix( 0.0, o, smoothstep( 0.04, 0.07, v.x ) ); 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 Spirals - Script Codes CSS Codes
*{ padding: 0; margin: 0;
}
Complex Form with Black and White Spirals - 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)
// https://www.shadertoy.com/view/MldSD4
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,340 Kb |
Views | 6,072 |
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 |
Cubic Tunnel | 4,791 Kb |
Birds | 5,934 Kb |
The Walking Raymarcher | 7,934 Kb |
Grid of Birds | 3,512 Kb |
Kaleidoscope | 3,536 Kb |
2050 | 3,612 Kb |
Complex Form with Black and White Bands | 3,209 Kb |
Morphing Tubes | 3,406 Kb |
Pastel Pump | 3,763 Kb |
Pipes | 3,300 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 |
IE flex collapse bug fix | Rowno | 2,678 Kb |
RollOver Effect 2 | Lmack90 | 2,162 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
CSS Chat Bubbles | Boylett | 2,094 Kb |
CSS Grid Overlay | Cliffpyles | 3,090 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
SCSS Simple Animated Drop-In | Danwarfel | 2,175 Kb |
P5.js data visualization | Enginarslan | 2,233 Kb |
SVG Hover Animations | Kjbrum | 10,557 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!