I manually machined blocks of 6061 aluminum into the appropriate component shapes to begin to form the M&amp;T logo

Then I milled pockets for the polarized neodymium magnets to be embedded into after anodizing

mt_animation_reduced_matte

The blocks were then anodized hard black, and fit up perfectly into the Ash wooden tray that Manual Labor cnc&#8217;d for the project

alt_mt_tray_trans

alt_mt_tray_trans_2

mt_layout_with_screen

mt-2

screen

When Mende Design approached me to build the Sonoma Valley Museum of Art website there was a key interaction that needed to be figured out early on, prior to building anything else. It was such a pivotal bit of interaction and a huge endeavor for a subtle result.

My initial proposal sketch of the layering stack, and iterated into a model

The idea was to have multiple panels at key points throughout the scroll-height of the website that revealed various content below them in the z-index layering.

The complexity of building this came in the design requirement to have multiple background panes throughout the scroll-height, all nestled around dynamic, ever-changing content. As you can imagine, an interaction like this requires the entirety of the rest of the website to be architected with respect to this interaction &#8211; no small feat while maintaining SEO and ADA adherence.
I prototyped and sketched many versions of the architecture for this before settling on a reference pointer approach for its ability to allow the Museum to publish these background panes inline as they&#8217;re publishing the rest of the content, nice and simple and exactly how you&#8217;d want to manage publishing something like this!
With the reference pointer approach decided on I built a JavaScript module that sequentially harvests the inline-published panes denoted by class name in the standard flow of the page.  The module at runtime does the following:
<ol>
<li>calculates the height, and overall offset top of each pane</li>
<li>removes that pane from the standard page flow, and temporarily stores it as a variable</li>
<li>places a relatively positioned div with a transparent background in the place where the removed pane previously lived, at exactly the same height as the pane</li>
<li>plunks that pane that we stored into a background panes container</li>
</ol>
&nbsp;

<pre>const panes = grabAll(".pane")
let collection = []
panes.map(p =&gt; {
 parent
 .remove(p)
 .replaceWith(transW)
 collection.push(
 {
 'obj' : p,
 'h' : p.height,
 'ot' : p.offset().top
 }
 )
 }</pre>

Now that the sorting of content was decided on, I could move on to the actual interaction &#8211; this was all setup work up until this point. The module, now finished sorting and calculating, can start observing scroll, and its last job is to show the right pane in the background container at exactly the same time the transparent window in the natural scroll comes into view. And naturally&#8230; this all has to happen again on window resize!

artboard-1-19

Artboard 1

motors

Livia Foldes and Jared Smith 
The Superstructure 
Video, paper, drawing robot: Headlands Center for the Arts is a physical space enveloped in an invisible superstructure of relationships and connections. This project is an attempt to make pieces of that structure tangible. We started with a data set: all of the artists who have participated in Headlands’ programs over the last twenty five years. We found connections between the artists—by year, location, and discipline—and used network mapping software to manipulate the data.The images you see were generated by algorithms. The images are not ornamental: they are the artifact of a process intended to arrange data into legible images and patterns. But neither are they strictly informational. We worked together with the algorithms to make these images, massaging data and selecting outputs to generate a distinct vocabulary of shape and movement.The resulting forms, governed by a sometimes inscrutable internal logic, give shape and weight to the complex web of connections generated in this physical space.

After completing the Headlands Center for the Arts symposium website I was approached by long-time design collaborator Livia Foldes with an opportunity to continue the collaboration by building a physical representation of the dataset visualizations that were core to the website.
&nbsp;
Together with Foldes, I came up with the idea of creating a long-running cnc drawing robot to live-draw the data visualizations throughout the day at the Headlands Center during the symposium.
&nbsp;
Similar to an etch-a-sketch in theory and operation, except for the addition of a small solenoid to drive the pen off the paper, a crude binary z-index if you will. We ended up loving the artifacts lefts behind by always having the pen in contact with the paper, so we coded the z-index moves to a minimum.
&nbsp;
A dream project to play a part in: physical supporting digital, all scratch-built here in house, and all to support an institution that has done so much over the years to support artists.

dsc_0095

DSC_0095

withpeople

leader_screen

The home screen for the Hello World Engineering site has a subtle, playful and explorative kick off to the user experience. In collaboration with site designer, Livia Foldes, I concepted the hover interaction, playing with the words, &#8220;NEW&#8221; and &#8220;THINGS&#8221;.  Simple and bold.

As I began to prototype several iterations of the interaction I quickly realized that to feel right, each word needed to have its own lifespan after being triggered into view. This meant individual JavaScript timers on each instance of each word after mouseenter&#8230; a very expensive calculation memory-wise. Even on our powerful machines, this was instantly apparent as the wrong way to solve the individual timing of each word.

<pre>.fade-word {
 opacity: 0;
}

.fade {
 opacity: 1;
 transition-property: opacity;
 transition-timing-function: ease;
 transition-duration: 0.2s;

 &amp;.in {
 transition-delay: var(--timing-delay);
 }

 &amp;.out {
 opacity: 0;
 }
}</pre>

So, I turned to my favorite tool, CSS.
CSS is a powerful ally in web development, and can be used for so much more than simple styling of elements. When architected and combined with a little JavaScript, CSS becomes a powerful state machine that can totally transform any aspect of a website to pre-determined, or dynamic alternate states.

<pre>const fadeWords = _('.fade-word')
let fades = 0
let timer
let floor = 3
let ceil = 20

fadeWords.map(f =&gt; {
 f.addEventListener("mouseenter", () =&gt; {
 f
 .addClass('fade')
 .delay(10)
 .addClass('in')

 fades++
 
 timer = 
 fades &lt;= ceil / 2 ? (ceil / 2) + 1 : Math.floor(Math.random() * ceil) + floor f .style({ '--timing-delay': timer * ceil }) .addClass('out') setTimeout(() =&gt; {
 fades--
 }, timer * ceil)
})
</pre>

This came into play to help solve the memory issues for the HWE NEW/THINGS interaction by allowing me to write heavier CSS and lighter JavaScript. All animations, delays, and timers were accounted for in CSS classes, and all JavaScript had to do was be aware of those class options and simply randomly apply those to the word instances prior to user interaction.

artboard-2-2

Artboard 2

When welding anything the heat of the weld causes distortion and that distortion leads to inaccuracies in final part dimensions &#8211; the goal of a fixture is to minimize that distortion by holding all separate parts rigidly in place during welding. I set out to build a modular, rigid fixture, that will last a lifetime and allow me to build many different frame geometries.
This project was something that had been on my long list of projects to get to eventually for quite a while &#8211; I started searching for a good base and finally found a cast iron t-slot table (in need of much love and a resurfacing) at a machinery reseller in Michigan. I had it shipped here and designed the system of fixtures to fit that.

table-2

table

mast-3

mast

components_laid_out

fixtures-5

Finished frames fresh off the fixture

frame-2

frame

pan_frame

I set a tight tolerance for all the fixtures of +/-0.0005” and honed my manual milling skills along the way, throwing away many parts and starting over, learning how to really use the Bridgeport and hit the dimensions.