JS1K 2012 Entry – Heart Strings

Spider Web heart

I submitted my first ever JS1K competition entry. Really, my first javascript or any kind of programing contest entry. And I’ll admit that it was quite a challenge too. It was like a putting together a jigsaw puzzle that you have extra pieces to. For my entry,  I decided to take something that I worked on previously and rework it into something that fit the theme and into the 1024 byte limit. The theme for this year was love, so what I did was reworked the spider webs explorations that I had previously worked on into a heart shape and simplified it a bit. I also stripped out anything that wasn’t pure javascript. In the process, I was able to reduce my demo from 25K (not including the processing and toxiclibs js libraries) down to 1022 bytes.

Read More

Adventures in Bey Bey Name Generating

I had the pleasure of working with my wife on a project for the first time this week. It was only about a day’s worth of work, but so far it’s been the most viral thing I’ve ever been a part of. And also had the quickest visitor drop off due to it’s timely nature.

The project was the Bey Bey Name Generator (beybeyname.com). It’s a simple little web app that was inspired by Jay Z and Beyonce giving their new baby the ridiculous name of Blue Ivy. My wife heard this and said to me almost immediately that we should make a website that lets you come up with your own name using the same equation of Color + Plant = Silly Ass baby name.I found some spare time to design and code it and threw it online. It’s crazy how simple the concept and execution was and how people seemed to really dig it.
beybeyname.com screenshot

In the 3 days since we let it loose, it’s generated 27,000+ views, mostly coming from facebook, twitter, the huffington post, and hlntv.com. While it was taking off, I kept my eyes on the live google analytics stuff to see where it was blowing at the time. I suggest anyone that’s launching a site to check that out. It’s actually really cool (if you find graphs and statistics and that sort of thing cool). But my favorite part of the whole thing was when Beavis and Butthead tweeted about it.

I don’t plan on doing any other of these quick little projects anytime soon, but if the moment arrives, I’ve learned that you just have to run with it before it’s old news.

2011 Work in Review

2011 was an interesting year for me professionally. It was my first one where I was employed for all 12 months by The Barbarian Group. There was minimal freelance work and the stuff that I did do was chosen very carefully. This year was devoted to learning a lot of new things. The reasons for that are:

  1. I am primarily a flash developer and there are fewer projects for me to work on
  2. There are so many other exciting things to also learn and I’d hate to pidgeonhole myself into only being able to work on one type of project
  3. Mobile has been exploding and I wanted a piece of it
  4. Learning is funsies. For real. I like to learn knew things and the more I learn, the more I want to learn and the better I get at the things I already know

Let me just explain real quick about the first point. I just want to put it out there that I still love flash. I think that it’s still a viable platform for many things, unfortunately it’s a matter of fact that there’s fewer and fewer projects that require it. That being said, I’m not bitter about it. There’s so many other things that can be done that it just doesn’t matter if you were a flash dev, unless you think it does. I’ve started learning so many other things that have built on my flash knowledge that I’m not really worried that it was a waste of the previous years that I spent using it.

Here’s a summary of the different kind of work I’ve done throughout 2011. Before I continue, I just want to acknowledge all of the awesome people that made a lot of these projects possible and helped me learn a lot of what I learned. TBG has some fine ass developers, designers, producers, strategies, UX people, etc, etc, etc.

At The Barbarian Group, the first few months of the year was spent concentrating on developing a flash app for Kashi, dubbed SevenWhole Grains on a Mission. It was a nice little project that had some fun after effects video transitions and incorporated swfaddress significantly. As a warning, the current version of the project might not work as well as it once did since the site was handed over to another company. It still looks pretty though.
Link: http://www.kashi.com/meet_us/seven_whole_grains
Blog post: http://barbariangroup.com/posts/7827-kashi_seven_whole_grains_on_a_mission

In the spring and early summer decided to take a crack at learning android development and  created my first android app, Gastrodamus. It was an internal project for TBG whose main purpose is to find the nearest food truck in your city based on a truck’s tweets. There is also an iPhone version that this based off of. It was a fun little project and I learned a ton. The Java syntax and ways of doing things helped a lot with some of the processing work I did later on in the year. I’ll admit that it’s not perfect, but I hope to go in and do an update in 2012.
Link: http://gastrodam.us
Blog post: http://barbariangroup.com/posts/8856-gastrodamus_for_android

Throughout the year, I worked on a website for my mom. It’s a wordpress site that was designed and developed by myself in addition to designing her logo. I’ll admit, I haven’t done interface or logo design in a long time, so it was a bit intimidating. It was fun, but not where I want to spend most of my time. Same thing goes for developing front-end and wordpress sites. Actually, the html/css stuff was fine, it’s more just the overall process of building a wordpress site that’s not my cup o’ tea. But I’m glad I was able to help my mom out with her new business.
Link: http://www.ihealthcoach.net/

Early summer included some work for an episode of The GE Show that The Barbarian Group put together throughout the past 2 years. I was psyched to be included in the making of one of these, since they always turn out so awesome. I got to work on a flash-based map and online what-your-parents-shagged-to poster that went with it. This was a nice little piece that included the challenge of dealing with a lot of data without the use of a database what would also load quickly. Hard coded massive arrays was the answer.
Link: http:www.ge.com/thegeshow/visions-of-health/#ch3
Blog post: http://barbariangroup.com/posts/9085-the_ge_show_episode_7_visions_of_health

In late summer right before fashion week in New York, a few weeks were spent working on a fun installation for the Hudson Hotel. It was a flash based installation that was projected on 12 adjacent walls whose content was driven via a tumblr blog.
Blog post: http://barbariangroup.com/posts/9075-fashion_week_at_the_hudson_hotel

During some of my downtime, I helped put together a fun little game based on our IT department at TBG. It was only about a week or two worth of dev time and was put together without any sort of framework. It was old-school style of flash programming.
Link: http://itherogame.com/

In the more recent months I’ve spent a good amount of time working on processing sketches and learning some fundamental creative coding techniques. This is where I plan on spending a lot of my time next year. I put together tumblr blog where I post a lot of stills from my sketches along with any other drawings or anything else I come up with there, not strictly processing stuff.
Link: http://thegrego.tumblr.com/

In my processing learning, I also came up with an idea to learn how spider webs were made. I did a processing version, but then realized that to do what I really wanted to do (which is still in my head and on my todo list), I’d need to do a version in javascript. So I spent some time learning and playing with some javascript canvas tutorials and examples so that I can get a version of my webs online.
Link: http://www.gregkepler.com/work/js/spiderwebs/
Blog post: http://www.thegrego.com/2011/12/06/charlies-web/

Also, in my processing journey, I felt the need to explore some of my genealogy and put together the first of what will hopefully be a series of genealogy-based projects. As I learn to deal with a large amount of data and some beter visualization techniques, I have some high hopes that this will be a really cool, really expansive project in the future.
link: http://gregkepler.com/processing/family_lifespan/
blog post: http://www.thegrego.com/2011/09/25/kepler-family-life-spans/

I also spent some time learning arduino and integrating it into processing. I hope to have some progress on the project that I’m working on in the next month or two.

Stay tuned for my hopes and goals for 2012.

Charlie’s Web

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.