only after

index.html

<canvas></canvas>
<!-- Click to generate a new image -->

only-after.markdown

only after

I reconsidered where did I come from. This eased my fear.

A Pen by Gerard Ferrandez on CodePen.

License.

script.js

"use strict";
{
	const code = {
		setup() {
			this.render({
				startShape: 'start',
				transform: {s: 4, b: 1},
				background: '#111',
				minSize: 1,
				minComplexity: 1000,
				fov: 60,
				camDist: 300,
				lightPosition: [0.0, 5.0, -200.0],
				ambientColor: [0.1, 0.1, 0.1],
				diffuseColor: [0.2, 0.5, 0.8],
				specularColor: [1, 0.7, 0.2],
				shininess: 0.25
			});
		},
		rules() {
			return {
				start: s => {
					this.element(s, {b: 1});
					this.element(s, {x: -1, ry: 180, b: 1});
				},
				element: [
					1, s => {
						this.PLANE(s, {s:[1, 1, 2]});
						this.element(s, {x: 0.9, s: 0.99, hue: 1});
					},
					0.02, s => {
						this.PLANE(s, {s:[1, 1, 2]});
						this.element(s, {x: 1, s: 0.99, ry: 90});
						this.element(s, {x: 1, s: 0.99, ry: -90});
					},
					0.01, s => {
						this.PLANE(s, {s:[1, 1, 2]});
						this.element(s, {x: 0.6, y: 0.15, s: 0.99, ry: 30 });
					},
					0.01, s => {
						this.PLANE(s, {s:[1, 1, 2]});
						this.element(s, {x: 0.6, y: -0.15, s: 0.99, ry: -30 });
					},
					0.005, s => {
						this.CUBE(s, {y:25, s: [10, 50, 10], b: -0.2});
					},
				]
			};
		}
	};
	
	// import cfdg library
	cfdg.apply(code);
	// run code
	code.setup();
	// Click canvas to generate a new image
	["click", "touchdown"].forEach(event => {
		document.addEventListener(event, e => code.setup(), false);
	});
}

scripts

<script src="https://codepen.io/ge1doot/pen/rdwPLr/"></script>

style.css

html, body {
	overflow: hidden;
	touch-action: none;
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #000;
}
canvas {
	position: absolute;
	width: 100%; 
	height: 100%;
	user-select: none;
	cursor: pointer;
	background: #000;
}