Cover Photo - "Inner Fortress" created using HSwarm and using a blend() trick in the Draw loop, where I use blend to effectively zoom in by one pixel each frame causing interesting crystal like gradients to form. 

Objective

I had a lot of fun in class one, and started exploring animation and the other HYPE class files near the end.  Looking forward to picking up some new tricks, sharing some insights, tips, etc 

Most of my generative work is posted up at http://echophon.tumblr.com

Tip #1

I didn't pick up SublimeText2 until the first class started.  Besides Command+R to build, I've learned exactly one shortcut (so far).  

Command+D is super powerful for fast prototyping.  It takes the current selection and expands it to a multi-selection of the next matching value.

So let's consider the following example.

Let's say I want to change the size on all of these from 100 to 50.  I could replace these all one by one, or I could create a variable to reference, or I could use Command+D.  By selecting 100 on line 1, hitting Command+D will duplicate my cursor to the next matching value on line 2, etc.  Once all the values I want to change are selected, I just type in the new value, and it's replaced in all the selected areas.

HAnchor Observations

Scale & Size also reference the anchor point.  There's some interesting interactions with HOscillator here.

HCanvas Observations

I think the only way to get the Processing fade trick to be pixel perfect is when filling to perfect black.  Which in itself is fairly limiting.  Looking forward to playing with palletes to create gradients.

Here's an animated GIF that turned out alright.  Started out with \HTween\example_003 as a template and heavily modified from there. Uses HCanvas, HTween, HOscillator, HColorist.

 

I am having some issues though using HDrawablePool with HCanvas though.  It's weird because the screen draws correctly, but the output GIF is off.  I think the alpha channel is transferring to the file as transparency.  Update - this only seems to occur when using P3D with fade & output to gif.

Blending all the colors seemed like the logical progression here, so I layered seven HCanvas objects with increasing fade times and using the color progression of the rainbow.  And again with HOsc (I use that all the time!) & HGridLayout.

HAnchor Experiment

Pretty happy with the motion in this next one.  In this case I set each shape to loc(width/2,height/2) but set the anchor to random values in the range of -4x to 4x the canvas size.  Most of the motion is oscillating H.Scale in small amounts (0.4 - 0.2) with some rotation which creates these wide sweeping arcs.  Each oscillator is set to a saw shape.  I'm using HColorPool but not in the normal way.  I'm pulling two random colors from the pool and using lerpColor() to create a range of colors between those two.  Resulting colors vary.  But this combination worked out alright.

Fun with Modulos

I just finished the last videos.  There was a lot of validation in some of these, as I leapt right into animation after Class I, but I learned some new things and am excited at the prospect of Class III.  And now I'd like to elaborate on the things that I've found, on that journey to find the "magic values" (Josh, get out of my head! jk, I love it.)  First up....

Modulos!  Use them, love them, make order out of chaos from them.  They're right up there with HOscillator for me.  I use them at the output stage, I use them on placement, I use them.... well anywhere I might have a range of numbers.  

"Crackling Perimeter"  How do you think I constructed this?  I think it's a great question to ask.  It's a question I ask all the time when looking at art / patterns / nature.

If you guessed 'Modulos', congratulations for paying attention.  I started this as an exploration in taking a grid (ie HGridlayout) and extending the grid into 3D.  But how to do that?  I started by taking multiple grids and layering over each other with different offsets of Z.  This first attempt did not turn out so great, it was pretty cumbersome.  So I took a step back.  

On the second attempt, I made one HGridLayout, and spaced the drawables (Hexagons!) very close together, only one or two pixels apart.  But instead of just letting it draw a flat 2D grid, I took the number of columns in my grid and used that with a modulo to place each subsequent column further down z-axis.  Great.  Now I had a grid, and now it was sort of 3D.  But it still looked a little flat, as if I had rotated it.  Something close to this:

So now I was part of the way there.  I had my grid on the X-axis and the Z-axis (it looks like a continuous line because the elements are so close to each other), so now I had to account for the Y-axis.  So, I thought, why not see what happens with HOscillator moving H.Y?  And I got lots of interesting results.  Here's an early one.

Interesting, but not really what I was seeking, not very grid-like.  So, while I enjoy the sine motion very much.  I decided to see what a triangle waveform might yield.  And I was very pleasantly surprised with this:

Wowowow.  Definitely something there.  From here on, it was fine-tuning, adding color, making it extend past the borders, etc.  Here's a code snippet showing the incrementing z-axis and oscillation.  Oh, and look at that, I have a modulo on the index of HOscillator too.

Working with Noise

Using HYPE has been a blast, I've learned a lot in the two classes, and by looking through the examples/source.  But I'm also consuming other Processing resources and integrating them into my work.  One thing I've wanted to do for awhile is use Perlin noise with HDrawablePool / HCallback / HOscillator .  I was able to drop some basic one dimensional noise into a grid pretty easily by adding an iterator and ended up with the following.  

Noise is changing the initial size of each square which I'm then oscillating the scale of.

So with that working, the next thing I wanted to try is 2D Noise.  This proved a little more difficult, because this is usually accomplished by using a nested loop.  One loop for the x, the other for the y.  I tried several different ways to get this working unsuccessfully.  I think the problem was that HCallback is an anonymous function and I wasn't able to update my globals correctly.

I took a break on the problem and came back and had a 'eureka' moment by realizing that I could use the built in HDrawable .x() & .y() functions which return the current location. And with that I was able to get proper 2D Noise working.  Here it's offsetting the x,y position of the grid & the initial size, which I'm then oscillating on the x-axis

May '14 Update

More HGridLayout + XY Noise + HOscillator 

HPolarLayout + HOscillator on DROTATION.  On this one I actually attached multiple objects to the layout location, and then oscillated them so they do a full rotation, but at a constantly changing speed.  It creates a nice phasing effect.

HHexLayout + HOscillator + HCanvas with fading + blur enabled.  Really loving how this turned out.

Looping Math

So almost all the animation I'm doing is via HOscillator and it's because with just a little bit of math, getting looping animations is very achievable. The conclusions I came to are based off some observations I made, and with a little testing appeared to match my theory.

HRotate also falls under this, and is a little more straight forward, so I'll start there.

HRotate has a property called speed(). It takes a float value in degrees. If we set speed(1), it will take 360 frames to loop, as it will rotate 1 degree everytime draw() is called.

Similarly, if we set speed(2), we will rotate 2 degrees every frame and it will loop completely after 180 frames. Speed(4) will take 90 frames, etc.

HOscillator also has a speed() property, but is also further augmented by the freq() property. If we have a speed(1) & freq(1), HOscillator will sweep over the range you specified and it will take 360 frames to loop.

If we change to speed(2) & freq(1) it will take 180 frames to loop.
If we change to speed(2) & freq(2) it will take 90 frames to loop.
If we change to speed(1) & freq(4) it will also take 90 frames to loop, but it will have some different characteristics from the previous line.

It's very similar to HRotate, but we have to take the product of speed() & freq() to get the value we want.

The only exception is when you are targeting the relative value properties (H.DX, H.DY, H.DROTATION) in which you need to have a range such as (-1,1) that is equidistant from zero if you want it to loop.

Here's a quick table to reference.

• Frames / Multiplier
• 360 / 1
• 180 / 2
• 120 / 3
• 90 / 4
• 72 / 5
• 60 / 6
• 45 / 8
• 40 / 9