The other day, Noah wrote a blog post about getting javascript into a textile blog using the “notextile” tag. This is my little test to see if I could get that working. If you’re not seeing anything besides about 500 pixel of white space, that means that it’s not working for you. If you do see some spider webs, congrats it works.
Disclaimer: This javascript sketch is using the html canvas tag, so that probably why you’re not seeing anything.
on December 06, 2011 at 05:05 PM
filed under: Processing
A few months ago, I started having this little fascination with spider webs. I was just wondering how they work and how they were built. At the same time, I befriended a little spider that made its home on the driver’s side mirror on my car, called Charlie. Charlie was great and he hung around for a few weeks and taught me a good bit about spider webs. For one thing, they’re very strong. Each strand that’s created is reinforced by the next strand. Sometimes strands double up. Sometimes he even misses a connection. Sometimes he creates this y-shaped connection. Unfortunately Charlie is dead. Or he ran away.
To show what I learned, I started this little processing sketch to just see if I could make a simple spider web. The math for making some sort of simple perfect spider web isn’t hard, but it’s also not that interesting to look at either. As perfect as some spiderwebs look, there is a actually a lot of variation to them. They are an example of what a lot of generative artists always look to replicate from nature, the balance between the predictable and the random.
Once I got the web working in processing, I had an idea to use my webs in the context of an html site, which meant I would have to move it to Javascript. I’ve kind of avoided javascript for a while, but more recently wanted to explore it a bit, so this served as the perfect first javascript project. I originally started by just exporting the processing sketch as a processing js sketch. It didn’t wuite work since I was using the toxiclibs library for the physics environment. Even if it did work as I thought it should, I feel like it would have been cheating. So instead, I went through some javascript canvas tutorials by Keith Peters and restructured the project as pure javascript. I still ended up using processing js for the canvas drawing and I also ended up finding a version toxiclibs that was ported to javascript. The major difference with that was that I had to target the specific toxi namepsace when using any part of the toxiclibs library. No biggie.
Go here and play with it a bit. It’s not perfect, but I’ve got some other things I want to explore and need to move on. I don’t plan on abandoning it altogether though. I’d like to go in and add some dimension to it and bring it into the more efficient 3d environment of webgl. Also, I’d like to explore and push the webs farther in a more interesting direction visually. It’s also begging to have some more interactivity brought to it. Hopefully this will end up making it into some other project in the future.
As a disclaimer, I’m not much of a web front end kind of guy. I’ve from the world of flash and just like to make pretty looking stuff. From what I’ve found, this is slow as hell in firefox, but plays reasonably well in chrome. Let me know if you have any comments on how to improve this. All comments are welcome. I think. Originally posted at http://www.thegrego.com/2011/12/06/charlies-web/
on September 25, 2011 at 10:15 PM
filed under: Processing
Kepler Family Life Spans is my first original data visualization using processing. Since the summer, I’ve been more interested in processing as a tool, data visualizations and generative art as well as my own genealogical history. So naturally, I wanted to figure out some way to visualize some of my family data. This project enables you to select a year starting with the earliest birth year that I have for my ancestors that I have a birth date and death date for. For each year, you can see the average life span for my family at that point all the way up to 2011. When a person dies, their representation goes red and stops progressing in age.
With this little project, my goals were to learn how to integrate data into processing, use the geni.com API to grab my genealogical data, and create something that was visually interesting. Because I was concentrating so much on the data aspect, it ended up not being as visually interesting as I planned on, but now I’m better equipped with the “how”, so that next time, I can concentrate on the cool factor a bit more.
As for the some interesting conclusions that I’ve come to, you can see the expected rise in average life span, thank goodness. In fact, the oldest person that has passed away was this year, with my grandmother at 96 years old. Also in the recent years, I thought it was interesting to see a 10 year gap in new babies, where with a family where I have cousins almost as old as my parents and as young as their mid 20s, I thought that there would be a baby born every year or two. Of course this data probably isn’t all that interesting to anyone outside of my family, so that brings me to what I plan on doing from here.
Since this data comes from what I’ve included in my geni.com account, I plan on making my work public so that other people can plug in their geni credentials so that they can come to their own conclusions. And with that, I will also need to make a javascript version or app so that people can actually use it. I also hope to figure out ways to improve on this and keep it updated as well as continue exploring how to visualize this data in interesting ways. I’m sure that there are more fun and interesting conclusions that can be found from this data too.
In the next post, I’ll go into what went into making this and what I learned from the process.
So you know how TBG is known for creating cool stuff for the internet? Well did you know that sometimes we also make cool stuff not for the internet but FROM the internet?
Enter a fun little project we just completed, stationed at the Hudson Hotel in NYC…
For New York’s Spring 2012 Fashion Week, Morgans Hotel Group wanted to change up what they normally do in Hudson Hall, their dining hall that looks over 57th Street on one side and into their ivy covered Private Park on another. Instead of the showing the usual music videos and sporting events, they wanted to fill the space with something that was relevant to the fashionistas and fashion bloggers that would be hanging in the hall during their stay for the event. As soon as we saw the space, with walls are composed of a continuous Mondrian-esque mosaic of frames, we knew what we wanted to do. It served as a perfect canvas for displaying real-time images and quotes from popular fashion week blogs, and a perfect way to showcase Morgans’ partnership with Tumblr.
Using Tumblr’s API to pull text and images, and Flash to display it all, we created a series of files that can be matched up with the existing projection system. The content prior to the installation took up large areas on the walls of the hall, but our designs aimed to use the beauty of the frame compositions to fit the content perfectly inside each and every frame. The design is displayed in blocks of text, images and patterns that mimic Morgans’ branding to keep it looking fresh and modern, and to keep the walls ever-changing, the content is refreshed through transitions while the installation updates with new text and images as they are entered into Tumblr.
Morgans liked the idea so much that they asked us to find a way to have it live beyond Fashion Week, so we made the design diverse enough to work with other special events or everyday happenings that they might want to showcase.
The installation is now live and can be seen during dining hours. So next time you’re in the Hudson Hotel, head down to Hudson Hall, grab some food and enjoy the installation.
The Hudson Hotel is located at 356 West 58th Street (at 9th Ave) in NYC.
I’m proud to announce the release of The Barbarian Group’s first android app, Gastrodamus. This of course is the Android version of the food truck tracking iPhone app that was released last month. It has all of the same features and food trucks that the iPhone version has, but now works on your Android 2.1+ devices.
Have you ever completed a flash project and started testing it online only to realize that the swf is looking for assets either in a different directory than the one you specified? Or that the folder that you have all your media stored is not in a relative directory like it was when working on it locally? There’s an easy solution that can be implemented without messing with any actionscript code.
I’ve found that with more channels and more “stuff” crammed into our TV’s that it’s getting more annoying to perform the simple acting of just watching TV. Even though there is a ton of innovation happening, I think think that there is a lot that can be learned from what the innovators in the interactive industry are doing that would make it all even better, afterall TV is an interactive experience now.
The real problem isn’t the actual TVs, it’s the user experience that comes with it, which of course comes from the content providers. No one has really figured out how best to get us the content that we want in as efficient a way as we want/need it.
on July 28, 2010 at 09:14 AM
filed under: Photography
I forget that real life wasn’t actually in Black and White back then.
These images, by photographers of the Farm Security Administration/Office of War Information, are some of the only color photographs taken of the effects of the Depression on America’s rural and small town populations. The photographs are the property of the Library of Congress and were included in a 2006 exhibit Bound for Glory: America in Color.