Category Archives: Design - Page 2

New band lineup baby announcement

My wife Ester and I are expecting and since we’re both musicians we grabbed our guitars and did a fun photoshoot to announce our good news. Inspired by this creative announcement we came across.

Maker Wedding: Animated HTML / jQuery wedding site


One of the projects I took on for our wedding was our official wedding website, I registered two domains, esterandphil.com as well as philandester.com thus avoiding any confusion. Both site pointed to the same page, for the general public a simple splash with a dynamic forest animation accomplished with the help of jQuery.

We wanted to create a page that connected with our venue which was in a barn on a conservation area. I’ve always enjoyed sine path algorithms so I created a scene where silhouetted trees scroll slowly by in a parallax-esc fashion and fuzzy Will-o’-the-wisp dots float lazily upward on sine waves. Randomly the wisps will be replaced with rain and visiting the site during the day versus during the night will result in different colours and songs.

The trees are selected randomly from one of six or seven images which then have a random amount of transparency and speed applied so that some seem further in the distance. Once they disappear off of one side they are recycled, animating in from the starting side again. Similarly the wisps have random factors applied to their size, speed, sine curve and alpha. The wisps are also interspersed on the z-axis to move in front of some trees while behind others adding to the illusion of depth. The wisps are also recycled once they’ve floated out of view.

On the live site I adjust the parameters for some popular clients, such as iOS for which I disabled animation and reduced the number of trees and wisps.

Inaccessible to the public is a guest site which used the splash page concept as a background with only the a couple of wisps animating with static trees (still randomly generated).

While this exact example is probably not portable verbatim you may find the method libraries I used as well as the technique useful. I have outlined some of the initializer functions below and linked to the libraries, some of which I have modified. The final library, animate.js, is almost completely custom code for this site and thus would have to be altered to suit your needs.

Will-o’-the-wisp Initialize

window.numberOfDots = 50;

for(i=0;i<window.numberOfDots;i++)
  window.dots.push(new dot(i));

Forest Initialize

window.numberOfTrees = 15;

for(i=0;i<window.numberOfTrees;i++)
  window.trees.push(new tree(i,'http://philandester.com/'));

Rain Initialize

var raincolor = '#fff';

new Rain('canvas', {
    speed: 500,
    angle: 20,
    intensity: 5,
    size: 10,
    color: raincolor
  });

Main Loop Start

setInterval(function(){sine()}, 25);

