The Year Ahead 2012

In the last few months I started checking out 750words.com and healthmonth.com, both which were started by Buster Benson. I’ve been participating in both of them daily and in turn it’s inspired me to carry through with some of my goals and to put them out there for everyone to read if interested. I must say that I do this with some hesitation after watching this TED talk about the success of reaching your goals when you tell people about them. But I think putting it out into the world is part of reaching your goals at the same time. So I plan on revealing some of them without getting too specific. Maybe that will strike the balance between pronouncing your goals to the workd and keep your mouth shut.

After looking back at what I learned and the work I’d done in 2011, I realized that there were some things that I want to change in 2012. One of the major things is that I want all of my learnings to actually produce something. Not just a folder of tutorials. I learned a lot last year, read a lot of books and whatnot, but I feel like a lot of what I learned will probably disappear as a result of not doing anything with it as it often does and has in the past. To (attempt to) resolve this issue, I’ve come to the conclusion that I want to release some sort of project every month. I know that it seems kind of ambitious and maybe not reasonable, but I’ve come up with some rules to help myself move along.

For each project I must:

  • Decide on the next month’s project the week before the first of the month.
  • Learn something new.
  • Either create something new OR make a significant improvement to a previous month’s work in an obvious way.
  • If a project only takes a week or two to complete, even better. Don’t rush to start the next month’s project. Enjoy your time off.
  • If a project takes more than a month to complete or I just drop the ball, that’s ok, but it must be finished the following month or I must take a step back and re-evaluate to see if it can be turned into a finished project at a later time.
  • Blog about my progress a few times a month.
  • Blog about the end product at the end of the month.
  • Not work when on a planned vacation.

The purpose is to find a curriculum that works for me so that I can learn and explore as many things that interest me. And there are a lot of them. This one project a month goal will serve a few other purposes too. It’ll force we to keep learning things, it will help dissuade me from taking on freelance that I don’t want to take on, and it will force me to blog more often.

My next post will describe what the project for January is. I’ll put out a loose timeline that I plan to stick to. The point of this is that it’ll give me smaller goals to stick to and should help keep me accountable for the ridiculousness that I’m about to take on.

Some topics I hope to explore a bit more include but are not limited to:

  • kinect
  • processing and OpenGL
  • javascript / HTML5 canvas
  • cinder and c++
  • flash games
  • iOS apps
  • arduino and physical computing
  • lots and lots of particles

Wish me luck.

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.

Kepler Family Life Spans

Family Lifespan Project

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.

Processing Sketch – Highschool Style Part II

So I figured out what I was going for…




Now that I got what I was thinking out of my head. Now it’s time to evolve it into something new. With where I hope this will go, there should be a video up for the next post.

Processing Sketch – Highschool Style

I’ve been trying to re-create a style of doodling that I used to do in highschool (which I admit I got from one of my actually artistic friends). Since I kind of feel bad about stealing his style, I decided I would take it as a base and build on it and make my own. Besides, everything’s a remix anyway.

attempt #1
attempt 1

attempt #2
attempt 2

It’s not there yet, but I’m happy that it’s turning into something that I had in my head.

Setting the swf Base Directory in HTML

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?

The solution that I mustered up in the past was to create a flashvar called something like “mediafolder” and put that in the embed code. From there, I would go back into my actionscript code and make sure all external media had the passed “mediafolder” variable appended to the beginning of the url for each external asset and then republish my swf.

This always worked well, so I usually plan for this, but my latest project didn’t have that built in. When it came to testing and we realized that the media folder was going to be in a different location than the base swf file and it was supposed to launch soon, it was time to see if there was another alternative to the usual solution. That’s when I discovered the “base” attribute in the swf object embed code.

The “base” attribute is actually an href attribute that specifies a base URL for all relative URLs on a page. Traditionally, you should be able to put it in the head of an html page and have all links on a page link relative to the string specified in the base attribute. For this it’s just specified for the swf, which picks it up when passed as a param and picks up any external asset from that folder by default instead of the folder that the actual swf is in.

Here’s a sample of the swfobject embed code:

 

With the example above, any asset that the main swf is trying to load relative to itself can now be placed in “../project/subfolder” without having to change any actionscript and republishing your swf. This is a tip that has saved me hours of work and would have saved me even more time had I discovered it in the past.

Processing Sketch #1

Lately. I’ve been getting really into some generative art lately, playing mostly with processing. So my goal now is to start putting up some of my sketches as I read and learn more about what I can do with this. The goal is to eventually output lots of cool shot and move on to some Arduino and Cinder projects that I have in mind.
Lets see how this goes. These are variations of my first one…


Thanks to Chandler McWilliams for re-sparking my interest. More to come soon.