# toxiclibs

### Re-inventing the wheel

Firstly, massive thanks are in order for such a storming positive reception of this new site – I really hope this will become a good resource for everyone interested in the fields these libs are addressing and I will try to update everyone (and everything) as often as I can. In the near future that will include a bit of future gazing, but today I’ve been re-inventing the wheel, literally…

I’ve been working on some designs for custom made wheels for a potential installation project. The aim is to lasercut some light-weight & good looking acrylic wheels and so I’ve been literally searching for a few candidate solutions, which allow me to cut out large pieces of material from inside the wheel to keep the weight down whilst still being sturdy enough (thankfully the load on them will be minimal so I can skip the structural analysis).

Not wanting to do this exploration/hike manually, I opted for the Processing PDF output route and have written this little tool below to show me my options (at least some of them) and also tweak them easily.

Apart from Processing, the tool also makes use of these 3 classes from the toxiclibscore package:

## Vec2D

This class, alongside its sibling Vec3D, is likely one of the most used classes of the entire library. Since 1.0 Processing has its own vector class too now, but Vec2D/3D are far more feature complete, implement a fluent interface for more legible code when dealing with complex vector maths and can be faster too (especially for 2D, but also by helping you to avoid temporary object creation). Furthermore Vec2D also has support for polar coordinates (Vec3D has spherical as equivalent) which was very helpful for building the tool below:

Normally, you’d specify a Cartesian point with:

Vec2D v = new Vec2D(x, y);

However, if we want to interpret our vector as polar coordinates, we’re using the x component to specify the radius and the y component as rotation angle. To convert the vector back into Cartesian space (e.g. our screen) we can use the .toCartesian() method…

Vec2D v = new Vec2D(radius, theta).toCartesian();

In a similar manner, you can also transform a Cartesian point into polar coordinates:

// here we 1st create a copy of v and then convert that one
Vec2D p = v.copy().toPolar();

To see this basic usage pattern in more context, take a closer look at the drawHoles() method below (lines 114-134) or check out the PolarUnravel demo bundled with the core lib.

## Spline2D

Each cut-out shape in the wheel is created from a simple spline shape, specified using only 4 points. As mentioned above, these anchor points are specified using (initially) polar coordinates and the Spline2D class is then computing control points (handles) for each of these given points automatically. As user you can also specify tightness & subdivisions for the computed curve vertices in between. While the lack of direct manual control over the spline handles might be a shortcoming in some situations, I generally found it easier to work with this automated version, especially when working with long curves and not only single bezier segments.

The next release of the library will also add a decimator method to this class which will enable the sampling of the curve at a uniform interval (i.e. all successive points of the returned list have the same distance (within a tolerance), regardless of curvature). This feature comes from the ParticlePath class briefly described in the Happy 2010 post.

Computing symmetrical handles for the curve endpoints is another still outstanding feature, but currently low priority (unless someone has got a patch ready for that ;)

The next image shows the 4 anchor points of each spline shape in green and all other computed vertices in pink.

## UnitTranslator

This class is the sole, lonely member of the toxi.math.conversion package, but is especially useful for those of you using Processing for digital fabrication or creating printed outputs. It provides the following conversion methods, making it trivial to e.g produce PDF outputs at the right physical dimensions (without trial & error):

• millisToPixels(double mm, int dpi) – Converts millimeters into pixels.
• millisToPoints(double mm) – Converts millimeters into PostScript points.
• pixelsToInch(int pix, int dpi) – Converts pixels into inches.
• pixelsToMillis(int pix, int dpi) – Converts pixels into millimeters.
• pixelsToPoints(int pix, int dpi) – Converts pixels into points.
• pointsToMillis(double pt) – Converts points into millimeters.
• pointsToPixels(double pt, int dpi) – Converts points into pixels.

In the demo below, we’re using it to specifiy the wheel radius and drill holes in mm and then automatically calculate the required window size in pixels. In that case we’re however not using millisToPixels(), but millisToPoints() because PDF units are in points which are interpreted as 1 pixel (at 72 dpi)…

## The Wheel tool

Just copy & paste the code below into Processing and hit Run to fill up your hard disk (kidding, by default it only generates 120 different small PDF files/variations). The variations are created by iterating over all permutations of 4 parameters: number of symmetry steps, inset radius, core radius, alternate core radius.

/**
* Generative wheel designs utilizing Vec2D polar coordinates,
* splines and unit conversion. By default each design is exported as
* PDF & PNG file, but can be turned off by setting the doExport flag to false.
*
* Usage: if export is enabled simply run & wait until all permutations
* have been generated. Else press 'x' to activate next permutation or
* use - / = to adjust the ARC_WIDTH parameter which defines the
* size of the cutouts.
*
* (c) 2010 Karsten Schmidt, PostSpectacular Ltd.
*
*/

import processing.pdf.*;

import toxi.geom.*;
import toxi.math.conversion.*;

// bleed in mm
int BLEED = 6;

// wheel radii & document size
float R = (float)UnitTranslator.millisToPoints(370 / 2);
float W = 2 * R + 2 * (float)UnitTranslator.millisToPoints(BLEED);
float EMPTY_CORE_SIZE = (float)UnitTranslator.millisToPoints(5);

// start number of main segments
int NUM_SEGMENTS = 3;

// normalized parameters
float OFFSET = 0.1f;
float ARC_WIDTH = 0.4f;

