https://anotherjesse.com/categories/sketch/Recent content in Sketch 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/Mon, 05 Nov 2018 00:00:00 +0000https://anotherjesse.com/sketches/<p><a href="#wind"><img src="daily/wind.gif" alt="Wind"></a> <a href="#cow-hide-blob"><img src="daily/blob.gif" alt="Cow Hide Blob"></a> <a href="#psychedelic-phyllotactic-spirals"><img src="daily/phy.gif" alt="Phyllotatactic Spirals"></a> <a href="#phyllotatactic-spirals-2"><img src="daily/phy-redux.gif" alt="Phyllotatactic Spirals 2"></a> <a href="#phyllotatactic-spirals-3"><img src="daily/phy-spiral.gif" alt="Phyllotatactic Spirals 3"></a> <a href="#flag"><img src="daily/flag.gif" alt="Flag"></a> <a href="#circle-rainbow-flag-v0"><img src="daily/circle.gif" alt="Circle Rainbow Flag v0"></a> <a href="#color-worms"><img src="daily/color-worms.gif" alt="Color Worms"></a> <a href="#wow"><img src="daily/wow.gif" alt="Wow"></a> <a href="#rainbow-circle"><img src="daily/rainbow-circle.gif" alt="Rainbow Circle"></a> <a href="#rainbow-thinner"><img src="daily/rainbow-another.gif" alt="Rainbow Thinner"></a> <a href="#rainbow-dots"><img src="daily/rainbow-dots.gif" alt="Rainbow Dots"></a> <a href="#rainbow-dots-2"><img src="daily/rainbow-plots.gif" alt="Rainbow Dots 2"></a> <a href="#blue-rose"><img src="daily/blue-rose.gif" alt="Blue Rose"></a> <a href="#blue-blur"><img src="daily/blue-blur.gif" alt="Blue Blur"></a> <a href="#blue-drugs"><img src="daily/blue-drugs.gif" alt="Blue Drugs"></a> <a href="#electric"><img src="daily/electric-cactus.gif" alt="Electric"></a> <a href="#random"><img src="daily/cactus-rando.gif" alt="Cactus"></a> <a href="#worms"><img src="daily/worm-torus.gif" alt="Worms"></a> <a href="#worm-swimming"><img src="daily/worm-moving.gif" alt="Worm Swimming"></a> <a href="#umi-worm"><img src="daily/umi-worm.gif" alt="Umi Worm"></a> <a href="#sand-worm"><img src="daily/sand-worm.gif" alt="Sand Worm"></a> <a href="#red-sand-worms"><img src="daily/red-sand-worm.gif" alt="Red Sand Worms"></a> <a href="#black-sand-worm"><img src="daily/blah-black-sand-worm.gif" alt="Black Sand Worms"></a> <a href="#phyllotatactic-zoomer"><img src="daily/zoomer.gif" alt="Phyllotatactic Zoomer"></a> <a href="#phyllotatactic-zoomer-2"><img src="daily/slower-zoomer.gif" alt="Phyllotatactic Zoomer 2"></a> <a href="lines/"><img src="lines/thumb.gif" alt="Lines + Circles"></a> <a href="mouse-color-worm/"><img src="mouse-color-worm/thumb.gif" alt="Mouse Color Worm"></a> <a href="video-halftones/"><img src="video-halftones/thumb.gif" alt="Video Halftones"></a> <a href="video-color-halftones/"><img src="video-color-halftones/thumb.gif" alt="Video Color Halftones"></a> <a href="video-filters/"><img src="video-filters/thumb.gif" alt="Video Filters"></a> <a href="video-four-tint/"><img src="video-four-tint/thumb.gif" alt="Video Four Tint"></a> <a href="video-four-loops/"><img src="video-four-loops/thumb.gif" alt="Video Four Loops"></a> <a href="video-grid-delay/"><img src="video-grid-delay/thumb.gif" alt="Video Grid Delay"></a> <a href="video-grid-random-delay/"><img src="video-grid-random-delay/thumb.gif" alt="Video Grid Random Delay"></a> <a href="video-rgb-circles/"><img src="video-rgb-circles/thumb.gif" alt="Video RGB Circles"></a> <a href="video-rgb-loops/"><img src="video-rgb-loops/thumb.gif" alt="Video RGB Loops"></a> <a href="webgl-grid-video/"><img src="webgl-grid-video/thumb.gif" alt="Video WebGL Grid"></a> <a href="webgl-video-grid/"><img src="webgl-video-grid/thumb.gif" alt="Video WebGL Grid Boxes"></a></p> <!-- <a href="video-diff-loops/"></a> --> <h1 id="the-instagram-period-aka-ive-gone-loopy">The instagram period (aka, I&rsquo;ve gone loopy)</h1> <p>For these sketches I started using both the live p5.js editor and <a href="https://instagram.com/anotherjesse">instagram</a> for publishing. I wasn&rsquo;t as good about keeping the source organized, so I&rsquo;m still trying to gather things again…</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>