cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-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.

            
              .container
  h1 Joy Division<br />Unknown Pleasures
  
javascript:
  /*! simplex-noise.js: copyright 2012 Jonas Wagner, licensed under a MIT license. See https://github.com/jwagner/simplex-noise.js for details */
  !function(){"use strict";function SimplexNoise(random){random||(random=Math.random),this.p=new Uint8Array(256),this.perm=new Uint8Array(512),this.permMod12=new Uint8Array(512);for(var i=0;256>i;i++)this.p[i]=256*random();for(i=0;512>i;i++)this.perm[i]=this.p[255&i],this.permMod12[i]=this.perm[i]%12}var F2=.5*(Math.sqrt(3)-1),G2=(3-Math.sqrt(3))/6,F3=1/3,G3=1/6,F4=(Math.sqrt(5)-1)/4,G4=(5-Math.sqrt(5))/20;SimplexNoise.prototype={grad3:new Float32Array([1,1,0,-1,1,0,1,-1,0,-1,-1,0,1,0,1,-1,0,1,1,0,-1,-1,0,-1,0,1,1,0,-1,1,0,1,-1,0,-1,-1]),grad4:new Float32Array([0,1,1,1,0,1,1,-1,0,1,-1,1,0,1,-1,-1,0,-1,1,1,0,-1,1,-1,0,-1,-1,1,0,-1,-1,-1,1,0,1,1,1,0,1,-1,1,0,-1,1,1,0,-1,-1,-1,0,1,1,-1,0,1,-1,-1,0,-1,1,-1,0,-1,-1,1,1,0,1,1,1,0,-1,1,-1,0,1,1,-1,0,-1,-1,1,0,1,-1,1,0,-1,-1,-1,0,1,-1,-1,0,-1,1,1,1,0,1,1,-1,0,1,-1,1,0,1,-1,-1,0,-1,1,1,0,-1,1,-1,0,-1,-1,1,0,-1,-1,-1,0]),noise2D:function(xin,yin){var i1,j1,permMod12=this.permMod12,perm=this.perm,grad3=this.grad3,n0=0,n1=0,n2=0,s=(xin+yin)*F2,i=Math.floor(xin+s),j=Math.floor(yin+s),t=(i+j)*G2,X0=i-t,Y0=j-t,x0=xin-X0,y0=yin-Y0;x0>y0?(i1=1,j1=0):(i1=0,j1=1);var x1=x0-i1+G2,y1=y0-j1+G2,x2=x0-1+2*G2,y2=y0-1+2*G2,ii=255&i,jj=255&j,t0=.5-x0*x0-y0*y0;if(t0>=0){var gi0=3*permMod12[ii+perm[jj]];t0*=t0,n0=t0*t0*(grad3[gi0]*x0+grad3[gi0+1]*y0)}var t1=.5-x1*x1-y1*y1;if(t1>=0){var gi1=3*permMod12[ii+i1+perm[jj+j1]];t1*=t1,n1=t1*t1*(grad3[gi1]*x1+grad3[gi1+1]*y1)}var t2=.5-x2*x2-y2*y2;if(t2>=0){var gi2=3*permMod12[ii+1+perm[jj+1]];t2*=t2,n2=t2*t2*(grad3[gi2]*x2+grad3[gi2+1]*y2)}return 70*(n0+n1+n2)},noise3D:function(xin,yin,zin){var n0,n1,n2,n3,i1,j1,k1,i2,j2,k2,permMod12=this.permMod12,perm=this.perm,grad3=this.grad3,s=(xin+yin+zin)*F3,i=Math.floor(xin+s),j=Math.floor(yin+s),k=Math.floor(zin+s),t=(i+j+k)*G3,X0=i-t,Y0=j-t,Z0=k-t,x0=xin-X0,y0=yin-Y0,z0=zin-Z0;x0>=y0?y0>=z0?(i1=1,j1=0,k1=0,i2=1,j2=1,k2=0):x0>=z0?(i1=1,j1=0,k1=0,i2=1,j2=0,k2=1):(i1=0,j1=0,k1=1,i2=1,j2=0,k2=1):z0>y0?(i1=0,j1=0,k1=1,i2=0,j2=1,k2=1):z0>x0?(i1=0,j1=1,k1=0,i2=0,j2=1,k2=1):(i1=0,j1=1,k1=0,i2=1,j2=1,k2=0);var x1=x0-i1+G3,y1=y0-j1+G3,z1=z0-k1+G3,x2=x0-i2+2*G3,y2=y0-j2+2*G3,z2=z0-k2+2*G3,x3=x0-1+3*G3,y3=y0-1+3*G3,z3=z0-1+3*G3,ii=255&i,jj=255&j,kk=255&k,t0=.6-x0*x0-y0*y0-z0*z0;if(0>t0)n0=0;else{var gi0=3*permMod12[ii+perm[jj+perm[kk]]];t0*=t0,n0=t0*t0*(grad3[gi0]*x0+grad3[gi0+1]*y0+grad3[gi0+2]*z0)}var t1=.6-x1*x1-y1*y1-z1*z1;if(0>t1)n1=0;else{var gi1=3*permMod12[ii+i1+perm[jj+j1+perm[kk+k1]]];t1*=t1,n1=t1*t1*(grad3[gi1]*x1+grad3[gi1+1]*y1+grad3[gi1+2]*z1)}var t2=.6-x2*x2-y2*y2-z2*z2;if(0>t2)n2=0;else{var gi2=3*permMod12[ii+i2+perm[jj+j2+perm[kk+k2]]];t2*=t2,n2=t2*t2*(grad3[gi2]*x2+grad3[gi2+1]*y2+grad3[gi2+2]*z2)}var t3=.6-x3*x3-y3*y3-z3*z3;if(0>t3)n3=0;else{var gi3=3*permMod12[ii+1+perm[jj+1+perm[kk+1]]];t3*=t3,n3=t3*t3*(grad3[gi3]*x3+grad3[gi3+1]*y3+grad3[gi3+2]*z3)}return 32*(n0+n1+n2+n3)},noise4D:function(x,y,z,w){var n0,n1,n2,n3,n4,perm=(this.permMod12,this.perm),grad4=this.grad4,s=(x+y+z+w)*F4,i=Math.floor(x+s),j=Math.floor(y+s),k=Math.floor(z+s),l=Math.floor(w+s),t=(i+j+k+l)*G4,X0=i-t,Y0=j-t,Z0=k-t,W0=l-t,x0=x-X0,y0=y-Y0,z0=z-Z0,w0=w-W0,rankx=0,ranky=0,rankz=0,rankw=0;x0>y0?rankx++:ranky++,x0>z0?rankx++:rankz++,x0>w0?rankx++:rankw++,y0>z0?ranky++:rankz++,y0>w0?ranky++:rankw++,z0>w0?rankz++:rankw++;var i1,j1,k1,l1,i2,j2,k2,l2,i3,j3,k3,l3;i1=rankx>=3?1:0,j1=ranky>=3?1:0,k1=rankz>=3?1:0,l1=rankw>=3?1:0,i2=rankx>=2?1:0,j2=ranky>=2?1:0,k2=rankz>=2?1:0,l2=rankw>=2?1:0,i3=rankx>=1?1:0,j3=ranky>=1?1:0,k3=rankz>=1?1:0,l3=rankw>=1?1:0;var x1=x0-i1+G4,y1=y0-j1+G4,z1=z0-k1+G4,w1=w0-l1+G4,x2=x0-i2+2*G4,y2=y0-j2+2*G4,z2=z0-k2+2*G4,w2=w0-l2+2*G4,x3=x0-i3+3*G4,y3=y0-j3+3*G4,z3=z0-k3+3*G4,w3=w0-l3+3*G4,x4=x0-1+4*G4,y4=y0-1+4*G4,z4=z0-1+4*G4,w4=w0-1+4*G4,ii=255&i,jj=255&j,kk=255&k,ll=255&l,t0=.6-x0*x0-y0*y0-z0*z0-w0*w0;if(0>t0)n0=0;else{var gi0=perm[ii+perm[jj+perm[kk+perm[ll]]]]%32*4;t0*=t0,n0=t0*t0*(grad4[gi0]*x0+grad4[gi0+1]*y0+grad4[gi0+2]*z0+grad4[gi0+3]*w0)}var t1=.6-x1*x1-y1*y1-z1*z1-w1*w1;if(0>t1)n1=0;else{var gi1=perm[ii+i1+perm[jj+j1+perm[kk+k1+perm[ll+l1]]]]%32*4;t1*=t1,n1=t1*t1*(grad4[gi1]*x1+grad4[gi1+1]*y1+grad4[gi1+2]*z1+grad4[gi1+3]*w1)}var t2=.6-x2*x2-y2*y2-z2*z2-w2*w2;if(0>t2)n2=0;else{var gi2=perm[ii+i2+perm[jj+j2+perm[kk+k2+perm[ll+l2]]]]%32*4;t2*=t2,n2=t2*t2*(grad4[gi2]*x2+grad4[gi2+1]*y2+grad4[gi2+2]*z2+grad4[gi2+3]*w2)}var t3=.6-x3*x3-y3*y3-z3*z3-w3*w3;if(0>t3)n3=0;else{var gi3=perm[ii+i3+perm[jj+j3+perm[kk+k3+perm[ll+l3]]]]%32*4;t3*=t3,n3=t3*t3*(grad4[gi3]*x3+grad4[gi3+1]*y3+grad4[gi3+2]*z3+grad4[gi3+3]*w3)}var t4=.6-x4*x4-y4*y4-z4*z4-w4*w4;if(0>t4)n4=0;else{var gi4=perm[ii+1+perm[jj+1+perm[kk+1+perm[ll+1]]]]%32*4;t4*=t4,n4=t4*t4*(grad4[gi4]*x4+grad4[gi4+1]*y4+grad4[gi4+2]*z4+grad4[gi4+3]*w4)}return 27*(n0+n1+n2+n3+n4)}},"undefined"!=typeof define&&define.amd&&define(function(){return SimplexNoise}),"undefined"!=typeof exports?exports.SimplexNoise=SimplexNoise:"undefined"!=typeof window&&(window.SimplexNoise=SimplexNoise),"undefined"!=typeof module&&(module.exports=SimplexNoise)}();
            
          
