diff --git a/src/parallax-css-testpage/particles.js b/src/parallax-css-testpage/particles.js index e9db1870a7bba9b80fda53483daa20d453ffe6ad..b7dd7f68ba67ceb5f94eec0b11b0d439477eccc2 100644 --- a/src/parallax-css-testpage/particles.js +++ b/src/parallax-css-testpage/particles.js @@ -1,29 +1,27 @@ /* - * Particle.js + * Particles.js */ -// -// Config -// - - -const Fps = 16 - - // // Helper // // Variables needed for fps calculation. -const FpsInterval = 1000 / Fps -let Then = Date.now() // Argh.. Global, mutable, variable..! +let Then = Date.now() // Argh.. Global, mutable, variable..! function randomValue(min, max) { return (Math.random() * (+max - +min) + +min) } +function initCanvas(id) { + const canvas = document.getElementById(id) + const ctx = canvas.getContext('2d') + ctx.canvas.width = window.innerWidth + ctx.canvas.height = window.innerHeight + return ctx +} // @@ -31,7 +29,6 @@ function randomValue(min, max) { // - function Point2D(x, y) { return { x, y } } @@ -55,33 +52,57 @@ function Particle({ position, direction, size, color }) { } - // // Transformations | Actions // - function Update(canvas, particle) { - // Animate the movement of the particle + // Animate the pulse effect of the particle // - const isRightEdge = + const isMaxSize = particle.size.value >= particle.size.bound.max + const isMinSize = particle.size.value <= particle.size.bound.min + const updateSizeStep = + Object.assign({}, particle, { + size: Object.assign({}, particle.size, { + direction: + (isMaxSize || isMinSize) + ? particle.size.direction * -1 + : particle.size.direction + }) + }) + const updateSize = + Object.assign({}, updateSizeStep, { + size: Object.assign({}, updateSizeStep.size, { + value: + // Todo: Animate puls effect with the help of Math.sin() + updateSizeStep.size.value + updateSizeStep.size.step * updateSizeStep.size.direction, + }) + }) + + // Animate the movement of the particle + // + const sizeOffset = particle.size.value * 0.5 + const xCenter = particle.position.x - sizeOffset + const yCenter = particle.position.y - sizeOffset + const isRightEdge = (particle.position.x + particle.size.value >= canvas.width) const isLeftEdge = (particle.position.x <= 0) - const isBottomEdge = - (particle.position.y + particle.size.value >= canvas.height) - const isTopEdge = (particle.position.y <= 0) + const isTopEdge = (yCenter <= 0) + const isBottomEdge = (yCenter >= canvas.height) + const scrollOffset = window.pageYOffset const updateDirection = - Object.assign({}, particle, { + Object.assign({}, updateSize, { direction: Point2D( (isRightEdge || isLeftEdge) - ? particle.direction.x * -1 - : particle.direction.x, - (isTopEdge || isBottomEdge) - ? particle.direction.y * -1 - : particle.direction.y + ? updateSize.direction.x * -1 + : updateSize.direction.x, + // (isTopEdge || isBottomEdge) + // ? particle.direction.y * -1 + // : particle.direction.y + updateSize.direction.y ) }) const updatePosition = @@ -89,33 +110,16 @@ function Update(canvas, particle) { position: Point2D( updateDirection.position.x + updateDirection.direction.x, - updateDirection.position.y + updateDirection.direction.y, + (isTopEdge) + ? (canvas.height - 1) + updateDirection.direction.y + : (isBottomEdge) + ? sizeOffset + 1 + : updateDirection.position.y + updateDirection.direction.y, ) }) - // Animate the pulse effect of the particle - // - const isMaxSize = updatePosition.size.value >= updatePosition.size.bound.max - const isMinSize = updatePosition.size.value <= updatePosition.size.bound.min - const updateSizeStep = - Object.assign({}, updatePosition, { - size: Object.assign({}, updatePosition.size, { - direction: - (isMaxSize || isMinSize) - ? updatePosition.size.direction * -1 - : updatePosition.size.direction - }) - }) - const updateSize = - Object.assign({}, updateSizeStep, { - size: Object.assign({}, updateSizeStep.size, { - value: - // Todo: Animate puls effect with the help of Math.sin() - updateSizeStep.size.value + updateSizeStep.size.step * updateSizeStep.size.direction, - }) - }) - - const updatedParticle = Particle(updateSize) + + const updatedParticle = Particle(updatePosition) return updatedParticle } @@ -140,44 +144,44 @@ function Render(ctx, particles) { ) } -function Animate(ctx, particles) { - // Update particle positions and register for the next - // frame to render. +function Animate(ctx, fpsInterval, particles) { + // Update particle positions and register for the next frame + // to render. requestAnimationFrame(() => { const updatedParticles = particles.map(function (p) { return Update(ctx.canvas, p) }) - Animate(ctx, updatedParticles) + Animate(ctx, fpsInterval, updatedParticles) }) - // Render particles to canvas const now = Date.now() const elapsed = now - Then - if (elapsed > FpsInterval) { - Then = now - (elapsed % FpsInterval) + if (elapsed > fpsInterval) { + Then = now - (elapsed % fpsInterval) Clear(ctx) Render(ctx, particles) } } - // // Api // - -function Particles({ canvasId, amount, color, size, lifespan }) { +function Particles({ canvasId, fps, amount, color, size, lifespan, speed }) { // Init the canvas for rendering. - const canvas = document.getElementById(canvasId) - const ctx = canvas.getContext('2d') - ctx.canvas.width = window.innerWidth - ctx.canvas.height = window.innerHeight + // + const ctx = initCanvas(canvasId) + if (!ctx) { + console.error("Particles: Can't find Canvas ", canvasId) + return + } - // Generate random particles + // Generate some particles + // const particles = Array.from( { length: amount }, @@ -189,24 +193,27 @@ function Particles({ canvasId, amount, color, size, lifespan }) { ), direction: RandomPoint2D( - MinMax(-0.2, 0.2), - MinMax(-0.2, 0.2) + MinMax(-speed, speed), + MinMax(-speed, speed) ), size: { value: randomValue(-size, size), bound: MinMax(-size, size), - step: size / ((lifespan) / Fps), + step: size / ((lifespan) / fps), direction: (randomValue(0, 100) < 50) ? -1 - : +1 + : +1, }, color }) ) + // Prepare Animation and animate + const fpsInterval = 1000 / fps Then = Date.now() - Animate(ctx, particles) + Animate(ctx, fpsInterval, particles) + return } diff --git a/src/parallax-css-testpage/template.html b/src/parallax-css-testpage/template.html index c0a11ab14a9b02d5d67231a5850487e7be4c18b9..07d3ad9bf235f05d0f72908db02a038de24c92ba 100644 --- a/src/parallax-css-testpage/template.html +++ b/src/parallax-css-testpage/template.html @@ -26,8 +26,9 @@ <div class="static full-bg bg-image"></div> <div class="static full-bg vcr-overlay"></div> <div class="static full-bg grid"></div> - <canvas id="particles" class="static full-bg particles"></canvas> + <canvas id="bg-particles" class="static full-bg particles"></canvas> <div class="static full-bg vignette"></div> + <canvas id="fg-particles" class="static full-bg particles"></canvas> </div> <div class="perspective overflow"> @@ -39,7 +40,7 @@ <!-- <div class="layer z-6 scroll-bg bg-pixels"></div> --> <div id="content" class="content"> - <h1>This is a Parallax Scroll Example</h1> + <h1 id='scrollAnchor'>This is a Parallax Scroll Example</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> @@ -76,20 +77,34 @@ <p>Paragraph 5</p> </div> - </div> </div> <script> var bgParticles = { - canvasId: 'particles', - amount: 75, + canvasId: 'bg-particles', + fps: 14, + amount: 100, color: 'white', - size: 7, + size: 5, + speed: 0.2, + depth: -8, lifespan: 4000 // in milliseconds } Particles(bgParticles) + + var fgParticles = { + canvasId: 'fg-particles', + fps: 20, + amount: 20, + color: 'white', + size: 30, + speed: 0.5, + depth: 2, + lifespan: 4000 // in milliseconds + } + Particles(fgParticles) </script> </body>