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中的预览时,它会显示空白预览吗?我的其他笔看起来很好,只是这个没有正确显示。
这是为什么?什么行代码会导致这种情况?
答案 0 :(得分:1)
此帮助文章可能适用:Turn Off JavaScript in Previews
“在任何显示钢笔网格作为实时预览的页面上......这可以 如果你......意外地创建一个带有JavaScript的笔,那就很有用了 长期奔跑。也许是一个无限循环或一个有这么多循环 迭代它挂起浏览器。“
您还会注意到,几秒钟后您的其他实时预览会冻结。甚至可以在codepen.io主页上观察到这种行为,其中内存密集型预览会在几秒钟后冻结,而某些预览(可能是内存密集程度较低)会继续制作动画。
FWIW看起来预览在冻结时, 显示笔在页面加载时出现的第一帧,恰好是一个空白的白色屏幕。也许是一个很好的妥协,它最初显示许多粒子的静态版本,以便预览有一些东西可以显示。