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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <!-- Comment the IFRAME if you wan't to get rid of the SOUNDCLOUD WIDGET API -->
<iframe width="100%" height="58" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/214692735&color=%23ff69b4&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false"></iframe>

<div id="canvas-wrapper" aria-label="3D Polaroid World"></div>

<div class="toggle toggle--anim p-flex-hzt-center" id="toggle-anim">
  <button class="toggle__btn toggle__btn--anim p-text" type="button" data-action="pause" title="pause">||</button>
</div>

<div class="toggle p-flex-hzt-center" id="toggle-color">
	<button class="toggle__btn p-text" type="button" data-mode="multicolored" data-active="true">multicolored</button>
	<button class="toggle__btn p-text" type="button" data-mode="monochrome">monochrome</button>
</div>

<p class="credit p-text"><a href="https://www.ilithya.rocks/" target="blank" rel="external noopener" class="credit__link">by ilithya.rocks</a></p>

<script id="vertex" type="x-shader/x-vertex">
	varying vec3 vUv; 

    void main() {
		vUv = position; 
		gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
</script>

<script id="frag-pixel" type="x-shader/x-vertex">
// Shader code remix after: Author @patriciogv - 2015
precision highp float;
		
varying vec3 vUv; 

uniform vec2 u_gb;
uniform vec2 u_resolution;
uniform float u_time;

float random (vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);
}
	
void main() {	
    vec2 st = vUv.xy/u_resolution.xy;	
	float fr = 12.;

    st *= u_resolution.xy/fr;
    vec2 ipos = floor(st);
	float c1 = abs(sin(u_time*2.4*random(ipos)));
	vec2 gb = u_gb == vec2(1.0, 1.0) ? vec2(c1) : u_gb;

	vec3 color = vec3(c1, gb);
    gl_FragColor = vec4(color, 1.0);
}
</script>

<script id="frag-lines" type="x-shader/x-vertex">
// Shader code remix after: Author @patriciogv - 2015
precision highp float;
		
varying vec3 vUv; 

uniform vec2 u_gb;
uniform vec2 u_resolution;
uniform float u_time;

float random (vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);
}

void main() {
    vec2 st = vUv.y/u_resolution.xy;
	float fr = 4.;
	
    st *= u_resolution.xy/fr;
    vec2 ipos = floor(st);
	float c1 = abs(sin(u_time*2.6*random(ipos)));
	vec2 gb = u_gb == vec2(1.0, 1.0) ? vec2(c1) : u_gb;

	vec3 color = vec3(c1, gb);
    gl_FragColor = vec4(color, 1.0);
}
</script>

<script id="frag-halftone" type="x-shader/x-vertex">
precision highp float;
		
varying vec3 vUv; 

uniform vec2 u_gb;
uniform vec2 u_resolution;
uniform float u_time;

// Only random and circle functions by @patriciogv - 2015 - patricio.io
float random (vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);
}
	
float circle(vec2 _st, float _radius){	
    vec2 pos = vec2(.5)-_st;
    return smoothstep(1.0-_radius, 1.0-_radius+_radius*0.2, 1.-dot(pos,pos)*3.14*6.);
}
	
void main() {	
    vec2 st = vUv.xy/u_resolution.xy;
	st *= u_resolution.xy; // Fixes glitch shader bug
	
	float i = 5.5;
    vec2 str = st;
	str /= i;
    vec2 ipos = ceil(str);	
	float c1 = 1.0-circle(fract(st/i), abs(sin(u_time*3.*random(ipos))));
	vec2 gb = u_gb == vec2(1.0, 1.0) ? vec2(c1) : u_gb;

	vec3 color = vec3(c1, gb);
    gl_FragColor = vec4(color, 1.0);
}
</script>

<script id="frag-mixshaped" type="x-shader/x-vertex">
precision highp float;
		
varying vec3 vUv; 

uniform vec2 u_gb;
uniform vec2 u_resolution;
uniform float u_time;

// Only random and circle functions by @patriciogv - 2015 - patricio.io
float random (vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);
}
	
float circle(vec2 _st, float _radius){	
    vec2 pos = vec2(.5)-_st;
    return smoothstep(1.0-_radius, 1.0-_radius+_radius*0.2, 1.-dot(pos,pos)*3.14*5.);
}
	
