Code Monkey home page Code Monkey logo

emotejam's Introduction

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.

emotejam's People

Contributors

rexim avatar coppercasted avatar ciremun avatar bit69tream avatar kolumb avatar topkekham avatar tulioabreu avatar adasium avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.