Adrian Herbez Rotating Header Image

Posts Tagged ‘3d’

Web-based CAD for cams

Impatient? See the tool for yourself here

This past weekend, I went to an estate sale and snagged a two-volume set of “Ingenious Mechanism for Designers and Inventors” from 1936 for a whopping $4 (I was happy, to say the least).

I was flipping through it and was struck by an illustration of a cylindrical cam with a sinusoidal groove for making two slides move in opposite directions at the same time. It’s not particularly complicated, but struck me as something that would be kinda hard to do in CAD.

While I’m sure that there’s a way to achieve that in FreeCAD, I thought it would be fun to whip together a web-based tool to generate such models in a parametric way, so I did just that:

Instead of generating the full cam, I focused on just making the hard part- the sinusoidal groove. I thought that in any actual application, it was probably make sense to make the base shape of the cam in FreeCAD (or similar), including any additional (and possibly complex) features, then add a boolean operation to cut out the groove.

This ended up being pretty easy, especially since I had the simple web-based CAD starter project I created for the talk I gave at last year’s Roguelike Celebration.

The tool lets you specify the outer radius, the depth of the groove, the number of crests and their height, and an amount of taper. Once that’s all set up to your liking, click the button to get an STL.

Bringing that into OpenSCAD and subtracting it from a cylinder gives something like the following:

And then printing it out gives you something like…

It’s a simple test, and hasn’t been proven out via inclusion in an actual mechanism yet, but results are promising so far. Not bad for a couple hours of javascript.

If you want to play with it yourself, head here: I’ll be releasing a video on how I made it soon on my YouTube channel– if that sounds like something you’d be into, please consider subscribing.

Uncategorized , , , ,

Web-based parametric modeler: first steps

I’ve recently started working on a web-based parametric modeler for making 3d-printable panels full of greebles/nurnies using javascript and Three.JS. The general idea is to have a base shape and allow the user to draw rectangular sections that then get filled in with additional details.

Currently, the system supports beveled extrusions and arrays of buttons, but more feature types are on the way. To see it for yourself, head here:

projects , , , , , ,

Procedural Flowers (WebGL)

Example flower

This was a project to create procedural flowers using pure WebGL. All of the geometry and textures are generated via code, and the only external library used is glMatrix. The flowers are also generated using a seed derived from lat-long coordinates, so specific flowers can be generated for specific locations. To see it in action, head here.

Development Process

Step 1: Flat leaves
The project happened over the course of about a week and a half. I started by generating flat, 2d versions of leaves:

glflower 1

I started by implementing Bezier curves, then using two cubic curves to set the shape of the leaf edge and generating faces to fill in the contents. I also set up a simple shader to have the center of the leaf be a bit red, fading to green at the edges. See this version head here:

Step 2: 3d Leaves
Once I had the basic 2d leaf working, it was time to add additional cubic curves to make it bend backwards along its length as well as to curve gently away from the spine of the leaf.

glflower 2

To see this in action, head here:

Step 3: Adding a Stem
Once I was happy with the leaf shapes, I added in a gently curving stem, and added leaves along the length.

glflower 3

This also had its own shader, but with the color gradient changing along its length. See it here:

Step 4: Expanding leaves to petals, normals
At this point, it was time to move onto the flower itself. I refactored the code for the leaf to be more general, making it a general class for creating geometry from sets of curves (XY, XZ, and YZ). By changing the curves, it was easy to go from pointy leaves to more bell-like petals.

glflower 4

I also added in proper normal calculations for the faces, which also meant writing a normal shader for easy debugging. All of the geometry is rendered double-sided, with one side rendering with the normal color and the other either red (for petals) or green (for leaves).
See this version here:

Step 5: Lathed Geometry
In order to create the central part of the flower, I created a LathedGeometry class that could take a curve and spin it around the Y axis to generate a sealed piece of geometry.

glflower 5

See it in action here: Each refresh of the page makes a slightly different model.

Step 6: Putting it all together
Now that I had all of the parts I needed, I put it all together into a full flower, with a stem, leaves, a central element, and petals.

glflower 6
The colors look a bit crazy, but that’s because I was still using the normal shader as a diagnostic. It makes a lot more sense if you see it moving- to do that, head here: Moving the mouse in the canvas will change the angle of the flower (added that in to make it easier to see what was going on).

Step 7: Colors!
With all of the geometry in, I started working on better colors for the shaders.

glflower 7
See it in action here:

Step 8: Lat-long based seed values
Now that the flower was close to done, I turned my attention to adding support for a lat/long-derived seed value.

glflower 8

Once set, the same seed is used for all the randomized generation, allowing any place in the world to have its own unique flower. At this point, the colors were still always the same though. See it here:

Step 9: Finishing Touches
I was pretty happy with things at this point, but added a few things here and there to provide some polish, namely:
– randomized colors for the petals
– modification of the leaf shader to have stripes on the underside
– changed the background color to a nice medium gray

If you’ve made it this far, thanks for reading! Be sure to see the final result here:

Also, if you’d like to have a look at the code, it’s available on Github here:

projects , , ,

More fun with OpenSCAD

So I’ve been having a great time with OpenSCAD of late, and made a couple of small models:

  1. a parametric Lincoln Log-style building piece (with options for diameter, length, and number of slots)
  2. a die-like cube for tracking damage in World of Darkness pen-and-paper RPGs

I love OpenSCAD, and I also love thingiverse. To check out the models and download them for yourself, head over to my thinigiverse profile.

projects , ,

Binary rings (via OpenSCAD)

So a while ago, I started in on a project to create a tool for generating wearable ring models with text encoded in binary based on the ASCII values of each character. I put the project aside a while back, but recently I discovered OpenSCAD, a fantastic tool for programmatically defining 3d models.

OpenSCAD totally rocks, but is a little strange in that variables aren’t, strictly speaking variable, since you can’t change their value. As a result, instead of writing openSCAD directly, I created a Python script that takes a string as a command line argument and generates the OpenSCAD code to make a ring with that phrase around it. The above image encodes ‘OpenSCAD rocks my world’.

The next steps are to make the script take a ring size and thickness, and then I’ll likely be setting up shop on Shapeways to sell these.

projects , , , ,

Deaf on Hollow Winds 3d graphic

falling stones
I recently created a new interactive 3d piece for the OmniCircus show, meant to accompany “Deaf on Hollow Winds”, one of the songs we perform (written by Frank Garvey). The piece consists of an endless stone walkway that crumbles away and spreads off into the sky, with a moving sunset backdrop.

projects , , , ,

Demented Jacks in Boxes

I just finished a new Virtual Puppet for the OmniCircus show, a Jack in the Box based on one of Frank Garvey’s paintings. He undulates back and forth, and can be made to bend forwards/backwards, left/right, and to twist to either side. His jaw is also controllable, allowing him to be made to laugh. Additionally, he can be multiplied, yeilding a forest of Jacks with each one slowing waving.

He was modeled in Maya, textured with Photoshop, and implemented/animated via an OpenGL program. The Jack program incorporates the opening doors that we’ve been using in the OmniCircus shows, and can switch back and forth between rendering the doors and rendering the Jacks.

projects , , , ,