3d bitmap letters

IMG_0055
the finished product

I made a 3d bitmap word for my dad for his birthday. This will show you how to make your own. The process isn’t difficult but there are a few things you can do to make it easier.

Planning

IMG_0054First, choose a word you want to make a 3d bitmap version of. Write it out the way you would like it to appear, using a big fat marker (of a color you can easily see through) on graph paper. Use a pencil to fill in the squares which will actually become the boxes. Count the squares; this is how many cubes you will need to create. Add squares here and there if you think there might be areas which will end up being not that sturdy.

This is all quicker than using a graphic program to make a bitmapped word.

Set-up

Now that you know how many cubes to cut out, decide how big you want the finished product to be. Here is a cube template you should easily be able to resize to whatever you want. Keep in mind that only using 3 letters and a 1 inch cube my finished product was 34 inches wide.

Construction

I found it easiest to glue up columns first, then glue the columns together.

Gluing the columns together first allows a little dry time which makes the columns a little more sturdy when pressing into the rest of the sculpture.

The Finished Product

IMG_0056
3-d bitmapped word

You may want to glue the finished product to a board. When I presented mine, I snuck it into my parents’ house and put this on the dining room table for extra wow effect.

how to make a rectangular tessellation using inkscape

repeated pattern example
example of a tessellation
This is a step-by-step explanation of how to create a pattern which repeats infinitely on a plane using a rectangular grid. I use Inkscape in this explanation, but the principles apply to any program (or manual creation, which is also a lot of fun). This works best with line drawings.

If you’re not familiar with what makes a pattern tessellate as opposed to repeat, think in terms of Pac-Man; when you go far enough to the right side, you come out the left side.


step 1

repeated pattern example screenshot 1Start out with a new document. Any dimensions will work. For this example I created a ⅛″ grid on a 2″ square document.


step 2

repeated pattern example screenshot 2Draw some objects. The more they break the boundaries of the canvas the better.


step 3

repeated pattern example screenshot 3Draw a rectangle the same size as you canvas. You might want to make it a different color if your design is complex.


step 4

repeated pattern example screenshot 4

  1. make sure you have snap to grid on
  2. select all
  3. group
  4. copy & paste dragging rectangle created in previous step to all edges and corners of canvas (for a total of 8 pastes)

You should now have 9 copies of your original drawing in a 3 × 3 grid. If your drawing is opaque, some of the repetition will be obscured. Reduce the opacity of your original drawing to, say, 50% and start over.


step 5

repeated pattern example screenshot 5

  1. draw another rectangle outlining your canvas
  2. cut it
  3. select all
  4. group
  5. paste in place
  6. select the group you just created, then the rectangle you just pasted
  7. set clip (object > clip > set)

Now your tessellation is ready to be repeated.
Note: If your original drawing is more than 2× the width and / or height of your canvas, you will need to paste your drawing additional times in step 4. I think these are the interesting tessellations because you have to see the pattern repeated many times in order to see the original design.

time-based HSB color values

My interest in time-based color values came from reading about the concept of chromo°. Picking a point from the HSB color model proved more complicated than I originally thought. Ben Bryant helped me do the hard math parts to figure this one out, so special thanks to him.



Above is a working JavaScript sample of an equation to obtain color values from the HSB color model based on time units.
Below is the equation in general terms. View this page’s source for the exact code, which also converts the colors to hexadecimal values.

(round(max(min(abs(767*((($degree+0) % 360)-180)/180)-256,255),0),0))*256*256+
(round(max(min(abs(767*((($degree+120) % 360)-180)/180)-256,255),0),0))*256+
round(max(min(abs(767*((($degree+240) % 360)-180)/180)-256,255),0),0),6)

$degree is the percentage of time unit (divided by half of the total units to offset the difference [by 180°] between chromo° angles and HSB values).