Raphael 1.5.2 – JavaScript Vector Library, MIT License (http://raphaeljs.com/)
http://philandester.com/rain.js

Andrew J. Peterson, NDP Software, MIT License (http://blog.ndpsoftware.com/)
http://philandester.com/colorfactory.js

Custom JavaScript Animation Library
http://philandester.com/animate.js

DIY reclaimed lumber hanging Edison bulb chandelier

This DIY reclaimed lumber chandelier with hanging Edison bulbs is easy and quite self-explanatory, though I will explain somewhat. Here’s what you’ll need,

Parts for Fixture

  • piece of lumber
  • 2x lengths of chain
  • 4x open/close chain links, to affix the chain to the eyelets you’ll screw to the board
  • 4x screw eyelets, to secure the chain to the lumber
  • 2x screw hooks, to hook the chain to the ceiling *screwed into solid wood joists
  • one or more junction boxes depending on the size of the wood
  • one or more hanging lights, cord, socket, bulb (see below)
  • a cover for the ceiling junction box plastic or otherwise, you may have to cut a notch for the power cable

Parts for Lights

Once you’ve selected your lumber, drill a hole for each light cord. I started with a spacious zig-zag pattern but it’s whatever you like really. Affix junction boxes to the top-side of the lumber and wire the lights into them. Screw an eyelet into each corner of the top-side of the lumber, at least an inch in from any side.

If the lumber is extra heavy you could consider another length of chain and place two more eyelets to support a chain in the center. If ceiling joist placements allows you could also use four lengths of chain straight up to four hooks instead of the swing system I employed.

Screw the hooks firmly into ceiling joists, hang the fixture and wire whichever junction box is closest into the ceiling electrical. If possible the power cable would be less noticeable if it snaked to the ceiling along one of the support chains.

Once hung you can adjust the heights of the hanging bulbs and coil the extra cable on top, it’s not coiled very neatly in some of these pictures but I have since remedied that. There you have it.

If you’re interested in other Edison-style lighting ideas check out DIY steampunk-style iron pipe Edison fixture and the reason I have so many Edison bulbs kicking around, Maker Wedding: Rustic Edison-style hanging light fixtures.

DIY steampunk-style iron pipe Edison fixture

I’ve been seeing these types of steampunk black malleable iron on the net for years; it was only a matter of time before I went and made one. The texture of the iron combined with the warm vacuum-tube glow is quite an amazing effect, and they certainly look easy to make. Previous trips to the hardware store had only resulted in the question of what socket will fit into these types of pipes? I found myself with some spare time this past Saturday, so I went to the local hardware store and laid out 15 or 20 iron gas pipe fittings in the aisle and designed a 4-bulb fixture — roughly designed that is.

While designing the fixture be careful not to screw the fittings together too tightly as they can bind, also keep in mind these fittings will turn your hands black and the sharp threads can easily shred your hands if you slip. This being my first attempt I kept it relatively simple, keep in mind that you will have to thread wiring through all the bends and turns at some point.

I used the largest malleable iron piping I found, which had an inner diameter of 1 inch on the female threaded sections. I then purchased some basic keyless (no switch) brass sockets. These did not fit in the pipes, though I didn’t mind the look of the brass sockets extending from the fixture so I started with that.

The rounded base of the sockets became a problem as when they were wired and threaded into the fixture they lolled this way or that rather than extending straight from the fitting. I tried bulking up the base of the sockets with electrical tape, but they still slipped. I then tried removing the rounded bottom section yet the upper brass part was still too large in diameter to fit in the pipe.

Then I discarded everything but the bare socket with its bakelite base, the middle portion in the exploded image below (not the exact socket, but very similar). These almost fit, I had to crack/shave/cut off some protrusions from the bakelite base. Discarding the brass and cardboard meant that the socket had no protection or isolation for the wiring leads, for this reason I wrapped the hot lead with some electrical tape to isolate it and then ran one wrap of electrical tape around the entire socket. This extra bulk meant I had to twist and fiddle but they still fit in the pipe. If you fiddle so much that you think the electrical tape may have shredded, take it out, replace the tape and start again. It’s better to be safe.

Even though the sockets had no ground lead it was important when wiring be sure to wire all sockets in the same fashion and keep track of which wire is hot as they will all be combined at some point and you don’t want to short the wrong lead to the iron fixture structure.

While threading wire through the fixture you can unscrew fittings but be careful not to twist the wiring too much inside around elbows.

With the sockets wired and the wiring threaded through the fixture the next step was mounting it to the ceiling or wall. The wall mount fitting, pictured right, is not large enough to cover a junction box. For this reason I used a white plastic cover, however screwing the wall mount fitting to the plastic cover would not be strong enough to support the fixture (iron is heavy).

Another problem was that the wall mount fitting’s screw holes would block the plastic cover’s screw holes. I decided to use a steel junction box cover on top of the plastic cover to support the fixture. I drilled a center hole in both covers, two holes to line up with two of the iron mount’s screw holes and ensured that one of the remaining two screw holes in the iron mount fitting lined up with one of the plastic cover’s screw holes. This meant that the iron fitting would not be centered on the plastic cover, but it did allow access to both of the plastic cover’s screws even after the iron fitting was secured.

In this manner the iron fitting could be bolted to the steel cover, through the plastic cover and still allow access to the plastic cover’s screw holes in order to affix the entire assembly to the junction box.

The photo above shows the steel cover which has been drilled, in this photo the white plastic cover has not had the center hole drilled for the wires yet. I’m confident this system would have worked with a full sized junction box, however once I removed the old fixture I realized my desired location had an old-style smaller junction box and this system wasn’t going to work.

As it turns out, mounting to an old-style smaller junction box is even easier as the two junction box mounting bolts do line up with the iron fitting and therefore there wasn’t a need for the steel plate after-all. I put bolts right through the iron mount fitting, the white plastic cover and into the junction box, which allowed the junction box to directly support the weight of the fixture.

If you’re confident wiring fixtures, outlets, sockets and such this should be right in your comfort zone — if not perhaps enlist a friend who is to help out.

If you’re interested in other Edison-style lighting ideas check out DIY reclaimed lumber hanging Edison bulb chandelier and the reason I have so many Edison bulbs kicking around, Maker Wedding: Rustic Edison-style hanging light fixtures.

A Maker Wedding

Initially I wasn’t sure how much our wedding was truly going to represent my fiancée and I, after all, we wanted our family and friends to enjoy themselves and feel included — as with any large event there are a lot of expectations to manage. After deciding to craft my own Edison-style light fixtures for our reception I realized that the occasion was, in addition to a celebration of our life-long commitment to each other, an opportunity for us to showcase our creativity and perhaps introduce some of our family and friends to aspects of ourselves they may not have known existed.

In retrospect we probably took on too much, but it allowed us to feel the occasion was a true reflection of ourselves — for me this meant soldering, stripping, crimping, twisting, programming and no small amount of brow furrowing. None of these projects could’ve come together without the help of my wonderful wife Ester, who not only said yes, but also collaborated throughout and trusted me to deliver on some very important aspects of our big day. In addition, a big thanks to my dear old Dad who took time to help me with the lengthy task of wiring the Edison fixtures and to the friends and family who helped us setup and teardown these, and other installations.

Animated Arduino LED matrix lounge table top

Vinyl “flexi” record wedding invitations

XBee remote relay as photobooth RF camera trigger

Bachelor party wireless Arduino accelerometer Stab-O-Meter

JQuery Animated Wedding Website


Various puppet arms available at Obscura Antiques & Oddities, New York