Skip to content

Turn a source image into an animated party emoji

License

Notifications You must be signed in to change notification settings

MikeyBurkman/party-party-party

 
 

Repository files navigation

party-party-party

Turn a source image into an animated party emoji!

This smiling emoji is pretty cool:

Smiling Emoji

However, it might be jealous of all those parrots and their parties. Let's help out our emoji friend.

Party Smiling Emoji

Note: If you'd like to create emojis for Slack, make sure your input image is 128x128 (or less) and is max 128kb. Slack is pretty limited.

Usage

  • Images are altered using one or more transformations. These transforms do things such as add colors, rotate the image, etc.
  • Transparency in the source image is used by some transformations to imply "background". (Non-transparent pixels are the "foreground".)
  • Transforms are performed in the order given. Reordering some transforms may yield a different result.
  • All arguments start with --:
    • --src=FILENAME This is the name of source file that you wish to transform
    • --dest=FILENAME This is the name of the gif that will be created
    • All other arguments are transforms
      • Given in the form --<NAME>=<ARG1>,<ARG2>. Some transforms have no arguments, and thus require just --<NAME>. See the examples below for specifics.
      • These transforms are processed in the same order that they appear.

Available transformations


Frame Count

The frame-count transformation is required for most of the following animation transforms. It will control how many frames are in the final image. It takes one parameter: the number of frames.


Basic Party

The party transformation will turn all foreground (non-transparent) pixels multiple colors. This does not take any parameters.

../bin/ppp --src=smile.png --dest=party-smile.gif --frame-count=10 --party

Party Smiling Emoji


Resize

The resize transformation will change the size of the image to the given width,height (in pixels), scaling the image to fit the new dimensions. Note that this transformation does not require the frame-count transform.

../bin/ppp --src=smile.png --dest=big-smile.gif --resize=320,320

Big Smiling Emoji


Resize Background

Similar to resize, the resize-background transform will change the size of the image to the given width,height (in pixels). However, it will only enlarge the dimensions of the image, without scaling anything. All extra space will be transparent. The new dimensions MUST be larger than the orginal. Note that this transformation does not require the frame-count transform.

../bin/ppp --src=smile.png --dest=big-background-smile.gif --resize-background=320,320

Big Background Smiling Emoji


Background Party

The background-party transformation will turn all background (transparent) pixels multiple colors. This does not take any parameters.

../bin/ppp --src=smile.png --dest=background-party-smile.gif --frame-count=10 --background-party

Background Party Smiling Emoji


Rotate

The rotate transformation will cause your image to spin. This optionally takes one argument to indicate the direction of rotation. Can be 1 or -1, defaults to 1.

../bin/ppp --src=smile.png --dest=rotate-smile.gif --frame-count=10 --rotate

Rotate Smile Emoji


Bounce

The bounce transformation will cause your image to move up and down. This takes in one parameter, which is the max height from the center it will bounce.

../bin/ppp --src=smile.png --dest=bounce-smile.gif --frame-count=10 --bounce=8

Bounce Smile Emoji


Shake

The shake transformation will cause your image to move left and right. This takes in one parameter, which is the max width from the center it will shake.

../bin/ppp --src=smile.png --dest=shake-smile.gif --frame-count=10 --shake=8

Shake Smile Emoji


Circle

The circle transformation will cause your image to move in a circle. It requires one parameter, which is the radius of the circle. Note that this may make the image clip with the boundaries.

../bin/ppp --src=smile.png --dest=circle-smile.gif --frame-count=10 --circle=6

Circle Party Smile Emoji


Expand

The expand transformation will cause your image to grow larger and smaller. It takes one parameter, which is the amount of expansion/shrinkage.

../bin/ppp --src=smile.png --dest=expand-smile.gif --frame-count=20 --expand=14

Expand Smile Emoji


Pinwheel

The pinwheel transformation will replace the background with a spinning pinwheel of colors. Without any parameters, it will display spinning rainbow colors. You can also provide 3+ paramaters. The first parameter is the number of repeats you'll see, and the subsequent 2..N parameters are the hex codes for the colors to use.

