Interactive Generative Flash Art Series Intro

The world has been excited by html5/css3 recently and has been pushing limits and experimenting. It’s been exciting and funny at the same time – most of the things that are amazing people in html5 experiments have been done 5 years ago in flash. I’ve enjoyed it so much though because it has brought me back to what made me fall for flash initially: sites like levitated.net and yugop.com. People that wrote books about programming actionscript like Keith Peters, Jim Bumgardener Colin Moock, Robert Penner etc… and then art by people like Erik Natzke. I’m a geek and these guys are some of my heros (and don’t think that list is exhausted, I’ve got plenty of unmentioned flash heros), but not just because they could/can do what they do, but because they selflessly (open source-ly) taught me how to do some of it. The magic of creating something so engaging, responsive, animated, unique, random. Little experiments that feel like they contain so much life and are so lightweight -easily less than 10,240 bytes (read 10kb). I knew in high school trig and calculus that those formulas had power, but seeing it unfold and interact with it really is magical to me.

ball-natzke-1ball-natzke-2ball-natzke-3

A little inspiration

So, I’ve been toying with a lot of the things that actually taught me (or at least pushed me to learn) the basics of programming. With the years experience under my belt now I’m understanding it on a totally different level and all I want to do is find more things to make balls and lines bounce, move and swirl. And I also want to share it. Well, I recently stumbled upon a flash sneak peak video by Erik Natzke about some of his technique and then his open source files and really had some fun. Anyways I wanted to share some of the experiments that came from it. Let me know your thoughts and download the code and play with it. Let me know what else you come up with and share what you learn. I’ll start this series with a post of the original experiment from Erik on his blog here, Flash Code 101.

Natzke’s Flash Code 101

[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ replaceId=”alt-ball-natzke” movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2011/01/ball-natzke.swf” width=”550″ height=”550″ targetclass=”flashmovie”]

Please visit the blog article to view this interactive flash content. Flash plug-in required: Get Adobe Flash player

[/kml_flashembed]

If it looks like greek to you, I’d suggest going to Keith Peter’s tutorials (especially the first few on gravity, easing and elasticity).

Actionscript 3

For something so fun, it’s amazing that it’s barely over a dozen lines of code.
[cc lang=”actionscript”]
var Ball:Sprite = new Sprite();
Ball.graphics.beginFill(0x333333, 1);
Ball.graphics.drawCircle(0, 0, 30);
Ball.graphics.endFill();
addChild(Ball);

var div:Number = .1;
var ax:Number = 0;
var ay:Number = 0;

function loop () {
Ball.x -= ax = (ax + (Ball.x – mouseX) * div) * .9;
Ball.y -= ay = (ay + (Ball.y – mouseY) * div) * .9;
this.graphics.lineStyle(Math.random()*10, 0, 1);
this.graphics.lineTo(Ball.x, Ball.y);
}

setInterval(loop, 1000/30);
[/cc]

Here’s the swf in action, or download the fla to play (if you really would rather download a file than copy 15 lines of code).

Resolution

Well, I’ll be playing with this code and others and posting the experiments with some screenshots of what I create get’s created.

Redworks

redworksI just realized that I hadn’t updated the site about it, but I’m now (since a couple months) interactive designer/developer with Redworks, subsidiary or Ogilvy & Mather in Atlanta! I’ll be doing all kinds of interactive designing and programming, specifically with flash and I’m stoked to be waist deep in Flash and as3 daily.

What? You ask is RedWorks? Well, I have been explaining it to so many that I figured I’d post this awesome video that explains it better than I ever could! Enjoy, this if from the RedWorks 3D office in NY.

Pog Portfolio – Interactive flash portfolio

An interactive flash portfolio featuring ‘pog’ thumbnails sortable by tags and adjustable properties.

open Circle Cube POG portfolio
Pog Thmb

Circle Cube . com
Toggle the help window with ‘h’.
Click the pogs to explore each piece, if applicaple click the ‘open window’ link.
Pog options are aligned across the top of the bay window, use them to adjust the properties within the bay area. Mix and match until you find your fit. Tag buttons are across the bottom, click to specify the genre of art to display.

