https://anotherjesse.com/sketches/Recent content in Daily Sketches on anotherjesse.comHugoen-usThu, 07 Mar 2024 00:00:00 +0000https://anotherjesse.com/sketches/phyllotactic-fft/Thu, 07 Mar 2024 00:00:00 +0000https://anotherjesse.com/sketches/phyllotactic-fft/<p>Modifying phyllotactic patterns using fft of microphone input.</p> <div id="demo"></div> <p>Note: to use the mic, the browser requires a user interaction &ndash; Click the rotating circle to begin!</p> <h2 id="using-the-microphone---learning-to-love-the-fft">Using the microphone - learning to love the FFT</h2> <p>The FFT (see <a href="https://www.youtube.com/watch?v=spUNpyF58BY">3b1b - But what is the Fourier Transform?</a> ) converts a signal from the time domain to the frequency domain&hellip;</p> <p>What?</p> <p>Time domain means the value the microphone is receiving at each point in time.</p>https://anotherjesse.com/sketches/lines/Mon, 05 Nov 2018 00:00:00 +0000https://anotherjesse.com/sketches/lines/<p>A line is a series of points &hellip; and moving those points with noise is a fun way to animate them.</p> <div id="demo"></div> <script type='text/javascript' src="sketch.js"></script> <script type='text/javascript' src="../p5.min.js"></script> <p>I like it, but didn&rsquo;t (yet) know how to make it loop seamlessly. (see <a href="https://anotherjesse.com/posts/seamless-loops">Seamless loops</a> for more)</p>https://anotherjesse.com/sketches/mouse-color-worm/Mon, 05 Nov 2018 00:00:00 +0000https://anotherjesse.com/sketches/mouse-color-worm/<p>The worm grows randomly, but the color is based on the mouse position. By using HSB (Hue, Saturation, Brightness) color space, the user can control the color of the worm by moving the mouse.</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>During setup we need to switch to HSB color space with a maximum value of 1.0 for each component:</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">colorMode</span><span style="color:#1f2328">(</span><span style="color:#1f2328">HSB</span><span style="color:#1f2328">,</span> <span style="color:#0550ae">1.0</span><span style="color:#1f2328">);</span> </span></span></code></pre></div><p>Then in the draw function, scale the <code>mouseX</code> and <code>mouseY</code> values to set the color of the worm.</p>https://anotherjesse.com/sketches/video-color-halftones/Mon, 05 Nov 2018 00:00:00 +0000https://anotherjesse.com/sketches/video-color-halftones/<p>Webcam filter that uses a grid of circles to create a halftone effect. The color / size of the circles is determined by the video pixel color and intensity.</p> <div id="demo"></div> <p>Builds upload the <a href="../video-halftones/">Video Halftones</a> setting a color of circle to the color of the video pixel.</p> <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-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-filters/Mon, 05 Nov 2018 00:00:00 +0000https://anotherjesse.com/sketches/video-filters/<p>Exploring filters applied to images captured from the webcam. Inspired by <a href="https://www.youtube.com/watch?v=oLiaUEKsRws">this coding train</a> video.</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>This is done using the <code>filter</code> feature in p5.js which applies the filter to the entire canvas. Since I&rsquo;m additively applying the filters - the upper left image will have all the filters applied, and the bottom right will only have <code>erode</code> applied.</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:#cf222e">var</span> <span style="color:#1f2328">img</span> <span style="color:#0550ae">=</span> <span style="color:#1f2328">capture</span><span style="color:#1f2328">.</span><span style="color:#1f2328">get</span><span style="color:#1f2328">()</span> </span></span><span style="display:flex;"><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 style="color:#1f2328">filter</span><span style="color:#1f2328">(</span><span style="color:#1f2328">THRESHOLD</span><span style="color:#1f2328">);</span> </span></span><span style="display:flex;"><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 style="color:#1f2328">filter</span><span style="color:#1f2328">(</span><span style="color:#1f2328">GRAY</span><span style="color:#1f2328">);</span> </span></span><span style="display:flex;"><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 style="color:#1f2328">filter</span><span style="color:#1f2328">(</span><span style="color:#1f2328">POSTERIZE</span><span style="color:#1f2328">,</span> <span style="color:#0550ae">3</span><span style="color:#1f2328">);</span> </span></span><span style="display:flex;"><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><span style="display:flex;"><span> <span style="color:#1f2328">filter</span><span style="color:#1f2328">(</span><span style="color:#1f2328">ERODE</span><span style="color:#1f2328">);</span> </span></span></code></pre></div>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>https://anotherjesse.com/sketches/video-grid-delay/Mon, 05 Nov 2018 00:00:00 +0000https://anotherjesse.com/sketches/video-grid-delay/<p>A fun little webcam video effect. By capturing video frames, and playing them back in a grid with increasing delay, we can create a kind of &ldquo;time lapse&rdquo; effect.</p> <div id="demo"></div> <p>This code is based on a tutorial by <a href="https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw">The Coding Train</a>.</p> <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-grid-random-delay/Mon, 05 Nov 2018 00:00:00 +0000https://anotherjesse.com/sketches/video-grid-random-delay/<p>A slight (but FUN!) tweak of <a href="../video-grid-delay">Video Grid Delay</a> where the delay is randomized.</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-halftones/Mon, 05 Nov 2018 00:00:00 +0000https://anotherjesse.com/sketches/video-halftones/<p>Exploring using the webcam to create a halftone effect, like ye olde newspaper&hellip;</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>