05_pixelColorist « the HYPE Framework

the HYPE framework

download / 3.3 mb zip

version : 1.1.9
updated : February 18, 2011

installation & setup
change log

open all | close all

blog

HYPE google group

upcoming HYPE events

No events.

the HYPE framework is a collaborative visual framework developed in FDT and AS3 by Branden Hall and Joshua Davis.

let's keep in touch.

Keep us informed what you're working on using HYPE by connecting with us, either via e-mail or through twitter.

hype@hypeframework.org
twitter.com/hypeframework

Branden Hall

automatastudios.com
twitter.com/waxpraxis

Joshua Davis

joshuadavis.com
twitter.com/joshuadavis
flickr.com/photos/joshuadavis

Color / 05_pixelColorist

A few years ago while vacationing in Costa Brava Northern Spain, with Erik Natzke and his girlfriend Tobey. Erik and I would always find time to sit down on the beach and write code and share techniques we we’re using in the creation of our work.

Erik showed me this great trick of coloring artwork… based on the x and y coordinate of the artwork in relation to the x and y coordinate of a pixel of color on an image.

In this example a SimpleRhythm fires “colorAll”, which cycles all clips in the pool and then fires “colorClip” which updates an individual clip’s color… based on it’s new x and y position.

import hype.extended.behavior.Swarm;
import hype.extended.color.PixelColorist;
import hype.extended.layout.ShapeLayout;
import hype.extended.rhythm.FilterCanvasRhythm;
import hype.framework.behavior.BehaviorStore;
import hype.framework.core.ObjectPool;
import hype.framework.core.TimeType;
import hype.framework.display.BitmapCanvas;
import hype.framework.rhythm.SimpleRhythm;

MyShape.visible = false;

var myWidth = stage.stageWidth;
var myHeight = stage.stageHeight;

var bmc1:BitmapCanvas = new BitmapCanvas(myWidth, myHeight);
var bmc2:BitmapCanvas = new BitmapCanvas(myWidth, myHeight);

addChild(bmc2);

var clipContainer:Sprite = new Sprite();

var color:PixelColorist = new PixelColorist(MyImageColor, myWidth, myHeight);

var pool:ObjectPool = new ObjectPool(MyCircle, 25);
var layout:ShapeLayout = new ShapeLayout(MyShape);
var swarmPoint:Point;

function resetSwarm(r:SimpleRhythm) {
	swarmPoint = layout.getNextPoint();
	pool.activeSet.forEach(changeSwarmGoal);
}

function changeSwarmGoal(clip) {
	var swarm:Swarm = BehaviorStore.retrieve(clip, “swarm”) as Swarm;
	swarm.point = swarmPoint;
}

function colorClip(clip) {
	color.colorChildren(clip);
}

function colorAll(r:SimpleRhythm) {
	pool.activeSet.forEach(colorClip);
}

pool.onRequestObject = function(clip) {
	clip.x = myWidth / 2;
	clip.y = myHeight / 2;

	clip.scaleX = clip.scaleY = 0.1 + ((Math.random() * 3) * 0.05);
	
	// target Object, x and y, speed, rotation ease, twitch 20 = -10 to +10

	var swarm:Swarm = new Swarm(clip, new Point(myWidth / 2, myHeight / 2), 5, 0.02, 1);
	swarm.start();
	swarm.store(“swarm”);
	
	colorClip(clip);

	clipContainer.addChild(clip);
}

pool.requestAll();

bmc1.startCapture(clipContainer, true);
bmc2.startCapture(bmc1, true);

var blur:FilterCanvasRhythm = new FilterCanvasRhythm([new BlurFilter(3, 3, 1)], bmc1);
blur.start(TimeType.TIME, 1);

var resetPoint:SimpleRhythm = new SimpleRhythm(resetSwarm);
resetPoint.start(TimeType.TIME, 1000);

var resetColor:SimpleRhythm = new SimpleRhythm(colorAll);
resetColor.start(TimeType.TIME, 1);

Alternative content