Gravity:
Toggle the force of gravity acting on the pogs. Pogs with gravity on will be pulled down and bounce according to mass.
White is on. Black is off.

Spring:
Toggle the spring or elasticity option. Pogs will hinge to a point and orbit that point.
White is on. Black is off.

Grid:
Toggle the grid option. The pogs can either form into an array of pogs or move aimlessly in the space.
White is on. Black is off.

Friction:
Toggle the force of friction acting on the pogs. Pogs with friction will slow down and over time eventually stop.
White is on. Black is off.

Tags:
Click these tag button descriptors to see only that style of work in the portfolio.
Select all work, video, new media, animation, or drawing.

Yankee Submarine Textures

I did all the textures for this submarine created for the A&E Documentary “The Russian Navy”. Here is the turnaround of the submarine. Texturing done in Maya and Photoshop.
DVD on sale at A&E

Documentary description from the History Channel
During the Cold War, Soviet Russia appeared vast, mysterious and threatening to many westerners. With its enormous reserves of manpower, it fielded a powerful army. Although historians and filmmakers have expended endless ink and celluloid discussing the vicissitudes of the Russian Army, the role of the navy in Russia’s history has been frequently overlooked.

In this groundbreaking documentary, we trace Russian naval history back to the seventeenth century. The regular Russian Navy was created at the behest of Tsar Peter the Great. At the end of the century, Russia began to deploy battleships and fire-ships during its campaign against Turkey. The Russian Parliament then passed a decree in October 1696 calling for the rapid construction of the navy.

We explain how the new force allowed Russia to triumph over Sweden in the Great Northern War of 1700 to 1721. It was during the course of this conflict that Russia began to construct its formidable Baltic fleet. We then explore the Russo-Turkish Wars, which occurred under Catherine the Great. The sea-bound skirmishes with Turkey resulted in the establishment of the Black Sea Fleet, which was based in Sevastapol and Kherson. In 1770, the Russian Navy managed to destroy the Turkish fleet in the Battle of Chesma.

Next, we address the Russian Navy’s activities during the twentieth century. The doomed 1905 Russo-Japanese War resulted in complete catastrophe for the Navy. At the Battle of Port Arthur, the Japanese used mines for offensive purposes for the first time in history. In the wake of the defeat, the country devoted an enlarged portion of its military spending to an ambitious shipbuilding programme.

During the First World War, the Black Sea Fleet succeeded in mining the Bosporus, thus preventing the Ottoman Fleet from entering the Black Sea. When the country withdrew from the war following the Russian Revolution, the fleet was evacuated from Helsinki and Tallinn to Kronstadt, in what became known as the ‘Ice Cruise of the Baltic Fleet.’

We also address the important role played by the navy in Russia’s 1917 Revolution. Russian sailors generally welcomed the Bolshevik Revolution. In 1905, sailors of the Imperial Russian battleship Potemkin had revolted against their oppressive officers. Their uprising would be immortalised in Sergei Eisenstein’s iconic 1925 silent film. In the following year, rebellious soldiers gained control of some Helsinki coastal fortifications during the Viapori Rebellion. Indeed, it was a blank shot from the Imperial Russian cruiser ‘Aurora’ which signalled the beginning of the October Revolution.

The Soviet Navy was formed from the ashes of the Imperial Navy. In the 1930s, as Russia underwent rapid and massive industrialisation, plans were also made to update and expand the Navy. We look at the role played by Soviet ships during the Second World War. We also outline the Russian challenge to western naval hegemony which took place during the Cold War. In the 1960’s and 70’s, the forceful and innovative commander in chief, Admiral Sergi Gorshkov, oversaw a massive naval build-up of aircraft carriers and submarines. This documentary outlines Russia’s tragic naval defeats and stunning, revolutionary victories in an accessible, dramatic and extremely comprehensive manner.

November Submarine Textures

I did all the textures for this submarine created for the A&E Documentary “The Russian Navy”. Here is the turnaround of the submarine.
DVD on sale at A&E

Documentary description from the History Channel
During the Cold War, Soviet Russia appeared vast, mysterious and threatening to many westerners. With its enormous reserves of manpower, it fielded a powerful army. Although historians and filmmakers have expended endless ink and celluloid discussing the vicissitudes of the Russian Army, the role of the navy in Russia’s history has been frequently overlooked.

