<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/">
  <channel>
    <title>#processing posts — Ben Crowder</title>
    <link>https://bencrowder.net/blog/tag/processing/</link>
    <atom:link href="https://bencrowder.net/blog/tag/processing/feed/" rel="self" />
    <description>Feed for blog posts tagged with #processing.</description>
    <lastBuildDate>Fri, 17 Apr 2026 23:19:59 GMT</lastBuildDate>
    <language>en-US</language>
    <generator>https://bencrowder.net/</generator>

    <item>
      <title>PlotDevice</title>
      <link>https://bencrowder.net/blog/2014/plotdevice/</link>
      <guid isPermaLink="true">https://bencrowder.net/blog/2014/plotdevice/</guid>
      <pubDate>Sat, 06 Sep 2014 12:00:00 GMT</pubDate>
      <dc:creator><![CDATA[Ben Crowder]]></dc:creator>
      <description><![CDATA[<p>I recently came across <a href="http://plotdevice.io">PlotDevice</a>, a Python-based graphics environment for Mac, similar to <a href="http://processing.org/">Processing</a> and <a href="http://nodebox.net/">NodeBox</a>. I don’t know why I didn’t think of this before with Processing, but it dawned on me that PlotDevice would be perfect for prototyping some of the design experiments I do. For example, it took around fifteen minutes to write some quick code to draw <a href="https://bencrowder.net/genealogy/2014/sparkline-pedigree-chart/">genealogy sparklines</a> (<a href="https://gist.github.com/bencrowder/3f751477c4ee86b4d03b">code</a>):</p>
<p><figure class="border">
        <img src="https://cdn.bencrowder.net/blog/2014/09/sparkline.png" alt="sparkline.png" title="sparkline.png" />
        
      </figure></p>
<p>For this sample, I have a <code>draw_sparkline</code> function that takes an object with a name, birth/death dates, list of marriages, and list of children, and it handles the drawing. Much easier than copying and pasting and tweaking in Illustrator or InDesign.</p>
<p>PlotDevice is vector-based (rather than raster) and exports to PDF, which means output is high quality and not limited to pixel resolution (e.g., I can create very fine hairlines).</p>
<p>I’m hooked. The only semi-important downside for me right now is that it doesn’t have OpenType features or tracking/kerning controls for text, but it looks like both <a href="https://github.com/plotdevice/plotdevice/issues/4">are coming soon</a>.</p>
<p>For fun, a watersun emblem (<a href="https://gist.github.com/bencrowder/a5cdd81e75c93190fe3b">code</a>), based off some code in the PlotDevice <a href="http://plotdevice.io/tut/Geometry">geometry tutorial</a>:</p>
<p><figure class="border">
        <img src="https://cdn.bencrowder.net/blog/2014/09/watersun.png" alt="watersun.png" title="watersun.png" />
        
      </figure></p>
<p>Thanks to Tod Robbins for the heads up about PlotDevice.</p><hr class="feed-extra" style="margin-top: 48pt;" /><p class="feed-extra feed-mail"><a href="mailto:ben.crowder@gmail.com?subject=Re%3A%20PlotDevice">Reply via email</a></p>]]></description>
    </item>
    <item>
      <title>Sine circle test animation</title>
      <link>https://bencrowder.net/blog/2013/sine-circle-test-animation/</link>
      <guid isPermaLink="true">https://bencrowder.net/blog/2013/sine-circle-test-animation/</guid>
      <pubDate>Wed, 22 May 2013 12:00:00 GMT</pubDate>
      <dc:creator><![CDATA[Ben Crowder]]></dc:creator>
      <description><![CDATA[<p>As I’ve been tinkering around with graphics coding, I wanted to figure out how to map a sine wave onto a circle. Here’s how it went down. (Disclaimer: this is all unoptimized code that is almost certainly not the best way to do this. Also, I’m a beginner, so yes, this is very basic stuff.)</p>
<p>First off, I started a new <a href="http://processing.org">Processing</a> sketch and drew a circle:</p>
<figure class="border"><a href="https://cdn.bencrowder.net/images/2013/05/SineCircleTest-001.png" rel="shadowbox"><img src="https://cdn.bencrowder.net/images/2013/05/SineCircleTest-001-800.png" alt="" /></a></figure>
<p>The relevant code from the <code>draw()</code> function:</p>
<pre><code>float x = width / 2;
float y = height / 2;
float radius = height / 3;
float angle = 0;
float angleStep = 0.005;
float twopi = PI * 2;
float dx, dy;

while (angle &amp;lt;= twopi) {
    dx = x + radius * cos(angle);
    dy = y + radius * sin(angle);

    angle += angleStep;

    ellipse(dx, dy, 2, 2);
}
</code></pre>
<p>The basic idea: I loop from 0 to 2π radians (a full circle) in steps of <code>angleStep</code> radians at a time. At each angle I calculate the vector from the center of the circle (<code>x, y</code>) to the point on the circle at a distance of <code>radius</code>. And then I draw a little circle at that point. With a small enough step size, you get a continuous line. (More on that later.)</p>
<p>Mapping a sine wave onto said circle really just means that when you calculate the vector, you apply a sine wave to the point’s distance from the center of the circle. So I added that in, including frequency and amplitude variables I could tweak:</p>
<pre><code>float freq = 20;
float amp = 20;

dx = x + (radius + sin(angle * freq) * amp) * cos(angle);
dy = y + (radius + sin(angle * freq) * amp) * sin(angle);
</code></pre>
<p>And I got this:</p>
<figure class="border"><a href="https://cdn.bencrowder.net/images/2013/05/SineCircleTest-002.png" rel="shadowbox"><img src="https://cdn.bencrowder.net/images/2013/05/SineCircleTest-002-800.png" alt="" /></a></figure>
<p>(I should add that I did this first part on my phone in <a href="http://procoding.audiocommander.de/">Procoding</a>. But then Procoding crashed and deleted my sketch, so I rewrote it in the actual Processing app on my laptop.)</p>
<p>I pulled this code out into a function so I could loop through it and create a bunch of concentric sinuous circles. I also changed the drawing method to use lines instead of ellipses, so there wouldn’t be gaps. Processing didn’t seem to want to antialias the lines, though, and I’m not sure why. Oh well.</p>
<figure><a href="https://cdn.bencrowder.net/images/2013/05/SineCircleTest-render.png" rel="shadowbox"><img src="https://cdn.bencrowder.net/images/2013/05/SineCircleTest-render-800.png" alt="" /></a></figure>
<p>I also saved an alternate version of the sketch that changed the colors to render out a depth map for each frame (the darker it is, the farther from the camera):</p>
<figure><a href="https://cdn.bencrowder.net/images/2013/05/SineCircleTest-depth.png" rel="shadowbox"><img src="https://cdn.bencrowder.net/images/2013/05/SineCircleTest-depth-800.png" alt="" /></a></figure>
<p>Then I animated the amplitude and rotation of each circle and rendered out all the frames, both for the blue-and-white version and for the depth map. I pulled it all into Blender and composited it together. The node setup:</p>
<figure><a href="https://cdn.bencrowder.net/images/2013/05/SineCircleTest-nodes.png" rel="shadowbox"><img src="https://cdn.bencrowder.net/images/2013/05/SineCircleTest-nodes-800.png" alt="" /></a></figure>
<ol>
<li>I take the depth map and convert it from RGB to black and white (meaning values from 0 to 1, where black is 0 and white is 1).</li>
<li>Then I invert the depth map so white is 0 and black is 1, because I’m going to use it as a distance map, where white is close to the camera (a distance of 0 from the camera) and black is far from the camera (a distance of 1).</li>
<li>I plug both the rendered frames and my inverted depth map into the defocus node, which gives me depth of field. (It’s postprocessed, so it’s not ideal, but I don’t think there’s a way around that.) The <code>fStop</code> value is how shallow the DOF is (the lower the number, the blurrier it gets). In the camera settings I’ve keyframed the <code>Distance</code> value (the focal point), with a range of 0 to 1. (Ordinarily they use Blender units, but in this case we’re using our depth map and that has a range of 0 to 1.)</li>
<li>I do a fast Gaussian blur to try to make up for the lack of antialiasing. It doesn’t work as well as I’d like.</li>
<li>Then I add a lens distortion with some chromatic aberration (<code>Dispersion</code>) and elliptical distortion (<code>Distort</code> plus <code>Fit</code> so that I don’t get black around the edges).</li>
<li>Finally, I add a Mix node and change it to <code>Soft Light</code>, then plug in some brown-colored noise I’ve painted in Photoshop.</li>
</ol>
<p>After I rendered the composited frames out to disk, I imported them into Blender’s video editor, added a crossfade to a black color strip at the end, then rendered to H.264 and uploaded to Vimeo. The <a href="https://vimeo.com/66668195">final result</a>:</p>
<iframe src="//player.vimeo.com/video/66668195?byline=0&amp;portrait=0&amp;color=ffffff" width="800" height="534" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<p>The animation itself is somewhat lacking — the timing is uninspiring, the f-stop jumps around too much, etc., and I don’t think it properly conveys a sense of 3D space (of being in a tunnel) — but as a test of the Processing + Blender workflow, I’m quite pleased.</p><hr class="feed-extra" style="margin-top: 48pt;" /><p class="feed-extra feed-mail"><a href="mailto:ben.crowder@gmail.com?subject=Re%3A%20Sine circle test animation">Reply via email</a></p>]]></description>
    </item>
    
  </channel>
</rss>