void main() {
    vec2 st = vUv.xy/u_resolution.xy;
	st *= u_resolution.xy;
	
	float i = 12.;
    vec2 str = st;
	str /= i;
    vec2 ipos = ceil(str);	
	float c1 = 1.0-circle(fract(st/(i*2.)), abs(sin(u_time*3.*random(ipos))));
	vec2 gb = u_gb == vec2(1.0, 1.0) ? vec2(c1) : u_gb;

	vec3 color = vec3(c1, gb);
    gl_FragColor = vec4(color, 1.0);
}
</script>
              
            
!

CSS

              
                $c1: hotpink;
$c2: #fffffd; // white

* {
	user-select: none;
}

.p-text {
	color: $c2;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.55rem;
	letter-spacing: 2px;
	line-height: 1.5;
	text-align: center;
	text-transform: lowercase;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.p-flex-hzt-center {
	display: flex;
	justify-content: center;
}

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

canvas {
	cursor: grab;
}

iframe {
	width: calc(100% + 112px);
	height: 58px;
	position: absolute;
	top: -6px;
	left: -110px;
}

.toggle {
	width: 100%;
	position: absolute;
	bottom: 36px;
	left: 0;
	z-index: 90;
	
	&--anim {
		bottom: 70px;
	}
	
	&__btn {
		$gap: 5px;
		$gap_anim: 2px;
		
		background-color: $c1;
		border: 1px solid $c2;
		cursor: pointer;
		outline: none;
		padding: $gap round($gap * 2.2) $gap round($gap * 2.5);
		transition: background-color 0.2s ease-in-out;

		&--anim {
			border-color: $c1;
			font-size: 0.8rem;
			padding: $gap_anim round($gap_anim * 3) $gap_anim round($gap_anim * 5.8);
			
			&[data-action="pause"] {
				padding-right: round($gap_anim * 4.3);
			}
		}
		
		&:not(.toggle__btn--anim) {
			&:last-child {
				border-left: 0;
			}
		}
		
		&[data-active],
		&[data-action] {
			background-color: $c2;	
			color: $c1;
			font-weight: bold;
		}
	}
}

.credit {	
	width: 100%;
	position: absolute;
	bottom: 5px;
	left: 0;
	
	&__link {
		color: rgba($c2, 0.6);
		padding: 6px 15px 8px;
		text-decoration: none;
	}
}
              
            
!

JS

              
                /*
 * 3D POLAROID WORLD
 * Small virtual gallery for my GLSL #anydayshaders on-going experiments.
 *
 * - Move around the space in all directions by dragging your cursor or dragging with a finger on touch devices.
 * - Zoom in/out with mouse wheel or a two fingers gesture in trackpad and touch devices.
 * - Press the play/stop button to toggle all animations.
 * - Press buttons to change the world's mood: multicolored vs. monochrome black and white <3.
 *
 * Follow my shader experiments here:
 * https://github.com/ilithya/anydayshaders
 * https://twitter.com/hashtag/anydayshaders
 * https://www.instagram.com/explore/tags/anydayshaders/
 *
 * For now you can enjoy some music by Deftones while you browse the gallery via the SoundCloud Widget API at the top of your screen — it was recently 20 years of their White Pony album on June 20, 2020: 
 * https://www.youtube.com/watch?v=XLOKz155aXg
 * https://www.deftones.com/
 *
 * Maybe one day I'll get to showcase my code art in a real gallery with an installation of this form. :D
 *
 * #055 - #100DaysOfCode
 * By ilithya | 2020
 * https://www.ilithya.rocks/
 * https://twitter.com/ilithya_net
 */

// GLOBAL POLAROID FILM
const nearDist = 1;
const farDist = 1400;
const camera = new THREE.PerspectiveCamera(
	45,
	window.innerWidth / window.innerHeight,
	nearDist,
	farDist
);
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({ antialias: true });
const canvasWrapper = document.querySelector("#canvas-wrapper");
const clock = new THREE.Clock();
const tau = 2*Math.PI;
let controls;

const init = () => {
	camera.position.set(0, 0, 150);

	renderer.setClearColor("hotpink");
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);

	canvasWrapper.appendChild(renderer.domElement);
};
init();

const updateObjMatrix = (object) => {
	object.updateMatrix();
	object.matrixAutoUpdate = false;
};

// INSTANT FILM
const iWidth = 170;
const iHeight = iWidth * 1.2;
const iDepth = iWidth / 5;
const filmGeometry = new THREE.BoxBufferGeometry(
	iWidth,
	iHeight,
	iDepth
);
const emissiveLight = "#f9e6de"; // creamy
const materialOptions = {
	emissive: emissiveLight,
	shininess: 80
};
const filmMaterial = new THREE.MeshPhongMaterial(materialOptions);

