new gif + tributary.anim features = make some gifs!

[Ian Johnson]

Hello tributarians,

EJ has dubbed all tributary users and producers tributarians, so it is. 

We pushed a couple features recently that should make it relatively easy to create gifs by animating your inlets. we are going to write this up and want to show gifs made by yall! (shoutout to @georules who already sent me a couple)

The first part of this is the tributary.anim feature, which allows you to animate any value using d3's interpolators and easing functions (you could also provide your own).

Here is an example: http://tributary.io/inlet/6479585

here is a video explaining it in more depth: http://www.youtube.com/watch?v=lZtX2e58faA

Basically its the same play/loop buttons but now you can selectively animate any piece of your code without rethinking how it works!

The second part is being able to quickly create a GIF with a few mouse clicks. 

video showing how to use it: http://www.youtube.com/watch?v=18kTkZW3MqI

If your gif ends up less than 2MB it gets uploaded to imgur and set as the thumbnail for the inlet. you can always right click and save-as to keep whatever gif you make! tumblr's limits are 500x500px < 1mb and 80 frames.

I also made this short demo video that shows how i made some of the animations

http://www.youtube.com/watch?v=qjbjzIljSm8

most of my recent inlets are gifs/animations if you want samples!

http://tributary.io/e/6094415?user=enjalot

--
Ian Johnson - 周彦

http://enja.org

[theta theta]

One thing that would make writing the GIF easier is if there was a way to configure something like

var tributary.gif_setup = {total_frames: 12};

If there was a 'Auto' button it would take a 12 frame gif, with more dexterity than I possibly could.

[Ian Johnson]

that's a cool idea, sort of like the BV button but it just does it for you.

also someone (bollig) suggested we add the ability to delete frames which makes total sense.

--
You received this message because you are subscribed to the Google Groups "Tributary" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tributary+...@googlegroups.com.
Visit this group at http://groups.google.com/group/tributary.
For more options, visit https://groups.google.com/groups/opt_out.

[Ian Johnson]

I agree that easier is better. Its just about us deciding the use cases /parameters and building the ui. Something like the bv button was but it makes gig frames instead (I removed by button for now)

What are the params?
# of frames
Delay per frame
Loop type (should it go back to start or not) only matters when you have a loop.
If you don't have a loop we need to know how often to take a screencap.
Anything else?

All the gif related features are plugins and will be easy to port to the new tributary.

On Sep 9, 2013 11:46 AM, "EJ Fox" <ej...@ejfox.com> wrote:

I whole-heartedly agree, and I'm actually amazed at the smoothness of the GIFs that Paul got just by doing it by hand. 

I really like the idea of being able to define the total frames, and have it capture it for me. It would also be extremely useful to be able to capture every other frame, or every 3rd frame to cut down on the file size. 

I really think making a gif should be as easy as defining a trib.anim, and hitting the gif button. That makes a lot of sense. The more "advanced" GIF'ing, with the clicking and holding, is more of a power user thing anyway, in my mind.

How transferrable is the gif stuff and trib.anim to the new Tributary.io? 

Cheers,

EJ

-- 
EJ Fox
@mrejfox

[theta theta]

Some way to specify the background color of the gif. For instance:

d3.select("body").style("background-color", d3.rgb(25,25,25))

looks like this: http://tributary.io/inlet/6494605

but the gif looks like this: http://i.imgur.com/WFDCrQi.gif

[Ian Johnson]

for now I recommend doing

svg.append("rect").attr({width:"100%", height:"100%", fill: d3.rgb(25,25,25) });

near the top of your code to get a background rectangle.

also note that you need to inline styles for the canvas renderer to recognize them, so unfortunately it wont apply styles from a style sheet.

it would be cool to build something to inline styles for you but i dont have time for something like that right now http://stackoverflow.com/questions/791070/what-tools-to-automatically-inline-css-style-to-create-email-html-code

--

You received this message because you are subscribed to the Google Groups "Tributary" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tributary+...@googlegroups.com.
Visit this group at http://groups.google.com/group/tributary.
For more options, visit https://groups.google.com/groups/opt_out.

[theta theta]

svg.append("rect").attr({width:"100%", height:"100%", fill: d3.rgb(25,25,25) });

is a fine solution.