!
            
              $background: #000
$foreground: #fff

html, body
  background: #aaa
  height: 100%
  width: 100%
  
body
  align-items: center
  display: flex
  justify-content: center
  margin: 0

.container
  background: $background
  border: 2px solid #aaa
  box-shadow: 0 0 12px #444
  box-sizing: border-box
  height: 480px
  max-height: 90vh
  max-width: 90vh
  overflow: hidden
  position: relative
  width: 480px
  
  canvas
    position: absolute
    top: 0
    bottom: 0
    left: 0
    cursor: pointer
    right: 0
  
  h1
    background: rgba($background, 0.4)
    bottom: 6px
    box-shadow: 0 0 18px 18px rgba($background, 0.4)
    color: $foreground
    font-family: sans-serif
    font-size: 18px
    left: 12px
    letter-spacing: 4px
    margin: 0
    pointer-events: none
    position: absolute
    text-shadow: 0 0 12px rgba($foreground, 0.4)
    text-transform: uppercase
    width: 100%
    z-index: 1
    
            
          
!
            
              // Constants
const BACKGROUND_COLOR = '#000';
const FOREGROUND_COLOR = 'rgba(255, 255, 255, 0.7)';
const LINE_SPACING_PX = 10;
const NODE_SPACING_PX = 10;
const AMPLITUDE_PX = 3;
const PEAK_HEIGHT_PX = 30;
const PEAK_WIDTH_RATIO = 1 / 10;
const WOBBLE_SPEED = 1 / 720;
const LINE_WIDTH = 1;

