Merge pull request #286 from amiaopensource/life

adds game of life to test files

css/css.css

@@ -44,6 +44,9 @@ html, body {
     "content"
     "footer";
   }
+  code {
+    word-break: break-all;
+  }
 }
 
 @media only screen and (min-width: 1000px) {
@@ -118,8 +121,8 @@ code {
   color: #c7254e;
   background-color: #f9f2f4;
   border-radius: 4px;
-  word-break: break-all;
   word-wrap: break-word;
+  max-width: 800px;
   white-space: normal;
   display: inline-block;
 }

index.html

@@ -83,6 +83,20 @@
       </div>
       <!-- End Basic structure of an FFmpeg command -->
 
+      <!-- Streaming vs. Saving -->
+      <label class="recipe" for="streaming-saving">Streaming vs. Saving</label>
+      <input type="checkbox" id="streaming-saving">
+      <div class="hiding">
+        <h3>Streaming vs. Saving</h3>
+        <p>FFplay allows you to stream created video and FFmpeg allows you to save video.</p>
+        <p>The following command creates and saves a 10-second video of SMPTE bars:</p>
+        <code>ffmpeg -f lavfi -i smptebars=size=640x480 -t 5 output_file</code>
+        <p>This command plays and streams SMPTE bars but does not save them on the computer:</p>
+        <code>ffplay -f lavfi smptebars=size=640x480</code>
+        <p>The main difference is small but significant: the <code>-i</code> flag is required for FFmpeg but not required for FFplay. Additionally, the FFmpeg script needs to have <code>-t 5</code> and <code>output.mkv</code> added to specify the length of time to record and the place to save the video.</p>
+        <p class="link"></p>
+      </div>
+      <!-- End Streaming vs. Saving -->
     </div>
     <div class="well">
     <h2 id="concepts">Learn about more advanced FFmpeg concepts</h2>
@@ -1417,7 +1431,7 @@
         <dt>"</dt><dd>quotation mark to start the lavfi filtergraph</dd>
         <dt>movie='<i>input.mp4</i>'</dt><dd>declares video file source to apply filter</dd>
         <dt>,</dt><dd>comma signifies closing of video source assertion and ready for filter assertion</dd>
-        <dt>signalstats=out=brng:</dt><dd>tells ffplay to use the signalstats command, output the data, use the brng filter</dd>
+        <dt>signalstats=out=brng</dt><dd>tells ffplay to use the signalstats command, output the data, use the brng filter</dd>
         <dt>:</dt><dd>indicates there’s another parameter coming</dd>
         <dt>color=cyan[out]</dt><dd>sets the color of out-of-range pixels to cyan</dd>
         <dt>"</dt><dd>quotation mark to end the lavfi filtergraph</dd>
@@ -1501,7 +1515,7 @@
         <dt>-show_data</dt><dd>adds a short “hexdump” to show_streams command output</dd>
         <dt>-print_format</dt><dd>Set the output printing format (in this example “xml”; other formats include “json” and “flat”)</dd>
       </dl>
-      <p>See also the <a href="www.ffmpeg.org/ffprobe.html" target="_blank"> FFmpeg documentation on ffprobe</a> for a full list of flags, commands, and options.</p>
+      <p>See also the <a href="http://www.ffmpeg.org/ffprobe.html" target="_blank"> FFmpeg documentation on ffprobe</a> for a full list of flags, commands, and options.</p>
       <p class="link"></p>
     </div>
     <!-- ends Pull specs -->
@@ -1856,7 +1870,7 @@
         <dt>-c:a pcm_s16le</dt><dd>encodes the audio codec in <code>pcm_s16le</code> (the default encoding for wav files). <code>pcm</code> represents pulse-code modulation format (raw bytes), <code>16</code> means 16 bits per sample, and <code>le</code> means "little endian"</dd>
         <dt>-t 10</dt><dd>specifies recording time of 10 seconds</dd>
         <dt>-c:v ffv1</dt><dd>Encodes to <a href="https://en.wikipedia.org/wiki/FFV1" target="_blank">FFV1</a>. Alter this setting to set your desired codec.</dd>
-        <dt><i>output_file</i>.wav</dt><dd>path, name and extension of the output file</dd>
+        <dt><i>output_file</i></dt><dd>path, name and extension of the output file</dd>
       </dl>
       <p class="link"></p>
     </div>
@@ -1880,6 +1894,31 @@
     </div>
     <!-- ends Broken File -->
 
+    <!-- Game of Life -->
+    <label class="recipe" for="game_of_life">Conway's Game of Life</label>
+    <input type="checkbox" id="game_of_life">
+    <div class="hiding">
+      <h3>Conway's Game of Life</h3>
+      <p>Simulates <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">Conway's Game of Life</a></p>
+      <p><code>ffplay -f lavfi life=s=300x200:mold=10:r=60:ratio=0.1:death_color=#C83232:life_color=#00ff00,scale=1200:800</code></p>
+      <dl>
+        <dt>ffplay</dt><dd>starts the command</dd>
+        <dt>-f lavfi</dt><dd>tells ffplay to use the <a href="http://ffmpeg.org/ffmpeg-devices.html#lavfi" target="_blank">Libavfilter</a> input virtual device</dd>
+        <dt>life=s=300x200</dt><dd>use the life filter and set the size of the video to 300x200</dd>
+        <dt>:</dt><dd>indicates there’s another parameter coming</dd>
+        <dt>mold=10:r=60:ratio=0.1</dt><dd>sets up the rules of the game: cell mold speed, video rate, and random fill ratio</dd>
+        <dt>:</dt><dd>indicates there’s another parameter coming</dd>
+        <dt>death_color=#C83232:life_color=#00ff00</dt><dd>specifies color for cell death and cell life; mold_color can also be set</dd>
+        <dt>,</dt><dd>comma signifies closing of video source assertion and ready for filter assertion</dd>
+        <dt>scale=1200:800</dt><dd>scale to 1280 width and 800 height</dd>
+      </dl>
+      <img src="img/life.gif" alt="GIF of above command">
+      <p>To save a portion of the stream instead of playing it back infinitely, use the following command:</p>
+      <p><code>ffmpeg -f lavfi -i life=s=300x200:mold=10:r=60:ratio=0.1:death_color=#C83232:life_color=#00ff00,scale=1200:800 -t 5 <i>output_file</i></code></p>
+      <p class="link"></p>
+    </div>
+    <!-- ends Game of Life -->
+      
     </div>
     <div class="well">
     <h2 id="ocr">Use OCR</h2>

js/js.js

@@ -3,10 +3,11 @@ $(document).ready(function() {
   // open recipe window if a hash is found in URL
   if(window.location.hash) {
     id = window.location.hash
+    console.log(id.substring(1))
     document.getElementById(id.substring(1)).checked = true;
     $('html, body').animate({ scrollTop: $(id).offset().top}, 1000);
     $(id).closest('div').find('.link').empty();
-    $(id).closest('div').find('.link').append("<small>Link to this command: <a href="+window.location.href+">"+window.location.href+"</a></small>");
+    $(id).closest('div').find('.link').append("<small>Link to this command: <a href='https://amiaopensource.github.io/ffmprovisr/index.html"+window.location.hash+"'>https://amiaopensource.github.io/ffmprovisr/index.html"+window.location.hash+"</a></small>");
   }
 
   // add hash URL when recipe is opened
@@ -14,7 +15,7 @@ $(document).ready(function() {
     id = $(this).attr("for");
     window.location.hash = ('#' + id)
     $('#' + id).closest('div').find('.link').empty();
-    $('#' + id).closest('div').find('.link').append("<small>Link to this command: <a href="+window.location.href+">"+window.location.href+"</a></small>");
+    $('#' + id).closest('div').find('.link').append("<small>Link to this command: <a href='https://amiaopensource.github.io/ffmprovisr/index.html"+window.location.hash+"'>https://amiaopensource.github.io/ffmprovisr/index.html"+window.location.hash+"</a></small>");
   });
 
 });

readme.md

@@ -44,7 +44,7 @@ You can read our contributor code of conduct [here](https://github.com/amiaopens
 
 ## Maintainers
 
-[Ashley Blewer](https://github.com/ablwr), [Katherine Frances Nagels](https://github.com/kfrn), [Kieran O'Leary](https://github.com/kieranjol) and [Reto Kromer](https://github.com/retokromer)
+[Ashley Blewer](https://github.com/ablwr), [Katherine Frances Nagels](https://github.com/kfrn), [Kieran O'Leary](https://github.com/kieranjol), [Reto Kromer](https://github.com/retokromer) and [Andrew Weaver](https://github.com/privatezero)
 
 ## Contributors
 * Gathered using [octohatrack](https://github.com/LABHR/octohatrack)
@@ -104,4 +104,6 @@ All Contributors: 22
 
 ## License
 
-<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a><br />This <span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" rel="dct:type">work</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://amiaopensource.github.io/ffmprovisr/" property="cc:attributionName" rel="cc:attributionURL">ffmprovisr</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/amiaopensource/ffmprovisr" rel="dct:source">https://github.com/amiaopensource/ffmprovisr</a>.
+<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png"></a><br>
+This <span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" rel="dct:type">work</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://amiaopensource.github.io/ffmprovisr/" property="cc:attributionName" rel="cc:attributionURL">ffmprovisr</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.<br>
+Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/amiaopensource/ffmprovisr" rel="dct:source">https://github.com/amiaopensource/ffmprovisr</a>.