kTentacles

June 15, 2012

A few months ago, I had to design a filter prototype for an app we projected to realize. This one had to display pictures users would take with their smartphone on three different ways, each inspired by Kusama. The goal was interesting as two of the three filters had to be 3D.
One of the different inspiration was the famous tentacles on the floor which you can (re)discover here.

Here you have two examples of print rendering. Results are much more powerfull than the edulcored I had to do when we realized the Kusama app. for Louis Vuitton, Anyway,… it was cool!

tentacles_example_01

tentacles_02

As I wanted something simple (less is more) without pattern on the tentacles (tentacles have to rebuild the image), I started quickly to write a bit of code to have a 2D tentacle which moves in pseudo 3D.
So, that’s what I came with, to test it quickly…

The tentacle constructor.

package
{
    import com.greensock.TweenLite;
    import com.greensock.easing.Sine;

    import flash.display.Sprite;
    import flash.events.Event;

    public class Tentacle extends Sprite
    {
        private var _container:Sprite;
        private var _index:int = 0;
        private var _radius:int = 10;
        private var _color:uint;
        private var _size:int;
        private var _s:Sprite;
        private var _dots:Vector.;
        private var _o:Object = new Object;

        public function appear(pdelay:Number = 0):void
        {
            for(var i:int = 0; i< _dots.length; ++i)
            {
                TweenLite.to(_dots[i], .4, { alpha:1,
							 				 delay:pdelay + i * .1,
							 				 ease:Sine.easeOut });
            }
        }

        public function Tentacle(color:uint, size:int)
        {
            _color = color;
            _size = size;
            build();
        }

        private function build():void
        {
            _container = new Sprite();
            addChild(_container);
            _dots = new Vector.();
            // a simple object for the dot properties
            _o = new Object();
            _o.x = 0;
            _o.angle = 0;

            switch(_size) {
                case 1:
                    _o.radius = 6;
                    _o.max = 12;
                    break;
                case 2:
                    _o.radius = 8;
                    _o.max = 15;
                    break;
                case 3:
                    _o.radius = 10;
                    _o.max = 20;
                    break;
                case 4:
                    _o.radius = 20;
                    _o.max = 46;
                    break;
                default:break;
            }

            var offset:Number = 3;
            // draws a sinusoidal curve,
            for(var i:int = 0; i < _o.max; ++i) {
                _o.x += offset;
                _o.y = Math.sin(_o.angle) * _radius;

                var d:Dot = new Dot(_color, _o.radius, _o.x, _o.y);
                d.alpha = 0;
                _container.addChild(d);

                _o.angle += .15;
                _o.radius -= .4;// decrements radius of next dot...
                ++_index;
                _dots.push(d);
            }
            rotationY = 90;
            rotationX = Math.random() * 100;
            addEventListener(Event.ENTER_FRAME, render);
        }

        private function render(e:Event):void
        {
            // makes the rotation of the Y axis
            rotationY += 1;
            // makes the tentacle on its X axis
            rotationX += 10;
        }

    }

}

The dot constructor.

package
{
	import flash.display.Shape;
	import flash.display.Sprite;

	public class Dot extends Sprite
	{
		private var _bg:Shape;
		private var _color:uint;
		private var _radius:Number;
		private var _ox:Number;
		private var _oy:Number;

		public function Dot(color:uint, radius:Number, ox:Number, oy:Number)
		{
			_color = color;
			_radius = radius;
			x = _ox = ox;
			y = _oy = oy;
			build();
		}

		public function get radius():Number
		{
			return _radius;
		}

		private function build():void
		{
			_bg = new Shape();
			_bg.graphics.beginFill(_color, .15);
			_bg.graphics.drawCircle(0, 0, _radius);
			_bg.graphics.endFill();
			addChild(_bg);
			rotationY = 90;
		}

	}

}

How to test it ? sorry, I didn’t make a project file,… Simply open Flash, start a new AS3 file, go on the action panel and type:

import Tentacle;

// instance a new Tentacle
// first parameter: color of the dots
// second, a quick way to switch between a few choices I tried quickly...
var t:Tentacle = new Tentacle(0x0, 4);
t.x = 250;// my scene is 500 * 200
t.y = 100;
addChild(t);
t.appear();

Then, I had to plug it on a smart colour analyzer, and build something like a simple application to choose an image, apply the filter and a few random parameters…
I dealed with the excellent ColourUtils class to deal the color stuff…

I will have to reload this project, using AS3 Stage3D: I would like to have an animated version on this, and maybe make it interactive with a kinect object.

Tags: ,