Every year, I love to check out all the Christmas light displays that every day people put their hearts into to display their Christmas spirit. In recent years, videos of Christmas lights animated to musical accompaniment have been popping up on YouTube. Some are fun and others can only be described as artistic genius. This year, my wife and I happened upon a house that featured, among other things, Christmas lights that jumped and danced in time with the music. While I had a general idea of how it was done, I decided to dig a little deeper and share some of what I learned with you. I also created a video containing a mix of these musical lights to give you a better idea of what I’m talking about. Watch the video below and then we’ll get into how it’s done.
How To Program Christmas Lights To Music
Getting your lights to dance to pre-determined music is pretty simple in concept, but will take some amount of learning for anyone new to it and a lot of time for just about anyone. That may sound discouraging, but the end result may well be worth all the trouble. Not only will you have the feeling of accomplishing something pretty cool, but you’ll have the coolest decorated house on the block and perhaps even a YouTube hit like the Skrillex Equinox display that was viewed over a million times in under three weeks.
Before you dive in and create your masterpiece, you’ll need a general idea of what’s involved. First, you’ll need to have some hardware and software to make the magic happen. The hardware (controller, etc.) will connect your lights to the computer that will run the show and the software will allow you to program the lights to react to music how you want them to. Software won’t be a problem for your budget, but hardware can cost anywhere from around $160 for 32 channels and more of a DIY, hands-on approach up to $1,200 or more for 64 channels and a lot less work. If you’re comfortable with soldering, you can spend less and do a lot of the work, but if you’re not, expect to pay a lot more for pre-built hardware. In addition to the hardware, you should be prepared to spend money on lights if you don’t have them already. The days right after Christmas usually reveal lots of great sales (that’s when I buy wrapping paper and accessories, too). And don’t forget your soon-to-be-bloated electric bill.
To get it all working, you just need to :
- Check with neighbors first
- Get your hardware and software (including lights)
- Design your display and plan what you want
- Program your show (get ready to spend a lot of time here)
- Test
- Let people know
Along with all the work involved, you’ll want to plan some things ahead. The last thing you want to do is spend months putting together the perfect Christmas light musical performance only to have something unforeseen prevent it from being displayed. Before you start, check with your neighbors and agree on reasonable start and stop times and dates. Check for any local laws, ordinances, or HOA rules that such a project my be in violation of. Plan your expenses before you buy anything and avoid fire and other hazards by talking to electricians or other experts. Planning ahead may save you a ton of headaches down the road.
When you’re all done, showcase your completed project in style. Collaborate with a local video company to create a professional-looking video and don’t stop at YouTube. Send it to local TV stations and related blogs. A viral video could help offset your December electrical bill.
As always, if you embark on this adventure, share your project here in the comments.
There are a lot of flat, boring web sites out there, but there are also a lot that are interactive and sometimes even include fun little surprises. Today, I’m going to show you one way to create a fun little interactive surprise in your web page design. David, a regular reader, pointed me to this page and asked how they accomplished the effect with the footer image that changes (click the link and watch the bottom of the page while scrolling down slowly). The effect is what I tried to illustrate below.
Pretty cool, right? The best part is that this is super easy to achieve. Below, I’ll walk you through a few easy steps I completed to create my own interactive background.
Step 1: Create your images
To make this trick really work you want at least two images. The first is a two-toned image that represents the before and after imagery. For my example, I used grey on top and black on bottom. The second image is the gradient that creates the illusion. The gradient should fade in from the same top color to the same bottom color as your before/after image. Try to make both images close to the same height, but experiment with the positions of your artwork. Also, this works better if the two pieces of artwork don’t overlap each other. Just as important is the format. GIF files may work, but generally, PNG images are best.
Step 2: Create HTML
The HTML is really very simple. Inside your body tag, you want a div element with a class of “wrapper” and inside this, another div element with a class of “push”. Below those, you need a div element with a class of “footer”. You can use different names, as long as they match the CSS when you’re done. Be sure to fill up the “wrapper” div with enough content to make the visitor scroll.
Here’s my HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>
<body bgcolor="404143" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<div class="wrapper">
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<div class="push"></div>
</div>
<div class="footer">
<br><br><br><br><br><br><br>
</div>
</body>
</html>
Step 3: Create your CSS
The final step is to create your CSS. This can be inside your HTML page or in its own .css file that the page loads. Either way, set up the CSS for the body and each div element you created as seen below. Of course, the height and margin values may be different for your usage.
body {
background-image: url(./twotone.png), url(./bottom.png);
background-repeat: no-repeat, repeat-x;
background-position: center bottom, center bottom;
background-attachment: fixed, scroll;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -152px; /* the bottom margin is the negative value of the footer's height */
}
.push {
height: 50px;
}
.footer {
height: 320px;
clear: both;
link: #ffffff;
background-image: url(./footer-skulls.png)
}
With the third step done, the only thing left to do is check it in a browser and adjust as needed. Here’s the rough example I threw together here . I didn’t spend a lot of time on it, but for my example, I created a before/after image using a circuit diagram I found online and a one-color version of my logo. I also kept the skulls image for my demo because I liked it.
Quick Start Kit
I breezed through the steps a little, but it shouldn’t be too hard to accomplish if you have some knowledge of web page development. In any case, the easiest way to try this out is to create a new before/after image and play with what I’ve already done. For this reason, I packaged up the code, images, and a layerd PSD of my before/after image to get you started. Try it out for yourself and if you put it online, link to it in the comments so we can see.
Have you ever wanted a car that none of your friends have? How about one that you helped design and build and is super rare? A car company by the name of Local Motors has combined web technology and real-world micro factories to provide us with the most interactive and unique car buying experience I’ve seen and they invited me to tour the Arizona micro factory and talk about how it all works.
The car shown above is LM’s Rally Fighter, the first in what Local Motors hopes will be a growing line of kick-ass cars that turn heads.
Design Your Dream Car Online
When asked, most people can tell you, without much hesitation, what their dream car is. Mine’s a Ferrari F430, but I have always loved the concept cars I see at the auto shows every year. Unfortunately, most of the concept cars remain just that… concepts. This is where Local Motors has found a niche.
Rather than creating concepts and never building anything, Local Motors decided to open the game up to the public to come up with the next winning car design. You start by joining the Local Motors website and if you’re creative enough, you can submit your own original car design. From the submitted designs, the community votes on what should be built. The most popular ideas then move on to co-creation, where the community helps decide the body, interior details, etc. Together, the community of site members design an awesome car from the ground up.
Even if you don’t plan to buy one, there’s plenty of incentive to join in and contribute. Local Motors hosts design contests in which the winners can win prizes or cash amounts up to $20,000, which is a great start towards buying the car you design or can just pay some bills.
Own One
When Local Motors decides to build one of the community designed cars, they begin accepting reservations. A reservation requires a $1,000 deposit, and gets your name on a list of future owners. When it’s your turn, you give them another deposit, this one for $5,000, to lock down your build date, and the remaining balance is due when you arrive to start building. After the two weekends of building, you get to take your car home with you.
At the time of this writing, the Rally Fighter, the first car available from Local Motors, is priced around $60,000, but I’m told this may go up with a move to higher-end parts being included next year. The cost, well above your standard sedan, buys you a car that looks like no other and is limited to only 2,000 built. To make your car even more unique, you’re encouraged to design a custom skin for your car. This can be accomplished solo or with the help of a Local Motors designer. This car is for the collector or enthusiast who wants something truly unique.
Get Your Hands Dirty
For some, the experience is pretty much complete at the time of purchase. For others, a big part of the experience is building the car yourself. While you don’t have to spend weeks painstakingly sweating over every little nut and bolt or even weld, part of your purchase is the experience of the build, itself. Over two three-day weekends and with the assistance of a builder, you put it all together in a Local Motors micro factory.
Local Motors provides a cafeteria, RV parking, the space, parts, and tools, and all you bring is some elbow grease and a desire to be immersed in the process. They encourage you to bring a friend, too, to help build and join in the experience.
From the outside, it looks like just a big warehouse with a car painted on the side, but inside is a well-lit, air-conditioned shop with all the tools and tech needed to get the job done. In addition to the human help, there’s also a couple large screens connected to computers with a specialized wiki detailing every step for your particular car.
Conclusions
As huge as the Rally Fighter is, it’s not very practical, but would make a great toy. The next car, I’m told, will be an electric vehicle, and I’m hoping it will be based on the Miami Roadster. For the auto enthusiast, this is a great package and unique experience, but the cost will leave the rest of us designing.
Sculpteo provided this demonstration sample for me to keep at no cost to aid in my honest review of their product and service.
Over the years, I’ve seen a lot of talk about 3D printing. I’ve seen examples from the plainest of plain to really cool product prototypes printed on 3D printers, but I’ve never tried any of the companies that offer 3D printing… until now. As a demonstration of what they can do, online 3D printing company, Sculpteo created a miniature sculpture of me using just a couple photos I had my wife take in our hallway.
Not bad, huh? If the reaction I got on Facebook is any indicator, this mini-me was a home run, but I’ll bet what you really want to know is how to get one and how much it costs. Keep reading.
How To Print In 3D
There are several ways to print in 3D with Sculpteo. The one I’m most familiar with, of course, is the method I used. Just take a forward facing photo and a profile and upload them. Include any notes you have about your design, approve the 3D render they create for you, and wait about 10 days. If you want a mini sculpture of yourself (or one of someone else as a gift), this is a good way to get it done with no fuss. They even picked up on the JoeTech shirt I was wearing and my sculpture’s shirt says JOETECH on it in teeny tiny letters. Great detail. Below is an example of the photos I sent in and the results.
Other methods of printing from Sculpteo can vary quite a bit. You can sift through their gallery of models online and pick something out for the easiest route or you can create your own 3D models or buy one online to use and have something much more personal. Along the way, you can also choose materials and opt for a plain white sculpture or lots of color, and even customize the size. The web interface is done very well, so it’s easy to choose. The only problem I had was that as I’m not experienced in 3D printing, I was, at first, a little confused about what materials I had to choose from.
How Much Does 3D Printing Cost
The figure I got was 2.8 inches tall (7cm) and would have cost me $74.89. A larger version standing 3.9 inches tall (10cm) would have run me $129.90. Bulk orders get discounts. 10 units took my price (for the smaller figure) from $74.89 down to about $67.40 each. 100 units came out to just under $60 each and that price seemed constant even at 1,000 units.
That might be a little much for a casual birthday or Christmas gift, so I poked around the site and played with the pricing and design tools to see what other pricing was possible. I picked out a Manga Girl design and found that the pricing could go anywhere from just $3.66 for a one inch tall model with or without color all the way up to $1,133 for a color 12 inch model ($900 for no color). Interestingly, you can have that same model printed at a tenth of the price of the 12 inch size by just dropping down to 4 inches tall. When building your own model, definitely play with the size and any other options to get the most for your money.
Free Key Ring
I found out about this Free key ring offer while browsing around the site. You have to pay for the shipping, but it will still be pretty cool to get a free key ring, printed in 3D from any model I want to upload. I loaded up one of the 3D models from the gallery and got it all linked up, although I must say that the process of trying to link the key ring to the 3D model I chose was a confusing and tedious chore. I’m still not sure how it works, but it may be child’s play to someone who works with 3D models all the time. In any case, $6 shipping paid via PayPal has my otherwise free key ring on its way.
Conclusions
Other than my inability to work well with 3D models, the user experience of the site was really pretty good and the shipping time is decent. The costs can be super cheap to just scary and anywhere in between, so figuring out your size and budget should happen probably even before building your 3D model. The free key ring is a great way to get your hands on some sample product before spending money, too. From cool little gifts to professional prototyping, Sculpteo’s printing range should fit most needs.
