Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Shader Session with Nicole Vella | 2022
 *
 * Nicole: 
 * https://www.instagram.com/nicole.vella.art/
 *
 * We're curiouslyminded:
 * https://www.curiouslyminded.xyz
 * https://www.twitch.tv/curiouslyminded
 * https://www.youtube.com/curiouslyminded -->

<div id="shadercollab"></div>
<script id="vertex" type="x-shader/x-vertex">
	void main() { gl_Position = vec4(position, 1.0); }
</script>

<script id="fragment" type="x-shader/x-fragment">
precision highp float;

uniform vec2 u_resolution;
uniform float u_time;
	
// Simplex 2D noise
// https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
vec3 spermute(vec3 x){
    return mod(((x*34.)+1.)*x,289.);
}
	
float snoise(vec2 v){
    const vec4 C=vec4(.211324865405187,.366025403784439,
    -.577350269189626,.024390243902439);
    vec2 i=floor(v+dot(v,C.yy));
    vec2 x0=v-i+dot(i,C.xx);
    vec2 i1;
    i1=(x0.x>x0.y)?vec2(1.,0.):vec2(0.,1.);
    vec4 x12=x0.xyxy+C.xxzz;
    x12.xy-=i1;
    i=mod(i,289.);
    vec3 p=spermute(spermute(i.y+vec3(0.,i1.y,1.))
    +i.x+vec3(0.,i1.x,1.));
    vec3 m=max(.5-vec3(dot(x0,x0),dot(x12.xy,x12.xy),
    dot(x12.zw,x12.zw)),0.);
    m=m*m;
    m=m*m;
    vec3 x=2.*fract(p*C.www)-1.;
    vec3 h=abs(x)-.5;
    vec3 ox=floor(x+.5);
    vec3 a0=x-ox;
    m*=1.79284291400159-.85373472095314*(a0*a0+h*h);
    vec3 g;
    g.x=a0.x*x0.x+h.x*x0.y;
    g.yz=a0.yz*x12.xz+h.yz*x12.yw;
    return 130.*dot(m,g);
}

//
// GLSL textureless classic 2D & 3D noise "cnoise",
// Author:  Stefan Gustavson (stefan.gustavson@liu.se)
// Version: 2011-08-22
//
// Many thanks to Ian McEwan of Ashima Arts for the
// ideas for permutation and gradient selection.
//
// Copyright (c) 2011 Stefan Gustavson. All rights reserved.
// Distributed under the MIT license. See LICENSE file.
// https://github.com/stegu/webgl-noise
//

vec3 mod289(vec3 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 mod289(vec4 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 permute(vec4 x) {
  return mod289(((x*34.0)+10.0)*x);
}

vec4 taylorInvSqrt(vec4 r) {
  return 1.79284291400159 - 0.85373472095314 * r;
}

vec3 fade(vec3 t) {
  return t*t*t*(t*(t*6.0-15.0)+10.0);
}

vec2 fade(vec2 t) {
  return t*t*t*(t*(t*6.0-15.0)+10.0);
}

// Classic Perlin noise
// https://github.com/ashima/webgl-noise
float cnoise(vec2 P) {
  vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
  vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
  Pi = mod289(Pi); // To avoid truncation effects in permutation
  vec4 ix = Pi.xzxz;
  vec4 iy = Pi.yyww;
  vec4 fx = Pf.xzxz;
  vec4 fy = Pf.yyww;

  vec4 i = permute(permute(ix) + iy);

  vec4 gx = fract(i * (1.0 / 41.0)) * 2.0 - 1.0 ;
  vec4 gy = abs(gx) - 0.5 ;
  vec4 tx = floor(gx + 0.5);
  gx = gx - tx;

  vec2 g00 = vec2(gx.x,gy.x);
  vec2 g10 = vec2(gx.y,gy.y);
  vec2 g01 = vec2(gx.z,gy.z);
  vec2 g11 = vec2(gx.w,gy.w);

  vec4 norm = taylorInvSqrt(vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)));
  g00 *= norm.x;  
  g01 *= norm.y;  
  g10 *= norm.z;  
  g11 *= norm.w;  

  float n00 = dot(g00, vec2(fx.x, fy.x));
  float n10 = dot(g10, vec2(fx.y, fy.y));
  float n01 = dot(g01, vec2(fx.z, fy.z));
  float n11 = dot(g11, vec2(fx.w, fy.w));

  vec2 fade_xy = fade(Pf.xy);
  vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
  float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
  return 2.3 * n_xy;
}

