Giter Club home page Giter Club logo

Comments (5)

aketawi avatar aketawi commented on July 19, 2024 2

+1 for this idea. Perhaps just having several emotes, so yentPepoGun yentBlobGun would merge these two into one image (or gif if one or several of those was animated)
Would probably be a pain to implement this, but hey, the rest of the plugin is already glorious

from betterdiscord-emotereplacer.

Mattwmaster58 avatar Mattwmaster58 commented on July 19, 2024

I think I could add this with some good ole canvas image composition.

Working with images on the canvas isn't that bad for static images IMO. For gifs, it should be technically possible (anything is ;)), but to do it all in JS, performantly, would be a huge pain, for example, stringing them together in a way that they all appear coherently. If gif A has 41 frames forming one perfect loop, and gif B has 55 frames forming a perfect loop, and gif C has 13 frames forming a perfect loop, you'll need 29,315 frames to loop it all perfectly in a perfect gif. And of course there's heuristics you could take to try and cut the gif at less destructive points, but it would be complicated and janky to do this the "right" way, no matter how you define "right" IMO.

I was able to put this together: https://jsfiddle.net/m28djz1c/. Obviously extremely jank (images aren't sorted, aren't split up etc), but that's the nature of a PoC.

Is anyone able to test at what point emotes starting wrapping on small screens? I'd want to stay as close to a native experience as possible. I think some simple logic to split up the images into eg, chunks of 3 so that they render semi-nicely on mobile would be nice.

from betterdiscord-emotereplacer.

Yentis avatar Yentis commented on July 19, 2024

I think something like Rust and compiling to WASM for performance might be an option, no idea if that will work with a BD plugin as I haven't tested it but yeah trying to manipulate gifs decently is a large pain.
FYI gif processing happens here: https://github.com/Yentis/betterdiscord-emotereplacer/blob/master/src/services/gifsicleService.ts

from betterdiscord-emotereplacer.

Mattwmaster58 avatar Mattwmaster58 commented on July 19, 2024

Hmm, come to think of it, as gifs are generally small already, you may be able to line them up like I described earlier, and then maybe do min(lcm(...framerates), maxframerate*2) frames, then interpolate the gifs with less frames for the other GIFs.

from betterdiscord-emotereplacer.

Mattwmaster58 avatar Mattwmaster58 commented on July 19, 2024

This is definitely possible with static images, but I think it would be a little trickier to do robustly. I might try my hand at doing it in a simpler plugin first

from betterdiscord-emotereplacer.

Related Issues (20)

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.