// State
let isMoving = false;
let t = 0;
let baselineOffset = 0; // Keeping this decoupled from `t` lets us transition smoothly to !isMoving, etc
let phase = 0;
let peakX;

// Simplex noise kicks Perlin noise's butt! Don't let the name fool you :D
const simplex = new SimplexNoise();

// DOM things
const container = document.querySelector('.container');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const h = canvas.height = container.offsetHeight;
const w = canvas.width = container.offsetWidth;
container.appendChild(canvas);

peakX = w / 2;

canvas.addEventListener('mousemove', e => peakX = mouseCoords(e).x);
canvas.addEventListener('click', e => isMoving = !isMoving);

ctx.fillStyle = BACKGROUND_COLOR;
ctx.strokeStyle = FOREGROUND_COLOR;
ctx.lineWidth = LINE_WIDTH;

// Each line is a typed array of node height values.
const numLines = Math.floor(h / LINE_SPACING_PX) + 1 + Math.ceil(PEAK_HEIGHT_PX / LINE_SPACING_PX);
const numNodes = Math.floor(w / NODE_SPACING_PX) + 1;
const lines = Array.from({length: numLines}, () => {
    const buffer = new ArrayBuffer(numNodes);
    return new Int8Array(buffer);
});
const hTotal = numLines * LINE_SPACING_PX;

