为什么Codepen.io没有显示此笔的缩略图/预览?

时间:2015-06-11 13:42:21

标签: javascript jquery coffeescript

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()

这个特殊的笔工作正常。但是......当我查看my profile中的预览时,它会显示空白预览吗?我的其他笔看起来很好,只是这个没有正确显示。

这是为什么?什么行代码会导致这种情况?

1 个答案:

答案 0 :(得分:1)

也许迭代次数过多的循环会导致预览挂起

此帮助文章可能适用:Turn Off JavaScript in Previews

  

“在任何显示钢笔网格作为实时预览的页面上......这可以   如果你......意外地创建一个带有JavaScript的笔,那就很有用了   长期奔跑。也许是一个无限循环或一个有这么多循环   迭代它挂起浏览器。“

您还会注意到,几秒钟后您的其他实时预览会冻结。甚至可以在codepen.io主页上观察到这种行为,其中内存密集型预览会在几秒钟后冻结,而某些预览(可能是内存密集程度较低)会继续制作动画。

FWIW看起来预览在冻结时, 显示笔在页面加载时出现的第一帧,恰好是一个空白的白色屏幕。也许是一个很好的妥协,它最初显示许多粒子的静态版本,以便预览有一些东西可以显示。