Skip to content
Snippets Groups Projects
Commit 1ea29b3c authored by Dj's avatar Dj
Browse files

Working particles implementation.

parent dfcecca3
Branches
No related tags found
No related merge requests found
/*
* Particle.js
*/
//
// Config
//
const Fps = 16
//
// Helper
//
// Variables needed for fps calculation.
const FpsInterval = 1000 / Fps
let Then = Date.now() // Argh.. Global, mutable, variable..!
function randomValue(min, max) {
return (Math.random() * (+max - +min) + +min)
}
//
// Data
//
function Point2D(x, y) {
return { x, y }
}
function MinMax(min, max) {
return { min, max }
}
function MaxValue(value, max) {
return { value, max }
}
function RandomPoint2D(minMaxX, minMaxY) {
const x = randomValue(minMaxX.min, minMaxX.max)
const y = randomValue(minMaxY.min, minMaxY.max)
return Point2D(x, y)
}
function Particle({ position, direction, size, color }) {
return { position, direction, size, color }
}
//
// Transformations | Actions
//
function Update(canvas, particle) {
// Animate the movement of the particle
//
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 updateDirection =
Object.assign({}, particle, {
direction:
Point2D(
(isRightEdge || isLeftEdge)
? particle.direction.x * -1
: particle.direction.x,
(isTopEdge || isBottomEdge)
? particle.direction.y * -1
: particle.direction.y
)
})
const updatePosition =
Object.assign({}, updateDirection, {
position:
Point2D(
updateDirection.position.x + updateDirection.direction.x,
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)
return updatedParticle
}
function Clear(ctx) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
}
function Render(ctx, particles) {
particles.forEach(
function (particle) {
if (particle.size.value > 0) {
const offset = (particle.size.value*0.5)
ctx.fillStyle = particle.color
ctx.fillRect(
particle.position.x - offset,
particle.position.y - offset,
particle.size.value,
particle.size.value
)
}
}
)
}
function Animate(ctx, 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)
})
// Render particles to canvas
const now = Date.now()
const elapsed = now - Then
if (elapsed > FpsInterval) {
Then = now - (elapsed % FpsInterval)
Clear(ctx)
Render(ctx, particles)
}
}
//
// Api
//
function Particles({ canvasId, amount, color, size, lifespan }) {
// 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
// Generate random particles
const particles =
Array.from(
{ length: amount },
() => Particle({
position:
RandomPoint2D(
MinMax(0, (ctx.canvas.width - (size*2))),
MinMax(0, (ctx.canvas.height - (size*2)))
),
direction:
RandomPoint2D(
MinMax(-0.2, 0.2),
MinMax(-0.2, 0.2)
),
size: {
value: randomValue(-size, size),
bound: MinMax(-size, size),
step: size / ((lifespan) / Fps),
direction:
(randomValue(0, 100) < 50)
? -1
: +1
},
color
})
)
Then = Date.now()
Animate(ctx, particles)
}
...@@ -59,8 +59,6 @@ div { ...@@ -59,8 +59,6 @@ div {
* Elements * Elements
*/ */
.vignette { .vignette {
background-image: url("03_Vignette/RC3_vignette.png"); background-image: url("03_Vignette/RC3_vignette.png");
} }
...@@ -92,13 +90,16 @@ div { ...@@ -92,13 +90,16 @@ div {
opacity: 0.5; opacity: 0.5;
} }
.particles {
/* background-color: transparent; */
}
/* /*
* Parallax layer * Parallax layer
*/ */
.z-0 { .z-0 {
transform: translateZ(0.5px) scale(-1.5); transform: translateZ(0.5px) scale(-1.5);
} }
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
<!-- <link rel="stylesheet" href="parallax.css"> --> <!-- <link rel="stylesheet" href="parallax.css"> -->
<link rel="stylesheet" href="template.css"> <link rel="stylesheet" href="template.css">
<!-- <script src="/rellax.min.js"></script> --> <!-- <script src="/rellax.min.js"></script> -->
<script src="particles.js"></script>
</head> </head>
<body> <body>
...@@ -25,6 +26,7 @@ ...@@ -25,6 +26,7 @@
<div class="static full-bg bg-image"></div> <div class="static full-bg bg-image"></div>
<div class="static full-bg vcr-overlay"></div> <div class="static full-bg vcr-overlay"></div>
<div class="static full-bg grid"></div> <div class="static full-bg grid"></div>
<canvas id="particles" class="static full-bg particles"></canvas>
<div class="static full-bg vignette"></div> <div class="static full-bg vignette"></div>
</div> </div>
...@@ -33,8 +35,8 @@ ...@@ -33,8 +35,8 @@
<!-- <div class="parallax bg-image"></div> --> <!-- <div class="parallax bg-image"></div> -->
<div class="layer z-1 scroll-bg gradient"></div> <div class="layer z-1 scroll-bg gradient"></div>
<div class="layer z-0 scroll-bg fg-pixels"></div> <!-- <div class="layer z-0 scroll-bg fg-pixels"></div> -->
<div class="layer z-6 scroll-bg bg-pixels"></div> <!-- <div class="layer z-6 scroll-bg bg-pixels"></div> -->
<div id="content" class="content"> <div id="content" class="content">
<h1>This is a Parallax Scroll Example</h1> <h1>This is a Parallax Scroll Example</h1>
...@@ -79,8 +81,16 @@ ...@@ -79,8 +81,16 @@
</div> </div>
<script>
var bgParticles = {
canvasId: 'particles',
amount: 75,
color: 'white',
size: 7,
lifespan: 4000 // in milliseconds
}
Particles(bgParticles)
</script>
</body> </body>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment