This is adapted from a recent talk at CASCADE Boston, a CSS and front-end design meetup we host. Come to the next one!
We’re always looking for new and exciting ways to define and communicate an aesthetic, and that recently led us to play with some web-connected hardware and create a series of experiments. One of the tenets of our design practice is looking at design in a systematic way. Instead of a one-off decision or input (make it blue, just because!) we look to make smart design choices that are embedded in a system with a logic. This works well for informational structures like content and data as well as its presentation. But how do you define a system that responds in unexpected and surprising ways while still obeying the logic of a system?
We’ve got a saying in New England: if you don’t like the weather, wait five minutes. Our atmospheres, both natural and man-made provide a rich layer of inputs to draw upon, they’re unexpected and ever-changing but also logical and systematic. They give us a sense of context that we’re often lacking in a digital environment (it’s warm, it’s dark, it’s loud!).
With the idea of turning the temperature, light level or even human-based inputs into digital stimulus, I breadboarded a series of simple experiments with the Particle Photon hardware platform. A note about the hardware: it’s really fun and easy. If you’ve ever goofed around with Arduino stuff, you’ll be right at home. The extra step of getting the data on the Web in a usable format is done for you. It’s got a wifi radio and a built-in protocol for posting data to an API. You can get this data out via JSON and do all kinds of stuff with it.
The following experiments are fairly simplistic, but as a starting point for some fun ideas and inspiration, I think they’re great. Read on for videos of the experiments as well as links to CodePens so you can try it at home!
The Temperature
This sketch uses the Dallas Temperature DS18B20 probe and communicates with the Photon via I2C. So you have to use an extra library and jump through a couple hoops to get the device ID and such, but it works really well. Here I am dunking it in ice water and shrinking a box.
Fiddle a knob!
I had some potentiometers laying around and those are always fun to play with as analog inputs. This is one of the simplest sketches, just reading the value of the 2K ohm pot and wiping a color across the screen.
Light Level
Light level was one of the first sketches I did, simply hooking up a photoresistor and doing an analog read of its value. This one is really fun, especially interacting with the hue of a background in HSL colorspace.
This was a pretty fun project to play around with for a number of reasons, look for some of these ideas to make it into an upcoming client project. And if you make or have made anything with one, let us know!
Thanks to Gene Buonaccorsi.
