Andrew Walpole

Leader, Developer, Designer, Teacher, Student

860

26

Human-Code-Generated-Hybrid-Art Stuff

Introduction

I have been doing code-generated art for a little while. First with Flash/ActionScript (seen here: http://art.andrewwalpole.com/ ) and now thanks to the inspiration from this class in Processing. I started to dig into Hype before the class started and found myself down a different road than Professor Davis takes us through for creating compositions. I figured out how to build a dynamic drawing app in Processing with Hype and then output it as a high quality png.

Here are some early examples:

I posted a blog post on how to get high-quality bitmap images (not vector) out of it:

http://blog.andrewwalpole.com/2013/08/21/saving-high-quality-images-in-processing-with-the-hype-framework/

Now that I'm starting to dig into the course work I think this different style of composition generation can be merged nicely with my current style. So here begins that endeavor.

Class Progression

09/10/2013 - My first thought after watching the bit on HShapeLayout (which is pretty neat in itself!) was if I could use a dynamically generated HImage as the HShapeLayout, and it turns out you can. Here is a quick study:

http://youtu.be/DhS_82UGvqk

09/11/2013 - My next study I wanted to do was to see if I could create a system of multiple HShapeLayout objects (like a pool of them) and have them applied to multiple pools of HShapes (svgs).

Here is the video of the results. I added a little HUD on the screen to know where my values are at and mapped a bunch of variables (opacity, size and number of objects per pool) to the keyboard so it's easy to change things up on the fly. Essentially I'm able to toggle through my different HShapeLayouts and my HShape pools to create the effects you see in the video. At the beginning of the video I show you a preview of the different HShapeLayouts that get loaded into the program.

I also added in my high-resolution rendering code mentioned in yesterday's post, so when I mouse-down it's drawing onto a canvas layer, and at the end I save the image out and preview a few others I made.

http://youtu.be/tmEhurVlRRg

09/13/2013 - Today I did a lot of code refactoring and began to try to merge some of the things I've been trying from the class content with some of the things I have been doing before that.

Mainly, this meant building a much more configurable system with multiple rendering modes. In all, I have so far mapped 28 keyboard keys to modify my live system and have 3 render modes - drawing svg assets to HShapeLayouts which can be toggled, drawing with mouse-based brushes I have created, like ribbons and shape trails, and the third, a dynamic grid that can be resized both in columns and in shape size.

So far I like that I can toggle between the different render modes, however I can't say I have found the workflow that makes these things interact in an aesthetically pleasing way. My next goal goes back to something Joshua mentioned in a video, don't add too much to the screen, so some how I would like to begin to dial back some of the amount of objects I'm drawing on to the screen, or at least get better control over it.

Here's a video of my system so far, as well as a few more pieces of work from it.

http://www.youtube.com/watch?v=rIeBvuDFrEg

09/14/2013 - Today things are really coming together. I set up the system to use HColorPools for my shapes, but the pools are dynamic, pulling from a radius around wherever the mouse is. This makes for easy dynamic sets of small color palettes.

Here's the latest:

One thing I could not figure out is how to use HShape.randomColors( colorpool ) and apply opacity to the shape, unfortunately it seems impossible right now so I built in a toggle to use randomColors or not.

One more process video from today: 

http://www.youtube.com/watch?v=PN_hdmGEW4E

09/15/2013 - Success!! I was able to get HShape.randomColors( colorpool ) to apply an opacity! The trick was to apply ARGB colors to the HColorPool as I was adding them to it. The code looks something like this:

colors.add( ( myRGBcolor & 0x00FFFFFF ) + ( opacity << 24 ) ); //opacity is a number 0-255 (#00-#FF)

Here are a few samples of what this is letting me now do:

09/19/2013 - Haven't made any ground-breaking progress, however I have fine-tuned my system and given myself much more control over it. I have mapped (and memorized!) about 40 keyboard keys to different variables in my system. I can toggle between fill, stroke and fill+stroke modes as well as generate sub-color-palettes on the fly which I think is a pretty neat feature that I plan on posting a new demo of soon.

Something is still missing though, some sort of stylistic contrast needed to make my compositions more interesting while not looking out of place. I think my next investigation will be around a new type of ribbon system that blends better with the svg style.

I took some time to apply some post-processing to a recent piece and I'm kicking myself for not doing more of this sooner. I really like the way the type ties the piece together.

09/20/2013 - Having gotten the taste for putting these pieces into a more commercial or practical setting, I did a few more with text. I really like the idea that Joshua put out there, that giving yourself projects is crucial. So you'll see below where initially I started with the idea that I wanted to use my application to build an advertisement for Starbucks.

I also spent some time stealing some new color and I really like some of the stuff I found. Enjoy!

09/23/2013 - Continuing to pursue the idea of type in my compositions I got an idea to play with HShapeLayout to generate my own type. I really like the feel of it. To limit the amount of clutter attached to the HShapeLayout you can see below that I used 1x1 pixel dots to form my HShapeLayout image, which gives it a much more uniform look.

10/02/2013 - No new art to post yet, but I did spend some time creating a demo of how I'm picking colors. I tried to keep it short, but my base system is complex to start with, but please feel free to take a look and play around with it:

https://github.com/walpolea/HYPEDynamicColorPalettes

Essentially what I am doing in this example with regard to color picking is using HPixelColorist to load a jpg for my color palette and then using the mouse and a radius to pick a sub-set of colors from the picture. Then you can hit 'L' to lock the color palette in place. Each draw cycle, if the color palette is not locked, will generate an entirely new HColorPool from the mouse position.

There is a lot of extra bonus insight in this code as well as to how my system works, really a lot of mapping keys to things and then rendering the whole scene. Enjoy!

10/07/2013 - Not much new code, but some new shapes and shape layouts.


02/13/2014 - To close out my project, I have compiled some of the finished pieces that were made possible form this class. Check them out:

http://art.andrewwalpole.com/preview

Thanks again to master professor Davis for his excellent SkillShare topic!

Comments

Please sign in or sign up to comment.