emoteJAM

emoteJAM is a simple website that generates animated BTTV emotes from static images.

That idea is to apply a well established "meme meta filters" to static emotes. Such as JAM, Hop, etc.

The most important feature of the website is that it's completely client-side and can be easily deployed to something like GitHub Pages. It uses WebGL to animate static images and gif.js to generate actual GIF files inside of your browser.

Official Deployed Instance: https://tsoding.github.io/emoteJAM/

Running Locally

Nothing particularly special is required. Just serve the folder using HTTP server like Python's SimpleHTTPServer:

$ python3 -m http.server 6969
$ iexplore.exe http://localhost:6969/

Building

The whole build is organized so you can just serve the repo via an HTTP server and it just works. This is done to simplify deployment to GitHub pages. We just tell GitHub to service this repo as is. The build artifacts are also commited to the repo. So if you want to simply get the website working you don't even have to build anything. Just serve the repo.

The build is done via the ./build.js script. It is recommended to read it to get an idea on how it works. It is also recommended to check the "scripts" section of ./package.json to get an idea on how it is called from npm run.

Before doing any building make sure you installed all the necessary dependencies:

$ npm install

To build all the artifacts

$ npm run build

Watching

The ./build.js script enables you to Watch the source code:

$ npm run watch

Serving and Watching

$ npm run service

This starts both python3 -m http.server 6969 and Watching at the same time, providing a convenient development environment.

Filter Development

WARNING! Knowledge of WebGL or OpenGL is required to read this section!

Uniforms

| Name | Type | Description | | --- | --- | --- | | time | float | Current time in Seconds (float) since the start of the application. Can be used for animating. | | resolution | vec2 | Resolution of the emote canvas in Pixels. | | emote | sampler2D | The input image as the WebGL texture. | | emoteSize | vec2 | The input image size in pixels. |