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

Acid 11 years, 9 months ago

There's no shame in filling your pockets, aeron.

Get dat gwop while there's gwop to get got.

Eva unit-01 11 years, 9 months ago

I lol'd at 'gwop'. Classic.

aeron 11 years, 9 months ago

I updated the download to my shader viewer, had to fix the site's game modify function in the process. Since I included the above shader (from the blog) in the updated zip, here's a new piece of eye candy for you to play with as well:

(Might as well show of the gif converter while I'm at it)

Here's the source:

#version 330 
uniform vec2 resolution; uniform float time; out vec4 outColor;
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/10000;
	vec2 mp = vec2(  p.x + cos(theta*3)*128, p.y + sin(theta*8)*128  );
	vec2 rp = vec2( mp.x*cos(theta)-mp.y*sin(theta), mp.x*sin(theta)+mp.y*cos(theta) );
	vec2 scale = vec2((6+cos(theta*3))/310.);
	float dist = sqrt(length(mp*scale*2));
	rp *= dist;
	float val =  dist*-3 + (cos( (rp.x)*scale.x)*cos((rp.y)*scale.y)) + time/600;
	float v = 2./3+sin(val*PI*23)*1./3;
	float x = (1+sin(val*13))/8;
	float y = abs(sin(val*3)/4);
	vec3 col = hsv( val/4, 0.75+x, 0.5+v/2 -y   );
	outColor = vec4( col, 1.0);
}

melee-master 11 years, 9 months ago

Seeexxxaaaayy ladddaaayyyy

firestormx 11 years, 9 months ago

Quote:
had to fix the site's game modify function in the process
lol64digits