// optional mounting holes
int NUM_DOTS = 18;
float DOTSIZE = (float)UnitTranslator.millisToPoints(2);

// number of subdivisions for spline vertex computation
int SPLINE_SUBDIV = 20;

// flag for PDF & PNG export of all permutations
boolean doExport = true;

public void setup() {
size((int) W, (int) W);
// turn off automatic redraws when not exporting
if (!doExport) {
noLoop();
}
}

public void draw() {
String frameID =
"wheel-" + NUM_SEGMENTS + "-" + nf(INSET_RADIUS, 1, 2) + "-"
+ nf(ALTCORE_RADIUS, 1, 2) + "-"
+ nf(CORE_RADIUS, 1, 2) + "-" + nf(ARC_WIDTH, 1, 2);
println(frameID);
if (doExport) {
beginRecord(PDF, "out/" + frameID + ".pdf");
}
background(255);
noStroke();
fill(0);
translate(width / 2, height / 2);
ellipse(0, 0, R, R);
fill(255);
ellipse(0, 0, EMPTY_CORE_SIZE, EMPTY_CORE_SIZE);
// main holes
/ 2 * R, ARC_WIDTH, 0, NUM_SEGMENTS);
drawHoles(CORE_RADIUS * 0.85f * R, 0.2f * R,
(CORE_RADIUS * 0.85f + 0.2f) / 2 * R, ARC_WIDTH, 0,
NUM_SEGMENTS);
}
// small cutouts
/ NUM_SEGMENTS, NUM_SEGMENTS);
drawHoles(ALTCORE_RADIUS * 0.85f * R, 0.3f * R,
(ALTCORE_RADIUS * 0.85f + 0.3f) / 2 * R, ARC_WIDTH / 2, PI
/ NUM_SEGMENTS, NUM_SEGMENTS);
}
// drill holes
if (doExport) {
endRecord();
saveFrame("png/" + frameID + ".png");
nextPermutation();
}
}

void drawDots(int num, float radius, float s) {
float delta = TWO_PI / num;
for (int i = 0; i < num; i++) {
Vec2D p = new Vec2D(radius, i * delta).toCartesian();
ellipse(p.x, p.y, s, s);
}
}

void drawHoles(float outerR, float innerR, float centerR, float radiusWidth, float thetaOffset, int num) {
Spline2D s = new Spline2D();
// define point in polar coordinates, then convert them
Vec2D p = new Vec2D(outerR, 0).toCartesian();
Vec2D a = new Vec2D(outerR, radiusWidth).toCartesian();
Vec2D b = new Vec2D(centerR, radiusWidth).toCartesian();
Vec2D c = new Vec2D(innerR, 0).toCartesian();
Vec2D d = new Vec2D(centerR, -radiusWidth).toCartesian();
Vec2D e = new Vec2D(outerR, -radiusWidth).toCartesian();
// add points to spline & compute
java.util.List verts = s.computeVertices(SPLINE_SUBDIV);
float delta = TWO_PI / num;
for (int i = 0; i < num; i++) {
pushMatrix();
rotate(i * delta + thetaOffset);
drawPath(verts);
popMatrix();
}
}

void drawPath(java.util.List verts) {
beginShape();
for (Iterator i = verts.iterator(); i.hasNext();) {
Vec2D v = (Vec2D) i.next();
vertex(v.x, v.y);
}
endShape();
}

public void keyPressed() {
if (key == 'x') {
nextPermutation();
} else if (key == '-') {
ARC_WIDTH -= 0.02;
} else if (key == '=') {
ARC_WIDTH += 0.02;
}
redraw();
}

void nextPermutation() {
NUM_SEGMENTS++;
if (NUM_SEGMENTS > 12) {
exit();
}
}
}
}
}

Finally, below are some more images of variations created with this tool (see the full size & set on flickr):

Social comments and analytics for this post…

This post was mentioned on Twitter by toxiclibs: New blog post: Re-inventing the wheel (http://cli.gs/J29uM)…

• Great stuff. Thanks for sharing, much appreciated.

• Of course, you’re already working on adding profile deformation too right? Nice 3d Rims ready to CNC

• I can see how you (and others) might think there’s a bike connection, but alas there isn’t – so far… The three of you definitely got me thinking! :) Would be ace though and shouldn’t be too hard from the modelling side, I guess the biggest issue there is worrying about sticking to standard measurements and really do some proper stability testing…

• [...] Generative wheel design by Karsten Schmidt. [...]

• Wow, beautiful. And you know I’m very much into wheels. Should think about how I could use this for my digital volvelles project.

• Hi, it’s great to see a project that relates to the actual physical world of atoms instead of just electrons!

I’m looking at a project that involves moirĂ© patterns, so I’m curious about the tolerances you can get from your acrylic cutouts. For instance, if you specify a 1mm diameter hole, what size of hole do you expect to get in the final wheel? Between 0.9 and 1.1mm? Between 0.99 and 1.01mm? Between 0.999 and 1.001mm?

A pointer to your lasercutting people would be good if you don’t have this sort of information at your fingertips. :-)

• Hello,

I adapted some of your code to propagate a compositional idea I’ve been working on, it works great and I am very happy.

Wondering if you used additional processing code to bring together the individual pdf files and lay them out like you’ve shown here and on your tumblr? Would love to see it if you did, much thanks!

Cheers,

Greg

• Hey, nothing special there, I just used the contact sheet feature in photoshop to do those collections… would love to see what you’ve come up with though! Care to share?