// Add light for MeshPhongMaterial to be visible in scene
const spotLight = new THREE.SpotLight('#fffffd', 0.3);
spotLight.position.set(100, 400, 100);
scene.add(spotLight);

// INSTANT FILM PRINTS
const pWidth = iWidth/1.2;
const printGeometry = new THREE.PlaneBufferGeometry(
	pWidth,
	pWidth,
	1
);
const printMaterial = new THREE.MeshBasicMaterial({ color: "#000" });

const Film = function (group) {
	this.group = group;
};

let printMesh;
Film.prototype.create = function () {
	const iFilm = new THREE.Mesh(filmGeometry, filmMaterial);
	printMesh = new THREE.Mesh(printGeometry, printMaterial);

	printMesh.position.y = pWidth/10;
	printMesh.position.z = iDepth - 15;

	updateObjMatrix(printMesh);
	
	this.group.add(iFilm);
	this.group.add(printMesh);
};

const addPrintMeshMaterial = (gp, newMat) => gp.children[1].material = newMat;

const vertexShader = document.querySelector("#vertex").textContent;
const fragPixelShader = document.querySelector("#frag-pixel").textContent;
const fragLinesShader = document.querySelector("#frag-lines").textContent;
const fragHalftoneShader = document.querySelector("#frag-halftone").textContent;
const fragMixshapedShader = document.querySelector("#frag-mixshaped").textContent;

const instantGroup = new THREE.Group();

const uniformMulti = { type: "v2", value: new THREE.Vector2(0.52, 0.75) };
const uniformMono = { type: "v2", value: new THREE.Vector2(1.0, 1.0) };
const uniforms = {
	u_gb: uniformMulti,
	u_resolution: { type: "v2", value: new THREE.Vector2(1.0, 1.0) },
	u_time: { type: "f", value: 1.0 },
};
const setShaderMaterial = (fragShader) => new THREE.ShaderMaterial({
	uniforms,
	fragmentShader: fragShader,
	vertexShader,
});

const pixelPolaroid = setShaderMaterial(fragPixelShader);
const linesPolaroid = setShaderMaterial(fragLinesShader);
const halftonePolaroid = setShaderMaterial(fragHalftoneShader);
const mixshapedPolaroid = setShaderMaterial(fragMixshapedShader);

const filmGroup_01 = new THREE.Group();
const film_01 = new Film(filmGroup_01);
film_01.create();
addPrintMeshMaterial(filmGroup_01, pixelPolaroid);
instantGroup.add(filmGroup_01);

const filmGroup_02 = new THREE.Group();
const film_02 = new Film(filmGroup_02);
filmGroup_02.position.z = iWidth*1.5;
filmGroup_02.position.x = iWidth*1.5;
filmGroup_02.rotation.y = tau/-4;
updateObjMatrix(filmGroup_02);
film_02.create();
addPrintMeshMaterial(filmGroup_02, linesPolaroid);
instantGroup.add(filmGroup_02);

const filmGroup_03 = new THREE.Group();
const film_03 = new Film(filmGroup_03);
filmGroup_03.position.z = iWidth*1.5;
filmGroup_03.position.x = iWidth*-1.5;
filmGroup_03.rotation.y = tau/4;
updateObjMatrix(filmGroup_03);
film_03.create();
addPrintMeshMaterial(filmGroup_03, halftonePolaroid);
instantGroup.add(filmGroup_03);

const filmGroup_04 = new THREE.Group();
const film_04 = new Film(filmGroup_04);
filmGroup_04.position.z = iWidth*3;
filmGroup_04.rotation.y = tau/2;
updateObjMatrix(filmGroup_04);
film_04.create();
addPrintMeshMaterial(filmGroup_04, mixshapedPolaroid);
instantGroup.add(filmGroup_04);

instantGroup.position.z = iWidth*-1.5;
scene.add(instantGroup);

// 3D CONFETTI
const confettiGroup = new THREE.Group();
const radius = 3.5;
const triangleGeom = new THREE.TetrahedronBufferGeometry(radius);
const triangleMat = new THREE.MeshNormalMaterial();

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