// Self executing game loop. Here we go!
(function step() {
    // Node index for the center of our bell curve
    const peakNode = Math.round(peakX / NODE_SPACING_PX);
  
    // Clear the last frame
    ctx.clearRect(0, 0, w, h);
  
    if (isMoving) {
        ++baselineOffset;
      
        if (t % LINE_SPACING_PX === 0) {
            // Whenever a line shifts off the screen's top, we move it to the front of our array. `phase` keeps track of the array's offset.
            lines.unshift(lines.pop());
            phase = mod((phase + 1), numLines);
        }
    }
  
    for (let lineIdx = 0; lineIdx < numLines; ++lineIdx) {
        const adjustedLineIdx = mod(lineIdx + phase, numLines);
        const nodes = lines[adjustedLineIdx];
        const baseline = mod((adjustedLineIdx + 0.5) * LINE_SPACING_PX - baselineOffset, hTotal);
        
        // Update our nodes with the next simplex value times a gaussian curve centred on peakNode
        for (let nodeIdx = 0; nodeIdx < numNodes; ++nodeIdx) {
            const noise = simplex.noise3D(adjustedLineIdx, nodeIdx, t * WOBBLE_SPEED);
            const newValue = PEAK_HEIGHT_PX * (noise + 1) * Math.pow(
                Math.E, -Math.pow(
                    (nodeIdx - peakNode) / (numNodes * PEAK_WIDTH_RATIO), 2
                )
            ) + noise * AMPLITUDE_PX;
            nodes[nodeIdx] = newValue;
        }
        
        // Draw the line
        ctx.beginPath();
        ctx.moveTo(0, baseline);
        ctx.lineTo(0, baseline - nodes[0]);
        for (let x = 1; x < numNodes - 1; ++x) {
            const y = nodes[x];
          
            const midX = x + 0.5;
            const midY = (y + nodes[x + 1]) / 2;
          
            // Rather than drawing straight lines between nodes, this gives us
            // a curve that *approximates* each node value. If we were trying
            // to represent real data, this wouldn't fly.
            ctx.quadraticCurveTo(x * NODE_SPACING_PX, baseline - y,
                              midX * NODE_SPACING_PX, baseline - midY);
        }
        ctx.lineTo(w, baseline);
        ctx.fill();
        ctx.stroke();
    };
  
    // And around and around we go...
    t += 1;
    window.requestAnimationFrame(step);
})();

// Util functions
function mouseCoords({clientX, clientY}) {
    const {left, top} = canvas.getBoundingClientRect();
    return {
      x: clientX - left,
      y: clientY - top,
    };
}

// Proper modulo :-)
function mod(a, b) {
    return ((a % b) + b) % b;
}

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console