Gifs, jams, and shaders

Posted by aeron on Feb. 26, 2013, 3:59 a.m.

Well, I've been (relatively) busy with a few things since my last blurb of a blog. One thing I was meaning to share but never got around to was my gif workflow. I basically copied it from various people online but it works nicely:

1. Extract frames from video using ffmpeg

2. Merge frames and optimize for gif using Gifsicle

It works really well, but requires juggling with the command line options a bit. Originally I wrote a shell script to automate it on my server but it was kinda tedious since I had to edit the script frequently to change specific parameters, in addition to uploading and downloading frequently, etc. So naturally instead of improving the shell script, I rewrote it as a php script with a more convenient web interface.

Feel free to test it out:

http://motherbrain.it.cx/gif/

If you like the results I recommend forking it and setting it up on your own server, it doesn't take long. Just install the dependencies ffmpeg and gifsicle (links on github readme) and you should be good to go. And feel free to make it better, add more options, better css, etc. I'm open to pull requests ;)

Ah where was I. Right, jams (the pun against Jiff was not intended >_>).

Some of you may know Rez and I were working on a game for 64jam, though we didn't finish in time. The idea was to write a game about a psychic who used his powers to defer violence in an apocalyptic future. We had planned a battle system that we pretty quickly realized was beyond our scope, and instead were shooting for a simplified model. It didn't really get fleshed out, we ended up with a solid messaging system and plenty of eye candy but no game. I still want to finish it (I'd hate for the art Rez made to go to waste) but it might turn into something completely different now that it's no longer just a jam game.

So, on another note, during the jam I created a tiny utility to aid in the creation of special effects. The tool simply took a pixel (fragment) shader and rendered it to a series of images to create an animated texture. It also had another mode that just animated the shader in a window, aiding with design. Well, I recently took this program and continued it, adding a GUI and a few convenience features. I plan on adding more (still have to complete rendering options), but for now it's great for designing shaders. And they're instantly ready to be added to your GL game :D

I've personally been using it to experiment with interference patterns (moire) that form due to aliasing. By computing functions that contain complexity on a sub-pixel level, we can abuse the natural chaos caused by slight interference to create bizarre patterns. Combined with subtle transformations, the effects can be very surreal. Most of the examples I included rely heavily on this for their effects.

Anyway, enough yammering. I uploaded it to 64d as an example, you can check it out here if you're interested.

And now I leave you with a little toy:

Source: (the actual toy)

uniform vec2 resolution;
uniform float time;
const float PI = 3.14159265358979323846264;
vec3 hsv(float h,float s,float v) {return mix(vec3(1.),clamp((abs(fract(h+vec3(3.,2.,1.)/3.)*6.-3.)-1.),0.,1.),s)*v;}
void main() {
	vec2 p = ( gl_FragCoord.xy );
	p -= resolution.xy/2;
	float theta = time*PI/520;
	vec2 rp = vec2( p.x*cos(theta)-p.y*sin(theta), p.x*sin(theta)+p.y*cos(theta) );
	float angle = atan(rp.y,rp.x);
	vec2 scale = vec2( (2+cos(theta))*(10+sin(angle*7))/2000. );
	float val = sqrt(length(p*scale)) + time/5200;
	float v = sin((val+time/1100)*PI*23);
	v = v<0 ? v/-4 : v*2/3;
	float v2 = pow(cos(val*PI*23*2),3);
	vec3 col = hsv( val*13, 1, v);
    gl_FragColor = vec4( col, 1.0);
}

Careful with the speed on that one.

Comments

melee-master 11 years, 8 months ago

I like your stylesheet.

Astryl 11 years, 8 months ago

Nice. I was going to make something like that so I could test out my shaders quickly.

aeron 11 years, 8 months ago

Quote:
I like your stylesheet.
Why thank you! Although I'm not sure if you mean my user page or the Gif converter page. Either way,

Quote:
Nice. I was going to make something like that so I could test out my shaders quickly.
Yeah, for me this is a program I always seem to need for one random thing or another. I think I had another crude version on my laptop at one point that I had attempted to make into a screensaver xD. But it was a step up for when I was doing this kind of thing in SDL with software images a thousand times slower :P

JuurianChi 11 years, 8 months ago

Quote:
Ah where was I. Right, jams (the pun against Jiff was not intended >_>).

Too bad, this would have done well in small claims court.

melee-master 11 years, 8 months ago

Quote:
Why thank you! Although I'm not sure if you mean my user page or the Gif converter page. Either way,

It was said with your userpage in mind but I like your gif converter's page a lot as well.

firestormx 11 years, 8 months ago

Oh, nice converter! I have no use for it right now, but there's been moments I've wanted something quick like that.

If it ever happens again, I'll have to fork it.

melee-master 11 years, 8 months ago

Quote:
fork it.

Is it bad I laugh inside every time I see this?

Acid 11 years, 8 months ago

Throw ads on that MakeGif, post it to tumblr, collect the mulah.

firestormx 11 years, 8 months ago

^ That

aeron 11 years, 8 months ago

Melee has a new avatar :O

Ads, why haven't I thought of this before? These kind of utility sites have the potential to get decently popular through social media (a proper makeover wouldn't hurt in that respect) . Although then there's the moral predicament that goes with using adblock whist profiting (or not) from advertisements. I opt to just say fork it, everyone's a hypocrite already can we get over it?