<commit_before><!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Moving Pictures - Animated GIFs in Linux">
    <meta name="author" content="theJoeBlankenship">

    <title>theJoeBlankenship</title>

    <link rel="icon" type="image/ico" href="../../img/favicon.ico">

    <!-- Bootstrap Core CSS -->
    <link href="../../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Theme CSS -->
    <link href="../../css/clean-blog.min.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="../../index.html">theJoeBlankenship</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="../../news.html">News</a>
                    </li>
                    <li>
                        <a href="../../research.html">Research</a>
                    </li>
                    <li>
                        <a href="../../about.html">About</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Header -->
    <!-- Set your background image for this header on the line below. -->
    <header class="intro-header" style="background-image: url('img/animated_gif.jpg')">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="post-heading">
                        <h1>Moving Pictures</h1>
                        <h2 class="subheading">Animated GIFs in Linux</h2>
                        <span class="meta">Posted by <a href="../../about.html"><NAME></a> on October 21, 2018</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Post Content -->
    <article>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">

                    <p>This is a quickie blog as I'm currently slammed with work. However, I should have a nice write-up from my Python Immersion Course in November. :)</p>

                    <h2 class="section-heading">Making Pictures Move</h2>
                    <p>I recently delivered a reveal.js-based presentation at the NACIS annual conference. I love the simplicity of this form of presentation, but it is not without some challenges. I have had issues with embedding large or complicated, interactive content from other websites and I fully expect this to be the case given the static nature of these websites. So in order to maintain a minimalist approach to my slides, but to have some sort of activity I decided to sample the content using animated gifs.</p>

                    <p>There are several programs that can generate animated gifs, but not many on Linux. This is where my journey began.</p>

                    <p>After a little searching, I found references to a library named ffmpeg which allows me to convert videos into animated gifs. This process was more simple than I thought it would be.</p>

                    <h2 class="section-heading">Generating Animated GIFs</h2>
                    <p>First we have to make sure ffmeg is installed on your system:</p>

                    <pre>
ffmpeg -version
</pre>
                    <p>You should see an output that states the current installed version. If not, then install ffmpeg:</p>

                    <pre>
sudo apt-get install -y ffmpeg
</pre>
                    <p>Once you’ve install ffmpeg, run the version check again to verify the install.</p>

                    <p>We are now ready to convert some videos. I use RecordMyDesktop to make videos which outputs an ogv file. Once you have a functional ogv file, we can convert it to an mp4 video file:</p>

                    <pre>
ffmpeg -i output.ogv -f mp4 output.mp4
</pre>
                    <p>Our input is the ogv file, the file type is mp4, and then we name our output file. We are now ready to generate an animated gif. However, before we do this, we have the ability to generate a HD gif by using a sampled color palette:</p>

                    <pre>
ffmpeg -y -i output.mp4 -vf fps=10,scale=800:-1:flags=lanczos,palettegen palette.png
</pre>
                    <p>We identify the mp4 file we just generated, define the frames per second, define the scale of the video frames, and pass information to generated the palette file in png format.</p>

                    <p>Once a palette image is generated, we are now ready to create a HD animated gif:</p>

                    <pre>
ffmpeg -i output.mp4 -i palette.png -filter_complex "fps=10,scale=800:-1:flags=lanczos[x];[x][1:v]paletteuse" output.gif
</pre>
                    <p>We once again call our mp4 file along with the palette file, define the formatting variables, and name our final animated gif.</p>

                    <p>In the end, you should end up with a gif that resembles your original video.</p>

                    <img class="img-responsive center-block" src="img/bitnodes.gif" alt="Oops!">

                    <p>This work is licensed under a <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.</a></p>

                </div>
            </div>
        </div>
    </article>
