Why does Codepen.io not show a thumbnail / preview for this pen?

Question

http://codepen.io/fauxnoir/pen/mJwBxm

AUDIO_FILE = 'http://matthiasdv.org/cdn/tracks/robbery_song'

CODECS = [ 'mp3' ]

stats = new Stats()
stats.domElement.style.position = 'absolute'
stats.domElement.style.left = '0px'
stats.domElement.style.top = '0px'

# CONFIG
FORCE_INWARDS = 1000
RADIUS_INWARDS = 3000
FORCE_OUTWARDS = -200000
RADIUS_OUTWARDS = 400
NUM_PARTICLES = 800
PARTICLE_RADIUS_MULTIPLIER = 0.6
PARTICLE_MIN_MASS = 3.0
PARTICLE_MAX_MASS = 6.0



class Simulation

  @COLOURS = [
    '#030106'
  ]

  constructor: ->

    @physics = new Physics()
    @mouse = new Particle()
    @mouse.fixed = true
    @height = window.innerHeight
    @width = window.innerWidth

    @renderTime = 0
    @counter = 0

  setup: (full = yes) ->

    min = new Vector 0.0, 0.0
    max = new Vector @width, @height

    bounds = new EdgeBounce min, max

    @physics.integrator = new Verlet()

    center = new Vector(@width/2, @height/2)

    attraction = new Attraction center, RADIUS_INWARDS, FORCE_INWARDS
    repulsion = new Attraction center, RADIUS_OUTWARDS, 0
    collide = new Collision()

    # Dancer
    @dancer = new Dancer()
    @kick = @dancer.createKick {
      treshold: 0.2
      onKick: (mag) =>
        repulsion.strength = FORCE_OUTWARDS

        r = Random.item @physics.particles

        repulsion.target.x = r.pos.x
        repulsion.target.y = r.pos.y

      offKick: (mag) ->
        repulsion.strength = 0
    }


    max = if full then NUM_PARTICLES else 200

    for i in [0..max]
      p = new Particle (Random PARTICLE_MIN_MASS, PARTICLE_MAX_MASS)
      p.setRadius p.mass * PARTICLE_RADIUS_MULTIPLIER

      p.moveTo new Vector (Random @width), (Random @height)

      p.behaviours.push attraction
      p.behaviours.push repulsion
      p.behaviours.push bounds
      p.behaviours.push collide

      collide.pool.push p

      @physics.particles.push p

  ### Initialise the demo (override). ###
  init: (@container, @renderer = new WebGLRenderer()) ->

    # Build the scene.
    @setup @renderer.gl?

    # Give the particles random colours.
    for particle in @physics.particles
      particle.colour ?= Random.item Simulation.COLOURS

    # Add event handlers.
    document.addEventListener 'resize', @resize, false

    # Add to render output to the DOM.
    @container.appendChild @renderer.domElement

    # Prepare the renderer.
    @renderer.mouse = @mouse
    @renderer.init @physics

    # Resize for the sake of the renderer.
    do @resize

    #Dancer
    @kick.on()

    @dancer.load {
      src: AUDIO_FILE
      codecs: CODECS
    }

    @dancer.play()

  ### Handler for window resize event. ###
  resize: (event) =>

    @width = window.innerWidth
    @height = window.innerHeight
    @renderer.setSize @width, @height

  ### Update loop. ###
  step: ->

    stats.begin()

    # Step physics.
    do @physics.step

    # Render every frame for WebGL, or every 3 frames for canvas.
    @renderer.render @physics if @renderer.gl? or ++@counter % 3 is 0

    stats.end()

  ### Clean up after yourself. ###
  destroy: ->

    # Remove event handlers.
    document.removeEventListener 'resize', @resize, false

    # Remove the render output from the DOM.
    try container.removeChild @renderer.domElement
    catch error

    do @renderer.destroy
    do @physics.destroy

    @renderer = null
    @physics = null
    @mouse = null



simulation = new Simulation()
playing = false
container = $('#container')

init = ->
  playing = true
  simulation.init(container.get(0))
  update()

update = ->
  requestAnimationFrame(update)

  simulation.step() if playing && simulation

init()

This particular pen works fine. But... When I look at the preview in my profile It shows a blank preview? My other Pens seem fine, it's just this one that doesn't display properly.

Why is this? And what lines of code cause this?

Answer 1

Perhaps a loop with too many iterations causes the preview to hang

This help article may apply: Turn Off JavaScript in Previews

"On any page that displays a grid of Pens as live previews… This can be useful if you…accidentally create a Pen with JavaScript that is taking to long to run. Perhaps an infinite loop or a loop with so many iterations it hangs the browser."

You'll also notice that after a few seconds your other live previews freeze. This behavior can even be observed on the codepen.io homepage where memory intensive previews freeze after a few seconds while some previews (presumably less memory intensive) continue to animate.

FWIW it appears that the preview, while frozen, is showing the first frame of your pen as it appears on page load, which just happens to be a blank white screen. Perhaps a good compromise it to show some static version of the many particles initially so that the preview has something to show.