Yellow artifacts when rendering gifs

[bensapirstein]

I'm trying to render a gif and it has yellow artifacts, any idea how to fix this?

from coldtype import *
from coldtype.fx.skia import phototype

fnt_ar = Font("Wasim/sources/Wasim-Ar.ufo")
fnt_hb = Font("Wasim/sources/Wasim-Heb.ufo")

fnt = Font.Fontmake("Wasim/Wasim.designspace")

txt = 'ابن\n\n\n\n\n\n\n\n\nآدم'
size = 40
secs = 2
def unclose(p:P):
    p._val.value = [p if p[0] != "closePath" else ('endPath', ()) for p in p._val.value ]
    p.endPath()
    return p

@animation(timeline=Timeline(30*secs, 30), bg=bw(1), watch=[fnt_ar.path, fnt_hb.path])
def BenAdam(f):
    return (StSt(txt, fnt, size*10, wght=f.e("qeio"))
        .xalign(f.a.r, "E")
        .mapv(unclose)
        .explode()
        .fssw(-1, 0, 1)
        .outline(0.5)
        .castshadow(40, size)
        .align(f.a.r, tx=0)
        .f(1)
        .ch(phototype(f.a.r, blur=3, cut=90, cutw=30, fill=bw(0)))
        )

release = BenAdam.export("gif")

[stenson]

I'd recommend using installing and using gifski — there are some built-in utilities for that, so you can do something like this instead of declaring a release function as above:

@animation(timeline=Timeline(30*secs, 30), bg=bw(1), watch=[fnt_ar.path, fnt_hb.path], release=lambda x: x.gifski())

[Mark2Mark]

Great! How can this gif be customized? can one pass in parameters into the gifski()?
For example I’d like to limit the color palette to get it smaller, or something like that?

[stenson]

I don't think gifski has color palette customization, though it's not too hard to write a custom gifski wrapper, here's an example that sets the lossy-quality:

from coldtype import *

@animation((1080, 300), tl=60)
def scratch(f):
    return (P().rect(f.a.r)
        .f(Gradient.Vertical(f.a.r, hsl(0.3, 1), hsl(0.9, 1)))
        .up()
        .append(Glyphwise("COLDTYPE", lambda x: Style(Font.ColdObvi(), 230
            , wght=1
            , wdth=f.adj(x.i*20).e("seio", 2)))
            .align(f.a.r)
            .f(1)
            .blendmode(BlendMode.Overlay)))

@animation((1080, 300), tl=60)
def scratch2(f):
    return (P().rect(f.a.r)
        .f(Gradient.Vertical(f.a.r, hsl(0.7, 1), hsl(0.1, 1)))
        .up()
        .append(Glyphwise("CDELOPTY", lambda x: Style(Font.ColdObvi(), 230
            , wght=1
            , wdth=f.adj(x.i*20).e("seio", 2)))
            .align(f.a.r)
            .f(1)
            .blendmode(BlendMode.Overlay)))

def release(passes):
    from coldtype.osutil import show_in_finder
    from subprocess import run

    animations = set([p.render for p in passes])

    for a in animations:
        root = a.pass_path(f"%4d.{a.fmt}").parent.parent
        gif = root / (a.name + ".gif")
        run([
            "gifski",
            "--fps", str(a.timeline.fps),
            "--width", str(a.rect.w),
            "--lossy-quality", "1",
            "-o", gif,
            *[p.output_path for p in passes if p.render == a]])
        print("\n")
        
        show_in_finder(gif.parent)

Personally I'd do the color palette manipulation in photoshop's save for web once you've got the gifski-made gif, but I'm sure the same technique could be used to call any gif-making CLI tool

[Mark2Mark]

Thank you!

I will give that a shot. Looks good here. Now I need to use this instead of the release= in the animation parameter. I can get smaller file sizes with "--quality", "30" (instead of --loss-quality). That works great.

Limiting the color palette was just an example from the top of my head, I am trying to reduce the file size in any feasible manner. And oh my do I not want to use Photoshop 😆 (I don’t even have that anymore)

[Mark2Mark]

I could also use mp4 videos instead, but I still have this color problem where all colors look pale. The gifs and the viewer show the colors just well.