const randomizeMatrix = (matrix) => {
	const position = new THREE.Vector3();
	const rotation = new THREE.Euler();
	const quaternion = new THREE.Quaternion();
	const scale = new THREE.Vector3();	

	const d = nearDist * 340;
	const d2 = d * 2;

	position.x = Math.random() * d2 - d;
	position.y = Math.random() * d2 - d;
	position.z = Math.random() * d2 - d;

	rotation.x = Math.random() * tau;
	rotation.y = Math.random() * tau;
	rotation.z = Math.random() * tau;

	quaternion.setFromEuler(rotation);

	scale.x = scale.y = scale.z = getRandomArbitrary(0.7, 1);

	matrix.compose(position, quaternion, scale);
};

const matrix = new THREE.Matrix4();
const count = Math.round(Math.max(window.innerWidth, window.innerHeight) / 8);
const deco = new THREE.InstancedMesh(triangleGeom, triangleMat, count);

for (let i = 0; i < count; i++) {
	randomizeMatrix(matrix);
	deco.setMatrixAt(i, matrix);
}

confettiGroup.add(deco);
scene.add(confettiGroup);

// WORLD COLOR & ANIMATION TOGGLE
let IS_ANIMATED = true;
const toggle = {
	btnAnim: document.querySelector("#toggle-anim button"),
	btnColor: document.querySelectorAll("#toggle-color button"),
	updateMaterial(mode) {
		const toggleMaterial =
			mode === "monochrome" ? uniformMono : uniformMulti;

		printMesh.material.uniforms.u_gb = toggleMaterial;
		printMesh.material.uniformsNeedUpdate = true;
	},
	checkActiveBtnColor() {
		this.btnColor.forEach((el) => {
			el.addEventListener("click", (e) => {
				e.preventDefault();

				const target = e.currentTarget;

				this.btnColor.forEach((l) => delete l.dataset.active);
				target.dataset.active = true;

				this.updateMaterial(target.dataset.mode);
			});
		});
	},
	checkActiveBtnAnim() {
		this.btnAnim.addEventListener("click", (e) => {
			e.preventDefault();

			const target = e.currentTarget;
			const txtPlay = `play`;
			const txtPause = `pause`;
			const iconPlay = `►`;
			const iconPause = `||`;
			
			function setBtnData(btn, icon) {
				target.dataset.action = btn;
				target.title = btn;
				target.textContent = icon;
			}
		
			if (target.dataset.action === 'pause') {
				setBtnData(txtPlay, iconPlay);
				IS_ANIMATED = false;
			} else {
				setBtnData(txtPause, iconPause);
				IS_ANIMATED = true;
			}
		});
	}
};
toggle.checkActiveBtnColor();
toggle.checkActiveBtnAnim();

// SCREEN RESIZE
const onWindowResize = () => {
	const w = window.innerWidth;
	const h = window.innerHeight;
	
	camera.aspect = w / h;
	camera.updateProjectionMatrix();

	renderer.setSize(w, h);
	
	uniforms.u_resolution.value.x = renderer.domElement.width;
	uniforms.u_resolution.value.y = renderer.domElement.height;
};
window.addEventListener("resize", onWindowResize);

// CONSTROLS INTERACTION
const createControls = () => {
	// Make sure to run controls outside render function 
	controls = new THREE.OrbitControls(camera, renderer.domElement);
	
	// If controls autoRotate is true, update controls during render
	controls.autoRotateSpeed = 3.0;
	controls.enableDamping = true;
	controls.dampingFactor = 0.15;
	controls.enableZoom = true;
	controls.minDistance = 0;
	controls.maxDistance = 750;
	controls.keyPanSpeed = 30;
};
createControls();

// CREATE ANIMATIONS
const createAnimShaders = () => {
	if (IS_ANIMATED) {
		uniforms.u_time.value = clock.getElapsedTime();
	}
};

const pos = 550;
confettiGroup.position.y = pos;

const createAnimConfetti = () => {	
	if (IS_ANIMATED) {
		const time = 0.5;
		let speed = time + Math.random() * time;
		confettiGroup.position.y -= speed;

		if (confettiGroup.position.y < -pos) {
			confettiGroup.rotation.x = tau;
			confettiGroup.position.y = pos;
			speed = 0;
		}
	}
};

// RENDER 3D WORLD
const render = () => {	
	createAnimShaders();
	createAnimConfetti();

	controls.autoRotate = IS_ANIMATED ? true : false;
	controls.update();
	
	renderer.render(scene, camera);

	requestAnimationFrame(render);
};
render();
              
            
!
999px

Console