For instance, parameters pinwheel=3,0xFF0000,0x00FF00,0x0000FF will result in a pinwheel with colors red, green blue, repeated 3 times, for 9 total "slices" in the pinwheel. Note that the number of colors will be truncated if it doesn't divide evenly into the number of frames (to keep the animation smooth).

../bin/ppp --src=smile.png --dest=pinwheel-smile.gif --frame-count=14 --pinwheel

Pinwheel Smile Emoji

Radiance

The radiance transformation will replace the background with a expanding rings of colors. Without any parameters, it will display rainbow colors. You can also provide 3+ paramaters. The first parameter is the number of repeats you'll see, and the subsequent 2..N parameters are the hex codes for the colors to use. (For instance, if you set repeats to 2, then you'll each color in the list repeated a second time, and each color ring will be thinner.)

For instance, parameters radiance=2,0xFF0000,0x00FF00,0x0000FF will result in red, green, and blue rings, repeated twice. (Six rings in all.)

../bin/ppp --src=smile.png --dest=radiance-smile.gif --frame-count=14 --radiance

Radiance Smile Emoji


Static

The static transformation will cause some pixels of your gif be inverse colors, causing a staticy/interference effect. This takes in one number parameter, where the higher it is, the more static A value of 1 means no static. Fractional values are allowed

../bin/ppp --src=smile.png --dest=static-smile.gif --frame-count=10 --static=1.5

Static Smile Emoji


Lightning

The lightning transformation will cause it to look like your gif is in a lightning storm. This takes one optional argument, which is the random seed. Provide any string for the argument to change randomness of the lightning flashes.

../bin/ppp --src=smile.png --dest=lightning-smile.gif --frame-count=10 --lightning=123

Lightning Smile Emoji


Ripple

The ripple transformation will cause it to look like your gif is in liquid. This takes two parameters for amplitude and period. A higher amplitude will cause the horizontal distortion to be more pronounced, while a higher period will cause more ripples.

../bin/ppp --src=smile.png --dest=ripple-smile.gif --frame-count=10 --ripple=10,4

Ripple Smile Emoji


Solid Background

The solid-background transformation will cause all transparent pixels to be instead rendered with the given solid color. The only argument is the color's hex code, in the format 0xRRGGBB

../bin/ppp --src=smile.png --dest=solid-background-smile.gif --solid-background=0x0000FF

Solid Background Smile Emoji


Combining transformations

  • Multiple transformations may be combined by simply adding more to the arguments list.
  • The transformations are applied in order. Because of this, be aware that the ordering of transformations may affect how things look. If things look off, try reordering the transformations.
../bin/ppp --src=smile.png --dest=bounce-party-smile.gif --frame-count=10 --resize=120,120 --bounce=6 --party

Bounce Party Smile Emoji


And if you really just want to go overboard...

../bin/ppp --src=smile.png --dest=everything-smile.gif --resize=240,240 --resize-background=320,320 --frame-count=20 --rotate=-1 --circle=50 --background-party

Everything Smile Emoji

Hints

  • The order of transforms matters. For instance, applying rotate before bounce will have a different effect than applying it after
  • The resize transform will resize every frame in the gif at that point. If you're just working from a static image (like a png), then it's most efficient to do the resize before doing frame-count, so it only has to spend time resizing a single frame, not all of them.
  • The frame-count transform requires a static image (something with no animation), and will duplicate that image N times. It should always be called before any animation transforms, such as party or rotate, or they will not be animated.
  • All animation transforms are based around the number of frames set with frame-count, in order to make looping seamless.
    • For instance, with the rotate transform, the image will always be completely upside down when halfway through the frame count.
    • Increasing the number of frames will slow down the animation, but be aware that this will also increase the file size. (For instance, if you increase the frame count from 10 to 20, then the animations will take twice as long to complete.)

About

Turn a source image into an animated party emoji

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 99.8%
  • JavaScript 0.2%