// Classic Perlin noise
float cnoise(vec3 P) {
  vec3 Pi0 = floor(P); // Integer part for indexing
  vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
  Pi0 = mod289(Pi0);
  Pi1 = mod289(Pi1);
  vec3 Pf0 = fract(P); // Fractional part for interpolation
  vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
  vec4 iy = vec4(Pi0.yy, Pi1.yy);
  vec4 iz0 = Pi0.zzzz;
  vec4 iz1 = Pi1.zzzz;

  vec4 ixy = permute(permute(ix) + iy);
  vec4 ixy0 = permute(ixy + iz0);
  vec4 ixy1 = permute(ixy + iz1);

  vec4 gx0 = ixy0 * (1.0 / 7.0);
  vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
  gx0 = fract(gx0);
  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
  vec4 sz0 = step(gz0, vec4(0.0));
  gx0 -= sz0 * (step(0.0, gx0) - 0.5);
  gy0 -= sz0 * (step(0.0, gy0) - 0.5);

  vec4 gx1 = ixy1 * (1.0 / 7.0);
  vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
  gx1 = fract(gx1);
  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
  vec4 sz1 = step(gz1, vec4(0.0));
  gx1 -= sz1 * (step(0.0, gx1) - 0.5);
  gy1 -= sz1 * (step(0.0, gy1) - 0.5);

  vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
  vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
  vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
  vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
  vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
  vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
  vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
  vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);

  vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
  g000 *= norm0.x;
  g010 *= norm0.y;
  g100 *= norm0.z;
  g110 *= norm0.w;
  vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
  g001 *= norm1.x;
  g011 *= norm1.y;
  g101 *= norm1.z;
  g111 *= norm1.w;

  float n000 = dot(g000, Pf0);
  float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
  float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
  float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
  float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
  float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
  float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
  float n111 = dot(g111, Pf1);

  vec3 fade_xyz = fade(Pf0);
  vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
  vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
  float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); 
  return 2.2 * n_xyz;
}
	
// https://www.shadertoy.com/view/ll2GD3
vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ){
    return a + b*cos( 6.28318*(c*t+d) );
}
	
vec2 getRadialUv(vec2 uv) {
    float a = atan(uv.x, uv.y);
    float r = 1.0-length(uv);
    float n = cnoise(uv+u_time*.1);
    vec2 s = r * vec2(cos(a),sin(a));
    return s;
}
	
#define smoothStair(x, s, f) x * s - sin(x*f);
	
float drawCicle(vec2 st, vec2 pos, float size, float blur) {
	float c = distance(st,pos);
	c = step(size,c);
	return 1.-c;
}
	
float noiseLoop(vec2 st, float loopLength, float noiseSpeed, float noiseScale) {
    // create speed based on time
    noiseSpeed = u_time * noiseSpeed;

    // create loop segment and position
    // using fract gives us a continous count from 0 to 1
    float loopSegment = fract(noiseSpeed);
    // to get the position of the noise, we divide the looplength by the framecount
    // this gives us some vale between 0% (the beginning of the loop) and 100% (the end of the loop)
    float noisePos = loopLength*loopSegment;

    // create our noise fields
    float n1 = cnoise(noiseScale*vec3(st.x,st.y,noisePos));
    // offset the second noise field by the length of the loop
    float n2 = cnoise(noiseScale*vec3(st.x,st.y,noisePos-loopLength));
 
    // mix the noise together at the 
    float loop = mix(n1,n2,loopSegment)*.5+.5;
   // return loop;
    return (loop > 0.5 ? 1. : 0. );
}

void main() {
	vec2 st = gl_FragCoord.xy / u_resolution;
	
	float time = u_time;
	
	vec3 color = vec3(1.0);
	
	float animation1 = smoothStair(time*.5,1.0,.9);
	float animation2 = smoothStair(time*.5,2.0,1.9);
	float animation3 = smoothStair(time*.25,3.0,2.9);
	
	vec2 st2 = st;
	
	st -= 0.5;
	
//	st = getRadialUv(st);
	
//	st2 = getRadialUv(st2);
	
//	st.x = abs(1.0 -st.x * 2.);
//	st2.x = abs(1.0 -st2.x * 2.);
	
	float circle1 = drawCicle(
		vec2(
			cnoise(10.+9.*st+vec2(st.x,animation1)),
			cnoise(10.+10.*st)
		),
		vec2(.5),
			1.15,
			3.0
	);
	
	float circle2 = drawCicle(
		vec2(
			cnoise(30.+12.*st+vec2(st.x,animation2)),
			cnoise(30.+10.*st)
		),
		vec2(.5),
			.85,
			3.0
	);
	
float circle3 = drawCicle(
		vec2(
			cnoise(50.+3.*st+vec2(st.x,animation3)),
			cnoise(50.+10.*st)
		),
		vec2(.5),
			.85,
			3.0
	);
	
	float circle4 = drawCicle(
		vec2(
			cnoise(70.+1.*st+vec2(st.x,animation3)),
			cnoise(70.+10.*st)
		),
		vec2(.5),
			.85,
			3.0
	);
	
	float circle5 = drawCicle(
		vec2(
			cnoise(10.+9.*st+vec2(st2.x,animation1)),
			cnoise(10.+10.*st2)
		),
		vec2(.5),
			.35,
			3.0
	);
	
	vec3 red = vec3(1.0,0.,0.);
	vec3 gradient = vec3(0.5,st);
	vec3 pastel = vec3(vec2(pow(st,st)),1.0);
	vec3 gradient2 = pal(
		cnoise(10.+.5*vec3(st.x,st.y,time)), 
		vec3(1.458, 0.448, 0.500),
		vec3(-0.222, 0.178, 0.500),
		vec3(0.398, 0.398, 1.000),
		vec3(0.948, 0.333, 0.667)
	);
	vec3 gradient3 = vec3(st,1.0);

	color = mix(color,gradient2,circle1);
	
	color = pow(mix(color,gradient,circle2),color);
	
	color = mix(color,pastel,circle3);
	
	color *= mix(color,gradient3,circle4);
	
	color = mix(color,pastel,circle5);
	
	//float n = cnoise(5.*vec3(st,time*.1))*.5+.5;
	
	// float n = noiseLoop(vec2(st.y,noiseLoop(st,6.0,0.01,10.)), 3.0, .01, 10.0);
	
	// n = n < 0.5 ? 1.0 : 0.;
	
	gl_FragColor = vec4(color, 1.0);
    // gl_FragColor = vec4(vec3(n), 1.0);
}
</script>
              
            
!

CSS

              
                $c1: #000; // black

* {
	user-select: none;
}

body {
	height: 100vh;
	background-color: $c1;
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
}

.debug-drawer {
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	// border: 1px solid #888;
	
	pre {
		background-color: #000; // black
		color: #fff; // white
		padding: 5px;
		margin: 0;
		
		.error-line {
			background: red;// #e8e8e8;
		}
		
		.error {
			color: #d00;
			font-style: italic;
		}
	}
}
              
            
!

JS

              
                /* 
 * SHADER SESSION WITH NICOLE VELLA
 * JAN 2022
 *
 * Nicole:
 * https://www.instagram.com/nicole.vella.art/
 *
 * We're curiouslyminded:
 * https://www.curiouslyminded.xyz
 * https://www.twitch.tv/curiouslyminded
 * https://www.youtube.com/curiouslyminded
 *
 *
 * GLSL Debugger in JS by Sean Zellmer:
 * https://twitter.com/lejeunerenard
 *
 */

