blog.tommy.sh

Build-A-Build-A-Synth

build.oskitone

Here’s a web app I’ve been fiddling with recently to help visualize (and, ahem, sell!) custom synthesizer based on the OKAY Synth and the OKAY 2.

It’s built in React with Next.js, uses Bootstrap styling via Reactstrap, and renders its preview onto canvas with Konva. It’s also the first time I’ve used any of that stack, so I expect to be thoroughly embarrassed by my code if/when I revisit it in six months.

Try it out: build.oskitone.com

Tinker tinker

For now, the parameters are mostly fixed to those used for the real life OKAYs:

  • The vanity text is always in the Open Sans font, matching the OSKITONE wordmark
  • There’s only one speaker size, but I made “None” an option for anybody who only wants audio out jack
  • Functionality is assumed to match the OKAY and OKAY 2, so there are always two knobs for the Octave and Volume controls
  • Key dimensions are fixed to match preexisting builds
  • Enclosure dimensions similarly adapt to key, text, and component dimensions based on fixed gutter and spacing parameters

You can even do things that I can’t physically do, like use colors I don’t have or effect dimensions bigger than I can 3D-print. If you do either, you’ll get a warning when you try to purchase.

Speaking of which…

How to sell a thing that doesn’t exist?

There are two legit caveats worth talking about:

The first is that the preview isn’t as accurate as I’d like. It’s an abstraction of a theory of a thing, a twice removed and two-dimensional reimplementation of a three-dimensional model of an eventual physical good. (Woof, that’s a mouthful. See below.)

The second is that my store that wasn’t made to do stuff like this. The platform I’m using, Big Cartel, is more for selling goods (ex: clothing) than services (ex: tailoring). I could get around that by having one product with all N permutations as options, but that’d be a rat’s nest to implement without a programmatic way to create them on the site. (Hacks abound, no doubt, but I’ll spare you the details.)

So the workaround for now is to pass the design off to the contact form on the main Oskitone site for the user to submit. I can then follow up over email with a real 3D render and price. It’s a kludge, for sure, but it should work well enough to test the idea.

Could be better

Diffing between this preview, the 3D render, and the finished print

  • Obviously missing details on speaker grill, knob labels, and enclosure hinges
  • Text has looser kerning, is missing stroke, and isn’t maximized to its available space
  • Dimensions may or may not be exactly accurate

What’s next

  • Real 3D model previews (There will be a LOT that will go into this, worthy of a new blog post. Hopefully I can get to it. Stay tuned.)
  • More color options on different parts
  • New instrument designs?!?!

URL: http://build.oskitone.com/
Code: https://github.com/rocktronica/build-oskitone