https://anotherjesse.com/categories/video/Recent content in Video on anotherjesse.comHugoen-usMon, 05 Nov 2018 00:00:00 +0000https://anotherjesse.com/sketches/video-diff-loops/Mon, 05 Nov 2018 00:00:00 +0000https://anotherjesse.com/sketches/video-diff-loops/<p>Mixed together two video loops, with the difference between the two loops shown.</p> <p>Pressing and holding <code>1</code> and <code>2</code> to record two different loops. The difference between the two loops will be shown.</p> <div id="demo"></div> <script src="../p5.min.js"></script> <script src="../addons/p5.dom.min.js"></script> <script src="../addons/p5.sound.min.js"></script> <script src="sketch.js"></script>https://anotherjesse.com/sketches/video-four-tint/Mon, 05 Nov 2018 00:00:00 +0000https://anotherjesse.com/sketches/video-four-tint/<p>Tint modifies the color of future image operations.</p> <div id="demo"></div> <script src="../p5.min.js"></script> <script src="../addons/p5.dom.min.js"></script> <script src="../addons/p5.sound.min.js"></script> <script src="sketch.js"></script> <p>I was surprised that <code>tint</code> impacts the future <code>image</code> calls, while <code>filter</code> modifies the existing canvas. Compare with <a href="../video-filters">Video Filters</a>.</p> <div class="highlight"><pre tabindex="0" style="background-color:#f7f7f7;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span> <span style="color:#1f2328">noTint</span><span style="color:#1f2328">()</span> </span></span><span style="display:flex;"><span> <span style="color:#1f2328">image</span><span style="color:#1f2328">(</span><span style="color:#1f2328">img</span><span style="color:#1f2328">,</span> <span style="color:#0550ae">0</span><span style="color:#1f2328">,</span> <span style="color:#0550ae">0</span><span style="color:#1f2328">,</span> <span style="color:#1f2328">video_w</span><span style="color:#1f2328">,</span> <span style="color:#1f2328">video_h</span><span style="color:#1f2328">);</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#1f2328">tint</span><span style="color:#1f2328">(</span><span style="color:#0550ae">0</span><span style="color:#1f2328">,</span> <span style="color:#0550ae">0</span><span style="color:#1f2328">,</span> <span style="color:#0550ae">255</span><span style="color:#1f2328">);</span> <span style="color:#57606a">// Blue </span></span></span><span style="display:flex;"><span> <span style="color:#1f2328">image</span><span style="color:#1f2328">(</span><span style="color:#1f2328">img</span><span style="color:#1f2328">,</span> <span style="color:#1f2328">video_w</span><span style="color:#1f2328">,</span> <span style="color:#0550ae">0</span><span style="color:#1f2328">,</span> <span style="color:#1f2328">video_w</span><span style="color:#1f2328">,</span> <span style="color:#1f2328">video_h</span><span style="color:#1f2328">);</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#1f2328">tint</span><span style="color:#1f2328">(</span><span style="color:#0550ae">255</span><span style="color:#1f2328">,</span> <span style="color:#0550ae">0</span><span style="color:#1f2328">,</span> <span style="color:#0550ae">0</span><span style="color:#1f2328">);</span> <span style="color:#57606a">// Red </span></span></span><span style="display:flex;"><span> <span style="color:#1f2328">image</span><span style="color:#1f2328">(</span><span style="color:#1f2328">img</span><span style="color:#1f2328">,</span> <span style="color:#0550ae">0</span><span style="color:#1f2328">,</span> <span style="color:#1f2328">video_h</span><span style="color:#1f2328">,</span> <span style="color:#1f2328">video_w</span><span style="color:#1f2328">,</span> <span style="color:#1f2328">video_h</span><span style="color:#1f2328">);</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span> <span style="color:#1f2328">tint</span><span style="color:#1f2328">(</span><span style="color:#0550ae">0</span><span style="color:#1f2328">,</span> <span style="color:#0550ae">255</span><span style="color:#1f2328">,</span> <span style="color:#0550ae">0</span><span style="color:#1f2328">);</span> <span style="color:#57606a">// Green </span></span></span><span style="display:flex;"><span> <span style="color:#1f2328">image</span><span style="color:#1f2328">(</span><span style="color:#1f2328">img</span><span style="color:#1f2328">,</span> <span style="color:#1f2328">video_w</span><span style="color:#1f2328">,</span> <span style="color:#1f2328">video_h</span><span style="color:#1f2328">,</span> <span style="color:#1f2328">video_w</span><span style="color:#1f2328">,</span> <span style="color:#1f2328">video_h</span><span style="color:#1f2328">);</span> </span></span></code></pre></div>