In this groundbreaking documentary, we trace Russian naval history back to the seventeenth century. The regular Russian Navy was created at the behest of Tsar Peter the Great. At the end of the century, Russia began to deploy battleships and fire-ships during its campaign against Turkey. The Russian Parliament then passed a decree in October 1696 calling for the rapid construction of the navy.

We explain how the new force allowed Russia to triumph over Sweden in the Great Northern War of 1700 to 1721. It was during the course of this conflict that Russia began to construct its formidable Baltic fleet. We then explore the Russo-Turkish Wars, which occurred under Catherine the Great. The sea-bound skirmishes with Turkey resulted in the establishment of the Black Sea Fleet, which was based in Sevastapol and Kherson. In 1770, the Russian Navy managed to destroy the Turkish fleet in the Battle of Chesma.

Next, we address the Russian Navy’s activities during the twentieth century. The doomed 1905 Russo-Japanese War resulted in complete catastrophe for the Navy. At the Battle of Port Arthur, the Japanese used mines for offensive purposes for the first time in history. In the wake of the defeat, the country devoted an enlarged portion of its military spending to an ambitious shipbuilding programme.

During the First World War, the Black Sea Fleet succeeded in mining the Bosporus, thus preventing the Ottoman Fleet from entering the Black Sea. When the country withdrew from the war following the Russian Revolution, the fleet was evacuated from Helsinki and Tallinn to Kronstadt, in what became known as the ‘Ice Cruise of the Baltic Fleet.’

We also address the important role played by the navy in Russia’s 1917 Revolution. Russian sailors generally welcomed the Bolshevik Revolution. In 1905, sailors of the Imperial Russian battleship Potemkin had revolted against their oppressive officers. Their uprising would be immortalised in Sergei Eisenstein’s iconic 1925 silent film. In the following year, rebellious soldiers gained control of some Helsinki coastal fortifications during the Viapori Rebellion. Indeed, it was a blank shot from the Imperial Russian cruiser ‘Aurora’ which signalled the beginning of the October Revolution.

The Soviet Navy was formed from the ashes of the Imperial Navy. In the 1930s, as Russia underwent rapid and massive industrialisation, plans were also made to update and expand the Navy. We look at the role played by Soviet ships during the Second World War. We also outline the Russian challenge to western naval hegemony which took place during the Cold War. In the 1960’s and 70’s, the forceful and innovative commander in chief, Admiral Sergi Gorshkov, oversaw a massive naval build-up of aircraft carriers and submarines. This documentary outlines Russia’s tragic naval defeats and stunning, revolutionary victories in an accessible, dramatic and extremely comprehensive manner.

Circle Cube

Circle cube graphic pushing colors. Thinking of the design as shapes in a stained glass window.

circle cube mixed up

ARST4810 CAD Fab class exhibition.
My Shattered Little World
Slide, Circle cube

Published in the Flagpole, April 4th 2007:
Rhinoceros Makes Art: Students in Michael Oliveri’s Computer Aided Design and Fabrication class at UGA are exhibiting their work in the Thomas Street Gallery. Using the computer program Rhinoceros, the students have created a diverse set of images.J.B. Courson ‘s “Alpha Hab and Worker Drones” could be plans for the set of a Star Wars movie. Caroline Covington’s “Closure” re-invents the kamikaze bomb, with essential accompanying text. Diana Gurley’s circular imagery hovers on the page like hot-air balloons. Matthew McDonald’s “Lupa Ad Nauseam,” as the Latin title states, is an image of a wolf vomiting. The drawing of the wolf appears to be taken from a realistically executed etching, while the vomit is discretely portrayed as a splatter of color. Edward Whelan’s abstract geometric piece looks back to the Italian Futurists, with a fresh new design. Evan Mullins and Louis Grabowski have both created images of realistic-looking objects of play. Works by Andy Anzardo, Alex Castellanos, Jason Maddox, Chris Merz, Winston Parker and John Powers are also included in the show, which runs through Apr. 5, so hurry! The Thomas Street Gallery is located in UGA’s Sculpture Annex just off Broad Street.