<commit_msg>update content in animated gif blog<commit_after><!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Moving Pictures - Animated GIFs in Linux">
    <meta name="author" content="theJoeBlankenship">

    <title>theJoeBlankenship</title>

    <link rel="icon" type="image/ico" href="../../img/favicon.ico">

    <!-- Bootstrap Core CSS -->
    <link href="../../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Theme CSS -->
    <link href="../../css/clean-blog.min.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="../../index.html">theJoeBlankenship</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="../../news.html">News</a>
                    </li>
                    <li>
                        <a href="../../research.html">Research</a>
                    </li>
                    <li>
                        <a href="../../about.html">About</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Header -->
    <!-- Set your background image for this header on the line below. -->
    <header class="intro-header" style="background-image: url('img/animated_gif.jpg')">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="post-heading">
                        <h1>Moving Pictures</h1>
                        <h2 class="subheading">Animated GIFs in Linux</h2>
                        <span class="meta">Posted by <a href="../../about.html"><NAME></a> on October 21, 2018</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Post Content -->
    <article>
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">

                    <p>This is a quickie blog as I'm currently slammed with work. However, I should have a nice write-up from my Python Immersion Course in November. :)</p>

                    <h2 class="section-heading">Making Pictures Move</h2>
                    <p>I recently delivered a reveal.js-based presentation at the NACIS 2018 annual meeting. I love the simplicity of this presentation format, but it is not without some challenges. I have had issues with embedding large or complicated, interactive content from other websites and I fully expect this to be the case given the static nature of reveal.js static pages. So in order to maintain a minimalist approach to my slides, but to have some sort of activity, I decided to sample the content using animated gifs.</p>

                    <p>There are several programs that can generate animated gifs, but not many on Linux. This is where my journey began.</p>

                    <p>After a little searching, I found references to a library named <code>ffmpeg</code> which allows me to convert videos into animated gifs. This process was much simpler than I thought it would be.</p>

                    <h2 class="section-heading">Generating Animated GIFs</h2>
                    <p>First we have to make sure <code>ffmpeg</code> is installed on your system:</p>

                    <pre>
ffmpeg -version
</pre>
                    <p>You should see an output that states the current installed version. If not, then install <code>ffmpeg</code>:</p>

                    <pre>
sudo apt-get install -y ffmpeg
</pre>
                    <p>Once you’ve install <code>ffmpeg</code>, run the version check again to verify the install.</p>

                    <p>We are now ready to convert some videos. I use RecordMyDesktop to make videos which outputs an ogv file. Once you have a functional ogv file, we can convert it to an mp4 video file:</p>

                    <pre>
ffmpeg -i output.ogv -f mp4 output.mp4
</pre>
                    <p>Our input is the ogv file, the file type is mp4, and then we name our output file. We are now ready to generate an animated gif. However, before we do this, we have the ability to generate a HD gif by using a sampled color palette:</p>

                    <pre>
ffmpeg -y -i output.mp4 -vf fps=10,scale=800:-1:flags=lanczos,palettegen palette.png
</pre>
                    <p>We identify the mp4 file we just generated, define the frames per second, define the scale of the video frames, and pass information to generate the palette file in png format.</p>

                    <p>Once a palette image is generated, we are now ready to create a HD animated gif:</p>

                    <pre>
ffmpeg -i output.mp4 -i palette.png -filter_complex "fps=10,scale=800:-1:flags=lanczos[x];[x][1:v]paletteuse" output.gif
</pre>
                    <p>We once again call our mp4 file along with the palette file, define the formatting variables, and name our final animated gif.</p>

                    <p>In the end, you should end up with a gif that resembles your original video.</p>

                    <img class="img-responsive center-block" src="img/bitnodes.gif" alt="Oops!">

                    <p>This work is licensed under a <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.</a></p>

                </div>
            </div>
        </div>
    </article>

{'fraction_non_alphanumeric': 0.13179319462807043, 'fraction_numerical': 0.015169438452438939, 'mean_word_length': 2.0920826161790016, 'pattern_counts': {'":': 0, '<': 289, '<?xml version=': 0, '>': 289, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1769029', 'n_tokens_mistral': 4260, 'n_tokens_neox': 3903, 'n_words': 1326}