diff --git a/README.md b/README.md index 6b2c132..a20cf54 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,7 @@ The `confetti` parameter is a single optional `options` object, which has the fo - `decay` _Number (default: 0.9)_: How quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise the confetti will gain speed. Better yet, just never change it. - `gravity` _Number (default: 1)_: How quickly the particles are pulled down. 1 is full gravity, 0.5 is half gravity, etc., but there are no limits. You can even make particles go up if you'd like. - `drift` _Number (default: 0)_: How much to the side the confetti will drift. The default is 0, meaning that they will fall straight down. Use a negative number for left and positive number for right. +- `flat` _Boolean (default: false)_: Optionally turns off the tilt and wobble that three dimensional confetti would have in the real world. Yeah, they look a little sad, but y'all asked for them, so don't blame me. - `ticks` _Number (default: 200)_: How many times the confetti will move. This is abstract... but play with it if the confetti disappear too quickly for you. - `origin` _Object_: Where to start firing confetti from. Feel free to launch off-screen if you'd like. - `origin.x` _Number (default: 0.5)_: The `x` position on the page, with `0` being the left edge and `1` being the right edge. diff --git a/src/confetti.js b/src/confetti.js index aa6d2c8..9d0c9d4 100644 --- a/src/confetti.js +++ b/src/confetti.js @@ -307,21 +307,34 @@ wobbleY: 0, gravity: opts.gravity * 3, ovalScalar: 0.6, - scalar: opts.scalar + scalar: opts.scalar, + flat: opts.flat }; } function updateFetti(context, fetti) { fetti.x += Math.cos(fetti.angle2D) * fetti.velocity + fetti.drift; fetti.y += Math.sin(fetti.angle2D) * fetti.velocity + fetti.gravity; - fetti.wobble += fetti.wobbleSpeed; fetti.velocity *= fetti.decay; - fetti.tiltAngle += fetti.tiltAngleSpeed; - fetti.tiltSin = Math.sin(fetti.tiltAngle); - fetti.tiltCos = Math.cos(fetti.tiltAngle); - fetti.random = Math.random() + 2; - fetti.wobbleX = fetti.x + ((10 * fetti.scalar) * Math.cos(fetti.wobble)); - fetti.wobbleY = fetti.y + ((10 * fetti.scalar) * Math.sin(fetti.wobble)); + + if (fetti.flat) { + fetti.wobble = 0; + fetti.wobbleX = fetti.x + (10 * fetti.scalar); + fetti.wobbleY = fetti.y + (10 * fetti.scalar); + + fetti.tiltSin = 0; + fetti.tiltCos = 0; + fetti.random = 1; + } else { + fetti.wobble += fetti.wobbleSpeed; + fetti.wobbleX = fetti.x + ((10 * fetti.scalar) * Math.cos(fetti.wobble)); + fetti.wobbleY = fetti.y + ((10 * fetti.scalar) * Math.sin(fetti.wobble)); + + fetti.tiltAngle += 0.1; + fetti.tiltSin = Math.sin(fetti.tiltAngle); + fetti.tiltCos = Math.cos(fetti.tiltAngle); + fetti.random = Math.random() + 2; + } var progress = (fetti.tick++) / fetti.totalTicks; @@ -470,6 +483,7 @@ var ticks = prop(options, 'ticks', Number); var shapes = prop(options, 'shapes'); var scalar = prop(options, 'scalar'); + var flat = !!prop(options, 'flat'); var origin = getOrigin(options); var temp = particleCount; @@ -492,7 +506,8 @@ decay: decay, gravity: gravity, drift: drift, - scalar: scalar + scalar: scalar, + flat: flat }) ); } diff --git a/test/index.test.js b/test/index.test.js index 1cd5dbb..fd3ea6c 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -409,6 +409,24 @@ test('shoots confetti to the right', async t => { t.deepEqual(pixels.left, ['#ffffff']); }); +test('shoots flat confetti', async t => { + const page = t.context.page = await fixturePage(); + + // these parameters should create an image + // that is the same every time + t.context.buffer = await confettiImage(page, { + startVelocity: 0, + gravity: 0, + scalar: 20, + flat: 1, + shapes: ['circle'], + colors: ['ff0000'] + }); + t.context.image = await readImage(t.context.buffer); + + t.is(t.context.image.hash(), '8E0802208w0'); +}); + /* * Operational tests */