cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <div id="js-app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>

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

<script id="fragmentShader" type="x-shader/x-vertex">
  const int MAX_MARCHING_STEPS = 255;
  const float MIN_DIST = 0.0;
  const float MAX_DIST = 1000.0;
  const float EPSILON = 0.0001;
  const float SPHERE_R = 1.0;
  const float BOX_W = 1.0;
  const float BOX_D = 1.0;
  const float BOX_H = 1.0;
  uniform vec3 uResolution;
  uniform float uTime;

  #define M_PI 3.1415926535897932384626433832795
  #define color1 vec4(1.0, 1.0, 1.0, 1.0)
  #define color2 vec4(1.0, 0.8, 0.2, 1.0)
  #define color3 vec4(1.0, 0.03, 0.0, 1.0)
  #define color4 vec4(0.05, 0.02, 0.02, 1.0)
  #define noiseSteps 1
  #define noiseAmplitude 0.06
  #define noiseFrequency 4.0
  #define animation vec3(0.0, -6.0, 0.5)
  #define background vec4(0.1, 0.0, 0.0, 1.0)

  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)+1.0)*x); }
  vec4 taylorInvSqrt (vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }

  float snoise (vec3 v) {
    const vec2 C = vec2(1.0/6.0, 1.0/3.0);
    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
    vec3 i  = floor(v + dot(v, C.yyy)); // First corner
    vec3 x0 = v - i + dot(i, C.xxx);
    vec3 g = step(x0.yzx, x0.xyz); // Other corners
    vec3 l = 1.0 - g;
    vec3 i1 = min(g.xyz, l.zxy);
    vec3 i2 = max(g.xyz, l.zxy);
    vec3 x1 = x0 - i1 + C.xxx;
    vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
    vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y
    i = mod289(i); // Permutations
    vec4 p = permute( permute( permute( i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
    // Gradients: 7x7 points over a square, mapped onto an octahedron.
    // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
    float n_ = 0.142857142857; // 1.0/7.0
    vec3  ns = n_ * D.wyz - D.xzx;
    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)
    vec4 x_ = floor(j * ns.z);
    vec4 y_ = floor(j - 7.0 * x_);    // mod(j,N)
    vec4 x = x_ *ns.x + ns.yyyy;
    vec4 y = y_ *ns.x + ns.yyyy;
    vec4 h = 1.0 - abs(x) - abs(y);
    vec4 b0 = vec4(x.xy, y.xy);
    vec4 b1 = vec4(x.zw, y.zw);
    vec4 s0 = floor(b0) * 2.0 + 1.0;
    vec4 s1 = floor(b1) * 2.0 + 1.0;
    vec4 sh = -step(h, vec4(0.0));
    vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
    vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
    vec3 p0 = vec3(a0.xy, h.x);
    vec3 p1 = vec3(a0.zw, h.y);
    vec3 p2 = vec3(a1.xy, h.z);
    vec3 p3 = vec3(a1.zw, h.w);
    //Normalise gradients
    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
    p0 *= norm.x;
    p1 *= norm.y;
    p2 *= norm.z;
    p3 *= norm.w;
    // Mix final noise value
    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
    m = m * m;
    return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));
  }

	float turbulence (vec3 position, float minFreq, float maxFreq, float qWidth) {
    float value = 0.0;
    float cutoff = clamp(0.5 / qWidth, 0.0, maxFreq);
    float fade;
    float fOut = minFreq;
    for (int i = noiseSteps ; i >= 0 ; i--) {
      if (fOut >= 0.5 * cutoff) break;
      fOut *= 2.0;
      value += abs(snoise(position * fOut)) / fOut;
    }
    fade = clamp(2.0 * (cutoff - fOut) / cutoff, 0.0, 1.0);
    value += fade * abs(snoise(position * fOut)) / fOut;
    return 1.0 - value;
  }

	vec4 fireShade (float distance) {
    float c1 = saturate(distance * 5.0 + 0.5);
    float c2 = saturate(distance * 5.0);
    float c3 = saturate(distance * 3.4 - 0.5);
    vec4 a = mix(color1, color2, c1);
    vec4 b = mix(a, color3, c2);
    return mix(b, color4, c3);
  }

	float maxcomp (in vec3 p) {
    return max(p.x, max(p.y, p.z));
  }

	vec3 opTrans (vec3 p, vec3 d) {
    return p - d;
  }

  vec3 opRep (vec3 p, vec3 spacing) {
    return mod(p, spacing) - spacing / 2.0;
  }

  vec3 opTwist (vec3 p, float q) {
    float c = cos(q * p.y + q);
    float s = sin(q * p.y + q);
    mat2 m = mat2(c, -s, s, c);
    return vec3(m * p.xz, p.y);
  }

	float sdPlane (vec3 p, vec4 n) {
    return dot(p, n.xyz) + n.w;
  }

	float sdPyramid4 (vec3 p, vec3 h) {
    p.xz = abs(p.xz);
    vec3 n = normalize(h);
    return sdPlane(p, vec4(n, 0.0));
  }

	float sdTriPrism (vec3 p, vec2 h) {
    vec3 q = abs(p);
    return max(q.z - h.y, max(q.x * 0.866025 + p.y * 0.5, -p.y) - h.x * 0.5);
  }

  float sdBox (vec3 p, vec3 b, float r) {
    vec3 d = abs(p) - b;
    return min(maxcomp(d), 0.0) - r + length(max(d, 0.0));
  }

  float sdSphere (vec3 p, float r) {
    return length(p) - r;
  }

  vec2 sceneSDF (vec3 p) {
    float time = uTime;
    float noise = saturate(abs(turbulence(p * noiseFrequency + animation * time, 0.1, 1.5, 0.03) * noiseAmplitude));
  	vec3 q = p;
    float d = 0.0;
    d = sdSphere(q, 0.5) - noise;
    return vec2(d, noise);
  }

  vec2 shortestDistanceToSurface (vec3 eye, vec3 marchingDirection, float start, float end) {
    float depth = start;
    for (int i = 0; i < MAX_MARCHING_STEPS; i++) {
      vec2 response = sceneSDF(eye + depth * marchingDirection);
      float dist = response.x;
      float noise = response.y;
      if (dist < EPSILON) {
        return vec2(depth, noise);
      }
      depth += dist;
      if (depth >= end) {
        return vec2(end, noise);
      }
    }
    return vec2(end, 0.0);
  }

  vec3 rayDirection (float fieldOfView, vec2 size, vec2 fragCoord) {
    vec2 xy = fragCoord - size / 2.0;
    float z = size.y / tan(radians(fieldOfView) / 2.0);
    return normalize(vec3(xy, -z));
  }

  mat3 rotationXY (vec2 angle) {
    vec2 c = cos(angle);
    vec2 s = sin(angle);
    return mat3(
      c.y      ,  0.0, -s.y,
      s.y * s.x,  c.x,  c.y * s.x,
      s.y * c.x, -s.x,  c.y * c.x
    );
  }

  vec3 hsb2rgb (in vec3 c) {
    vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
    rgb = rgb * rgb * (3.0 - 2.0 * rgb);
    return c.z * mix(vec3(1.0), rgb, c.y);
  }

  void main () {
    vec3 viewDir = rayDirection(45.0, uResolution.xy, vec2(gl_FragCoord.xy));
    float time = uTime / 6.0;
    vec3 eye = vec3(0.0, 0.0, 5.0);
    mat3 rot = rotationXY(vec2(0.0, sin(time) * 3.0));
    eye = rot * eye;
    viewDir = rot * viewDir;
    vec3 dir = viewDir;
    vec2 distDisp = shortestDistanceToSurface(eye, dir, MIN_DIST, MAX_DIST);
    float dist = distDisp.x;
    float displacement = distDisp.y;
    if (dist > MAX_DIST - EPSILON) {
      gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
      return;
    }
    vec3 p = eye + dist * dir;
    vec3 K_a = vec3(0.2, 0.2, 0.2);
    vec3 K_d = hsb2rgb(vec3(fract(uTime / 8.0), 0.9, 0.85));
    vec3 K_s = vec3(1.0, 1.0, 1.0);
    float shininess = 10.0;
    vec4 color = mix(fireShade(displacement), vec4(K_s, 1.0), float(displacement >= 0.5));
    gl_FragColor = color;
  }
</script>
            
          
!
            
              body {
  background-color: #000;
  margin: 0;
}

canvas {
  display: block;
  margin: 0 auto;
}
            
          
!
            
              setTimeout(() => {
  const container = document.getElementById('js-app');
  const camera = new THREE.Camera();
  camera.position.z = 1;
  const scene = new THREE.Scene();
  const geometry = new THREE.PlaneBufferGeometry(2, 2);
  const uniforms = {
    uTime: { type: "f", value: 1.0 },
    uResolution: { type: "v2", value: new THREE.Vector2() },
    uMouse: { type: "v2", value: new THREE.Vector2() }
  };
  const material = new THREE.ShaderMaterial({
    uniforms,
    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent
  });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  const renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  container.appendChild(renderer.domElement);
  const onWindowResize = handleWindowResize(renderer, uniforms);
  onWindowResize();
  window.addEventListener('resize', onWindowResize, false);
  document.onmousemove = function (e) {
    uniforms.uMouse.value.x = e.pageX
    uniforms.uMouse.value.y = e.pageY
  }
  animate(renderer, scene, camera, uniforms);
});

function handleWindowResize (renderer, uniforms) {
  return () => {
    const size = 280; // Math.min(window.innerWidth, window.innerHeight);
    renderer.setSize(size, size);
    uniforms.uResolution.value.x = renderer.domElement.width;
    uniforms.uResolution.value.y = renderer.domElement.height;
  };
}

function animate (renderer, scene, camera, uniforms) {
  requestAnimationFrame(() => {
    animate(renderer, scene, camera, uniforms);
  });
  render(renderer, scene, camera, uniforms);
}

function render (renderer, scene, camera, uniforms) {
  uniforms.uTime.value += 16 / 1000;
  renderer.render(scene, camera);
}
            
          
!
999px
Loading ..................

Console