diff --git a/src/parallax-css-testpage/particles.js b/src/parallax-css-testpage/particles.js index f28b9911a7d68bc25a6ed57f7253f43e9334b8d2..045771715faa43838f925a2ea3b0f1e765b4eca7 100644 --- a/src/parallax-css-testpage/particles.js +++ b/src/parallax-css-testpage/particles.js @@ -77,28 +77,32 @@ function Particle({ position, direction, size, color }) { function Update(scene, particle) { - // Cache object access - var width = scene.width + // Cache object access -> Performance + var width = scene.width var height = scene.height + var color = particle.color var particleSize = particle.size var particleSizeValue = particleSize.value var particleSizeBound = particleSize.bound - var particleSizeStep = particleSize.step - var particlePosition = particle.position - var particlePositionX = particlePosition.x - var particlePositionY = particlePosition.y - var particleDirection = particle.direction + var particleSizeBoundMin = particleSizeBound.min + var particleSizeBoundMax = particleSizeBound.max + var particleSizeStep = particleSize.step + var particleSizeDirection = particleSize.direction + var particlePosition = particle.position + var particlePositionX = particlePosition.x + var particlePositionY = particlePosition.y + var particleDirection = particle.direction var particleDirectionX = particleDirection.x var particleDirectionY = particleDirection.y // Animate the pulse effect of the particle // - var isMaxSize = particleSizeValue >= particleSizeBound.max - var isMinSize = particleSizeValue <= particleSizeBound.min + var isMaxSize = particleSizeValue > particleSizeBoundMax + var isMinSize = particleSizeValue < particleSizeBoundMin var sizeDirection = (isMaxSize || isMinSize) - ? particleSize.direction * -1 - : particleSize.direction + ? -particleSizeDirection + : particleSizeDirection var sizeValue = particleSizeValue + particleSizeStep * sizeDirection @@ -110,10 +114,10 @@ function Update(scene, particle) { var left = particlePositionX - sizeOffset var right = particlePositionX + sizeOffset - var isRightEdge = (left > width) - var isLeftEdge = (right < 0) - var isTopEdge = (bottom < 0) - var isBottomEdge = (top > height) + var isRightEdge = (left > (width+1)) + var isLeftEdge = (right < -1) + var isTopEdge = (bottom < -1) + var isBottomEdge = (top > (height+1)) var positionX = (isRightEdge) @@ -121,49 +125,52 @@ function Update(scene, particle) { : (isLeftEdge) ? width + sizeOffset : particlePositionX + particleDirectionX - var positionY = (isBottomEdge) ? -sizeOffset : (isTopEdge) ? height + sizeOffset : particlePositionY + particleDirectionY - - return Particle({ + return { position: { x: positionX, y: positionY, }, - direction: { - x: particleDirectionX, - y: particleDirectionY, - }, + direction: particleDirection, size: { value: sizeValue, bound: particleSizeBound, - step: particleSizeStep, + step: particleSizeStep, direction: sizeDirection }, - color: particle.color - }) + color: color + } } function Draw(scene, particle) { // Cache object access - var size = particle.size.value - var position = particle.position + var particlePosition = particle.position + var particlePositionX = particlePosition.x + var particlePositionY = particlePosition.y - // Draw calculations + // Draw calculations -- var yOffset = scene.yOffset * scene.depthScale + var size = particle.size.value var drawOffset = size * 0.5 - var y = yOffset + (position.y - drawOffset) + var x = particlePositionX - drawOffset + var y = yOffset + (particlePositionY - drawOffset) + var ctx = scene.ctx - var isVisible = (size > 0) && (y < window.innerHeight) && (y > 0) + // var isVisible = (size > 0 && y < window.innerHeight && y > 0) + var isVisible = (size > 0) // Draw if (isVisible) { ctx.fillStyle = particle.color - ctx.fillRect(position.x - drawOffset, y, size, size) + // Round to full integer to prevent subpixel rendering + // - The ~~ operator is equivalent to Math.trunc() but faster. + // ctx.fillRect(~~x, ~~y, size, size) + ctx.fillRect(x, y, size, size) } } @@ -201,7 +208,7 @@ function Animate(scene, particles) { }) // Function to animate the next frame - return function () { + return function nextFrame() { return Animate( scene, updatedParticles @@ -290,7 +297,7 @@ function Particles(configs) { function animate(rendererList) { if (isRunning) { - rafId = requestAnimationFrame(function () { + rafId = requestAnimationFrame(function doRaf() { animate( rendererList.map(function doRender(render) { return render() @@ -326,7 +333,7 @@ function Particles(configs) { init: init, run: run, stop: stop, - onScreenSizeChange: function () { + onScreenSizeChange: function onResize() { stop() if (!throttled) { throttled = true