let camera, scene, renderer, clock;
let uniforms;

function shaderErrorView (errors, code) {
	// Alter code to display error
	const codeLines = code.trim().split('\n')
	const maxGutter = Math.floor(Math.log10(codeLines.length))
	const errorLines = codeLines.map(function (line, i) {
		i += 1 // Adjust for 1-indexed errors
		
		const lineNumWidth = Math.floor(Math.log10(i))
		const gutter = ' '.repeat(maxGutter - lineNumWidth) + i
		
		// Error lineNumber is based on non-trimmed code which includes an empty first line
		const lineErrors = errors.filter((error) => error.lineNumber - 1 === i)
		const lineClass = lineErrors.length ? 'error-line' : ''
		let errorMessages = lineErrors.map((e) => '<span class="error">' + e.message + '</span>').join(', ')
		if (errorMessages !== '') errorMessages = ' ' + errorMessages
		
		return `<span class="${lineClass}">${gutter}| ${line}${errorMessages}</span>`
	})
	
	const container = document.createElement('div')
	container.classList.add('debug-drawer')
	
	const pre = document.createElement('pre')
	const codeContainer = document.createElement('code')
	codeContainer.innerHTML = errorLines.join('\n')

	pre.appendChild(codeContainer)
	container.appendChild(pre)
	
	return container
}

function checkForShaderErrors (renderer) {
	var errors = [];
	const currentScript = 'fragmentShader';
	
	var programs = renderer.info.programs;

	valid = true;
	var parseMessage = /^(?:ERROR|WARNING): \d+:(\d+): (.*)/gm; // Fixed threejs regex by adding `m` flag

	for ( var i = 0, n = programs.length; i !== n; ++ i ) {

		var diagnostics = programs[ i ].diagnostics;

		if ( diagnostics === undefined ) continue;

		if ( ! diagnostics.runnable ) valid = false;

		var shaderInfo = diagnostics[ currentScript ];
		var lineOffset = shaderInfo.prefix.split( /\r\n|\r|\n/ ).length;

		while ( true ) {

			var parseResult = parseMessage.exec( shaderInfo.log );
			if ( parseResult === null ) break;

			errors.push( {

				lineNumber: parseResult[ 1 ] - lineOffset,
				message: parseResult[ 2 ]

			} );

		} // messages

		break;

	} // programs
	
	return errors
}

function init() {
	const container = document.getElementById("shadercollab");

	clock = new THREE.Clock();
	camera = new THREE.Camera();
	camera.position.z = 1;

	scene = new THREE.Scene();

	const geometry = new THREE.PlaneBufferGeometry(2, 2);

	uniforms = {
		u_time: { type: "f", value: 1.0 },
		u_resolution: { type: "v2", value: new THREE.Vector2() },
	};

	const material = new THREE.ShaderMaterial({
		uniforms,
		vertexShader: document.getElementById("vertex").textContent,
		fragmentShader: document.getElementById("fragment").textContent
	});

	const mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);

	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio(window.devicePixelRatio);

	container.appendChild(renderer.domElement);
	
	onWindowResize();
	window.addEventListener("resize", onWindowResize);
}

function onWindowResize() {
	renderer.setSize(window.innerWidth, window.innerHeight);
	uniforms.u_resolution.value.x = renderer.domElement.width;
	uniforms.u_resolution.value.y = renderer.domElement.height;
}

let runOnce = false
function render() {
	uniforms.u_time.value = clock.getElapsedTime();
	renderer.render(scene, camera);
	if (!runOnce) {
		const errors = checkForShaderErrors(renderer)
		if (errors.length) {
			const overlay = shaderErrorView(errors,document.getElementById("fragment").textContent)
			document.body.appendChild(overlay)
		}
		
		runOnce = true
	}
}

function animate() {
	render();
	requestAnimationFrame(animate);
}

init();
animate();
              
            
!
999px

Console