2008 May | Soundstep, daily ActionScript.

Archive for May, 2008

13 05 2008

3D line drawing with Papervision

Posted by: Romuald in experiments, tags: 3D, as3, experiment, flash, papervision3D, tutorial

Back to the line drawing I started in this post.

I wanted to get a snake-like line and I had a try with Papervision3D. It made me able to handle the vertices and then delete the end of the lines.

Draw 1 (demo)

I started from an excellent work from Xero (the.fontvir.us) on the Papervision3D mailing list but instead of using a Lorenz attractor, I used the Tweener Bezier property as I did on the 2D versions.

I set a number of vertices, that is giving me the length of the line. Here is the code:

Plain Text

Actionscript:

/*
* Lines3D1
*
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 3.0
* 05-2008
*
* @author Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version 1.0
* @usage
*
*/
package {
import org.papervision3d.core.geom.renderables.*;
import org.papervision3d.materials.special.*;
import org.papervision3d.core.geom.*;
import org.papervision3d.objects.*;
import org.papervision3d.cameras.*;
import caurina.transitions.Tweener;
import caurina.transitions.properties.CurveModifiers;
import flash.events.*;
public class Lines3D1 extends BaseP3D {
//------------------------------------
// private properties
//------------------------------------
private var sight:DisplayObject3D;
private var lineMaterial:LineMaterial;
private var arrLines:Array = [];
private var _objArray:Array = [];
private var _linesNum:int = 5;
private var _maxRadius:int = 200;
private var _pointNum:uint = 80;
private var _verticesNum:uint = 50;
//------------------------------------
// public properties
//------------------------------------
//------------------------------------
// constructor
//------------------------------------
public function Lines3D1() {
stage.frameRate = 81;
CurveModifiers.init();
super(600, 600);
b.addEventListener(MouseEvent.CLICK, reload);
addChild(b);
}
//
// PRIVATE, PROTECTED
//________________________________________________________________________________________________
override protected function init2D():void {
for (var u:int=0; u<_linesNum; u++) {
var obj:Object = {};
var newPos:Object = getRandomPos();
obj['prevX'] = obj['x'] = newPos['x'];
obj['prevY'] = obj['y'] = newPos['y'];
obj['prevZ'] = obj['z'] = newPos['z'];
obj['color'] = Math.random() * 0xFFFFFF;
_objArray.push(obj);
randomTween(getRandomData(obj));
}
}
override protected function init3D():void {
camera.zoom = 5;
camera.z = -200;
sight = new DisplayObject3D();
camera.target = sight;
lineMaterial = new LineMaterial(Math.random()* 0xFFFFFF);
for (var f:int=0; f<_linesNum; f++) {
var line:Lines3D = new Lines3D(lineMaterial, "line");
arrLines.push(line);
scene.addChild(line, "line");
}
}
override protected function processFrame():void {
for (var h:int=0; h<_linesNum; h++) {
arrLines[h].addLine(new Line3D(arrLines[h], new LineMaterial(_objArray[h]['color'], 1), 3, new Vertex3D(_objArray[h]['prevX'],_objArray[h]['prevY'],_objArray[h]['prevZ']), new Vertex3D(_objArray[h]['x'],_objArray[h]['y'],_objArray[h]['z'])));
_objArray[h]['prevX'] = _objArray[h]['x'];
_objArray[h]['prevY'] = _objArray[h]['y'];
_objArray[h]['prevZ'] = _objArray[h]['z'];
if (arrLines[h].lines.length> _verticesNum) arrLines[h].lines.shift();
camera.x += (((mouseX -(stage.stageWidth*.5))*3)-camera.x)*.01;
camera.y += (((mouseY-(stage.stageHeight*.5))*3)-camera.y)*.01;
}
}
private function randomTween(o:Object):void {
Tweener.addTween(o, {x:o['x1'], y:o['y1'], z:o['z1'], _bezier:o['bezier'], time ['time'], transition:"linear", onComplete:
function():void {
randomTween(getRandomData(o));
}
});
}
private function getRandomData(o:Object):Object {
o['time'] = Math.random() * (_pointNum*.5) + (_pointNum*.25);
var newPos:Object = getRandomPos();
o['x1'] = newPos['x'];
o['y1'] = newPos['y'];
o['z1'] = newPos['z'];
o['bezier'] = [];
for (var i:int=0; i<_pointNum; i++) {
var newBezierPos:Object = getRandomPos();
o['bezier'].push({
x:newBezierPos['x'],
y:newBezierPos['y'],
z:newBezierPos['z']
});
}
return o;
}
private function getRandomPos():Object {
var angleY:Number = Math.random() * 2 * Math.PI;
var angleXZ:Number = Math.random() * 2 * Math.PI;
var o:Object = {};
o['x'] = Math.cos(angleY) * Math.sin(angleXZ) * _maxRadius;
o['y'] = Math.sin(angleY) * Math.sin(angleXZ) * _maxRadius;
o['z'] = Math.cos(angleXZ) * _maxRadius;
return o;
}
private function reload(e:MouseEvent = null):void {
Tweener.removeAllTweens();
for (var r:int=0; r<_linesNum; r++) {
scene.removeChild(arrLines[r]);
}
_objArray = [];
arrLines = [];
init3D();
init2D();
}
//
// PUBLIC
//________________________________________________________________________________________________
}
}

Draw 2 (demo)

And a bit of fun with the Bitmap layer, the ColorMatrixFilter and the BlurFilter.

Plain Text

Actionscript:

/*
* Lines3D2
*
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 3.0
* 05-2008
*
* @author Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version 1.0
* @usage
*
*/
package {
import flash.geom.Point;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.filters.BlurFilter;
import flash.filters.ColorMatrixFilter;
import org.papervision3d.core.geom.renderables.*;
import org.papervision3d.materials.special.*;
import org.papervision3d.core.geom.*;
import org.papervision3d.objects.*;
import org.papervision3d.cameras.*;
import caurina.transitions.Tweener;
import caurina.transitions.properties.CurveModifiers;
import flash.events.*;
public class Lines3D2 extends BaseP3D {
//------------------------------------
// private properties
//------------------------------------
private var sight:DisplayObject3D;
private var lineMaterial:LineMaterial;
private var arrLines:Array = [];
private var _objArray:Array = [];
private var _linesNum:int = 5;
private var _maxRadius:int = 200;
private var _pointNum:uint = 80;
private var _verticesNum:uint = 30;
private var _cmf:ColorMatrixFilter;
private var _bf:BlurFilter;
private var _bmd:BitmapData;
private var _bm:Bitmap;
//------------------------------------
// public properties
//------------------------------------
//------------------------------------
// constructor
//------------------------------------
public function Lines3D2() {
stage.frameRate = 81;
CurveModifiers.init();
super(600, 600);
b.addEventListener(MouseEvent.CLICK, reload);
addChild(b);
}
//
// PRIVATE, PROTECTED
//________________________________________________________________________________________________
override protected function init2D():void {
_cmf = new ColorMatrixFilter([1.05,0,0,0,0,
0,1.05,0,0,0,
0,0,1.05,0,0,
0,0,0,.54,0]);
_bf = new BlurFilter(5, 5, 2);
createCanvas();
for (var u:int=0; u<_linesNum; u++) {
var obj:Object = {};
var newPos:Object = getRandomPos();
obj['prevX'] = obj['x'] = newPos['x'];
obj['prevY'] = obj['y'] = newPos['y'];
obj['prevZ'] = obj['z'] = newPos['z'];
obj['color'] = Math.random() * 0xFFFFFF;
_objArray.push(obj);
randomTween(getRandomData(obj));
}
}
override protected function init3D():void {
camera.zoom = 5;
camera.z = -200;
sight = new DisplayObject3D();
camera.target = sight;
lineMaterial = new LineMaterial(Math.random()* 0xFFFFFF);
for (var f:int=0; f<_linesNum; f++) {
var line:Lines3D = new Lines3D(lineMaterial, "line");
arrLines.push(line);
scene.addChild(line, "line");
}
}
private function createCanvas():void {
_bmd = new BitmapData(600, 600, true, 0x000000);
_bm = new Bitmap(_bmd);
addChild(_bm);
}
override protected function processFrame():void {
for (var h:int=0; h<_linesNum; h++) {
arrLines[h].addLine(new Line3D(arrLines[h], new LineMaterial(_objArray[h]['color'], 1), 3, new Vertex3D(_objArray[h]['prevX'],_objArray[h]['prevY'],_objArray[h]['prevZ']), new Vertex3D(_objArray[h]['x'],_objArray[h]['y'],_objArray[h]['z'])));
_objArray[h]['prevX'] = _objArray[h]['x'];
_objArray[h]['prevY'] = _objArray[h]['y'];
_objArray[h]['prevZ'] = _objArray[h]['z'];
if (arrLines[h].lines.length> _verticesNum) arrLines[h].lines.shift();
camera.x += (((mouseX -(stage.stageWidth*.5))*3)-camera.x)*.01;
camera.y += (((mouseY-(stage.stageHeight*.5))*3)-camera.y)*.01;
}
_bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
_bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
_bmd.draw(this);
}
private function randomTween(o:Object):void {
Tweener.addTween(o, {x:o['x1'], y:o['y1'], z:o['z1'], _bezier:o['bezier'], time ['time'], transition:"linear", onComplete:
function():void {
randomTween(getRandomData(o));
}
});
}
private function getRandomData(o:Object):Object {
o['time'] = Math.random() * (_pointNum*.5) + (_pointNum*.25);
var newPos:Object = getRandomPos();
o['x1'] = newPos['x'];
o['y1'] = newPos['y'];
o['z1'] = newPos['z'];
o['bezier'] = [];
for (var i:int=0; i<_pointNum; i++) {
var newBezierPos:Object = getRandomPos();
o['bezier'].push({
x:newBezierPos['x'],
y:newBezierPos['y'],
z:newBezierPos['z']
});
}
return o;
}
private function getRandomPos():Object {
var angleY:Number = Math.random() * 2 * Math.PI;
var angleXZ:Number = Math.random() * 2 * Math.PI;
var o:Object = {};
o['x'] = Math.cos(angleY) * Math.sin(angleXZ) * _maxRadius;
o['y'] = Math.sin(angleY) * Math.sin(angleXZ) * _maxRadius;
o['z'] = Math.cos(angleXZ) * _maxRadius;
return o;
}
private function reload(e:MouseEvent = null):void {
Tweener.removeAllTweens();
for (var r:int=0; r<_linesNum; r++) {
scene.removeChild(arrLines[r]);
}
removeChild(_bm);
_objArray = [];
arrLines = [];
init3D();
init2D();
}
//
// PUBLIC
//________________________________________________________________________________________________
}
}

Get a random point in a sphere
maxRadius = 200 angleY = Math.random() * 2 * Math.PI angleXZ = Math.random() * 2 * Math.PI x = Math.cos(angleY) * Math.sin(angleXZ) * maxRadius y = Math.sin(angleY) * Math.sin(angleXZ) * maxRadius z = Math.cos(angleXZ) * maxRadius

Get the source here.

3 Comments »

13 05 2008

Background fitting the browser (html/css/javascript)

Posted by: Romuald in experiments, tags: css, experiment, html, javascript, liquid layout, liquid UI

This has nothing to do with flash but I share this quick try as I saw a lot of people looking for a background that fit the browser in html.

I used the ratio out I explained in this previous post, obvously you don't have the flash smoothing.

It is not perfect, I had to remove the scrollbars as a part of the picture is not visible. See the demo and download the source.

I'm far from being a good html/css/javascript developer so If you know already a good version or if you have developed one, please comment.

Plain Text

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Soundstep | experiments (html/css background fitting the borwser)</title>
<style>
html, body {
overflow: hidden;
}
</style>
<script type="text/javascript" src="browser.js"></script>
<script>
function fixedBackground(url) {
document.body.style.padding = '0';
document.body.style.margin = '0';
var overlay = document.createElement('DIV');
overlay.style.position = 'absolute';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.height = '100%';
overlay.style.width = '100%';
overlay.innerHTML = document.body.innerHTML;
document.body.innerHTML = '<img id="bg" width="10" height="10" src="' + url + '" style="left: 0; top: 0; z-index: 0" />';
document.body.appendChild(overlay);
backgroundset = true;
updateBackground();
}
function updateBackground() {
var bSize = getSize();
var sWidth = bSize.w;
var sHeight = bSize.h;
var ratio = 1024 / 768;
if (sWidth / ratio <sHeight) sWidth = sHeight * ratio;
else sHeight = sWidth / ratio;
var __bg = document.getElementById('bg');
__bg.top = 0;
__bg.left = 0;
__bg.width = sWidth;
__bg.height = sHeight;
}
function getSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
}
else if (document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight )) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
}
else if (document.body && ( document.body.clientWidth || document.body.clientHeight )) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
var r = {w:myWidth, h:myHeight};
return r;
}
</script>
</head>
<body onresize="updateBackground()" onload="fixedBackground('bg.jpg')">
</body>
</html>

3 Comments »

08 05 2008

Background fitting the browser and image ratio

Posted by: Romuald in experiments, tags: as2, as3, flash, liquid layout, liquid UI, tutorial

Here is an example to show a element like a background, a image in a portfolio or whatever and make it fitting the browser.

In the demo you can choose three modes.

Mode Fit

The picture is fitting the browser regardless the original ratio. The formula is simple:
imagePositionX = 0 imagePositionY = 0 imageWidth = stageWidth imageHeight = stageHeight

Mode Out (I called it like that because you'll miss a part of the picture)

The picture is fitting the browser as well but we keep the ratio, we'll miss a part of the picture at the right or the bottom in my example.
ratio = initialImageWidth / initialImageHeight newWidth = stageWidth newHeight = stageHeight if (stageWidth / ratio < stageHeight) newWidth = stageHeight * ratio; else newHeight = stageWidth / ratio; imagePositionX = 0 imagePositionY = 0 imageWidth = newWidth imageHeight = newHeight

Mode In

The image is fitting the browser, we also keep the ratio but we show the whole picture, we'll have a gap around depending of the size of the area.
ratio = initialImageWidth / initialImageHeight newWidth = stageWidth newHeight = stageHeight if (stageWidth / ratio > stageHeight) newWidth = stageHeight * ratio else newHeight = stageWidth / ratio imageWidth = newWidth imageHeight = newHeight imagePositionX = (stageWidth * .5) - (imageWidth * .5) imagePositionY = (stageHeight * .5) - (imageHeight * .5)

You can see a demo and download the source.

2 Comments »

08 05 2008

Line Bitmap drawing with Tweener Bezier

Posted by: Romuald in experiments, tags: as3, experiment, flash, tutorial

After having a look at the tutorial from Lee Brimelow, I used it to make some experiments.

I tried to find a way to draw a moving line on a bezier curve, like a snake. I didn't really reached it. If you have some ideas how to get a "snake line", please comment.

I used Tweener to animate.

Draw 1 (demo)

Just a simple drawing, a line on moving canvas. Here is the code:

Plain Text

Actionscript:

/*
* Class
*
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 3.0 and flash player 9
* Date: 01-2008
*
* @author Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version 1.0
* @usage
*
*/
package {
import flash.display.*;
import flash.events.*;
import flash.geom.*;
import flash.ui.*;
import caurina.transitions.Tweener;
public class Draw1 extends Sprite {
//------------------------------------
// private properties
//------------------------------------
private var _canvas:Sprite;
private var _obj:Object;
//------------------------------------
// public properties
//------------------------------------
//------------------------------------
// constructor
//------------------------------------
public function Draw1() {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.frameRate = 81;
_obj = {};
_obj.x = stage.stageWidth * .5;
_obj.y = stage.stageHeight * .5;
createCanvas();
}
//
// PRIVATE
//________________________________________________________________________________________________
private function createCanvas(width:int = 500, height:int = 400):void {
_canvas = new Sprite();
cacheAsBitmap = true;
_canvas.cacheAsBitmap = true;
_canvas.graphics.lineStyle(3, Math.random() * 0xFFFFFF, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
_canvas.graphics.moveTo(_obj.x, _obj.y);
addChild(_canvas);
_canvas.addEventListener(Event.ENTER_FRAME, loop);
randomTween(getRandomData());
}
private function loop(e:Event):void {
_canvas.x -= 4;
var p:Point = _canvas.globalToLocal(new Point(_obj.x, _obj.y));
_canvas.graphics.lineTo(p.x, p.y);
}
private function randomTween(o:Object):void {
Tweener.addTween(_obj, {y:o.y, time .time, transition:"easeInOutElastic", onComplete:
function():void {
randomTween(getRandomData());
}
});
}
private function getRandomData():Object {
var o:Object = {};
o.y = Math.round(Math.random() * stage.stageHeight);
o.time = Math.random() * 3 + 1;
return o;
}
// PUBLIC
//________________________________________________________________________________________________
}
}

Draw 2 (demo)

The second one I draw 5 lines contained in a circle. I used the bezier property of Tweener to build the curves. So I first draw the curve on a bitmapdata canvas and then use a color matrix filter to fade the line after each drawing.

Plain Text

Actionscript:

/*
* Class
*
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 3.0 and flash player 9
* Date: 01-2008
*
* @author Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version 1.0
* @usage
*
*/
package {
import flash.display.*;
import flash.events.*;
import flash.filters.BlurFilter;
import flash.filters.ColorMatrixFilter;
import flash.geom.*;
import flash.ui.*;
import caurina.transitions.Tweener;
import caurina.transitions.properties.CurveModifiers;
public class Draw2 extends Sprite {
//------------------------------------
// private properties
//------------------------------------
private var _lineNum:uint = 5;
private var _pointNum:uint = 5;
private var _lineArray:Array = [];
private var _objArray:Object = [];
private var _maxRadius:Number = 150;
private var _cmf:ColorMatrixFilter;
private var _bf:BlurFilter;
//------------------------------------
// public properties
//------------------------------------
private var _bmd:BitmapData;
//------------------------------------
// constructor
//------------------------------------
public function Draw2() {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.frameRate = 41;
CurveModifiers.init();
//graphics.beginFill(0x222222);
//graphics.drawCircle((stage.stageWidth * .5), (stage.stageHeight * .5), _maxRadius);
_cmf = new ColorMatrixFilter([1,0,0,0,0,
0,1,0,0,0,
0,0,1,0,0,
0,0,0,.5,0]);
_bf = new BlurFilter(8, 8, 3);
createCanvas();
createLines();
}
//
// PRIVATE
//________________________________________________________________________________________________
public function createCanvas():void {
_bmd = new BitmapData(550, 400, true, 0x000000);
var bm:Bitmap = new Bitmap(_bmd);
addChild(bm);
}
private function createLines():void {
for (var i:uint = 0; i <_lineNum; i++) {
var obj:Object = { };
obj.color = Math.random() * 0xFF0000;
obj.x = getRandomPos().x;
obj.y = getRandomPos().y;
_objArray.push(obj);
var l:Sprite = new Sprite();
//l.filters = [new BlurFilter(2, 2, 3)]
l.name = "line" + i;
l.graphics.lineStyle(3, Math.random() * obj.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
addChild(l);
_lineArray.push(l);
randomTween(getRandomData(obj, l), l);
}
addEventListener(Event.ENTER_FRAME, loop);
}
private function loop(e:Event):void {
for (var i = 0; i <_lineNum; i++) {
_lineArray[i].graphics.lineTo(_objArray[i].x, _objArray[i].y);
}
_bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
//_bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
_bmd.draw(this);
}
private function randomTween(o:Object, line:Sprite):void {
line.graphics.clear();
line.graphics.lineStyle(3, o.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
line.graphics.moveTo(o.x, o.y);
Tweener.addTween(o, { x:o.x1, y:o.y1, _bezier:o.bezier, time .time, transition:"easeInOutQuad", onComplete:
function():void {
randomTween(getRandomData(o, line), line);
}
});
}
private function getRandomData(obj:Object, line:Sprite):Object {
obj.time = Math.random() * 2 + .8;
obj.x1 = getRandomPos().x;
obj.y1 = getRandomPos().y;
obj.bezier = [];
for (var i = 0; i <_pointNum; i++) {
obj.bezier.push({
x:getRandomPos().x,
y:getRandomPos().y
});
}
return obj;
}
private function getRandomPos():Object {
var o:Object = {}
o.x = Math.cos(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageWidth * .5);
o.y = Math.sin(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageHeight * .5);
return o;
}
// PUBLIC
//________________________________________________________________________________________________
}
}

Draw 3 (demo)

In this one, the technic is slightly different. I now update the drawing in the frame loop and use the color matrix filter to leave a trail.

Plain Text

Actionscript:

/*
* Class
*
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 3.0 and flash player 9
* Date: 01-2008
*
* @author Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version 1.0
* @usage
*
*/
package {
import flash.display.*;
import flash.events.*;
import flash.filters.BlurFilter;
import flash.filters.ColorMatrixFilter;
import flash.geom.*;
import flash.ui.*;
import caurina.transitions.Tweener;
import caurina.transitions.properties.CurveModifiers;
public class Draw3 extends Sprite {
//------------------------------------
// private properties
//------------------------------------
private var _lineNum:uint = 5;
private var _pointNum:uint = 40;
private var _lineArray:Array = [];
private var _objArray:Object = [];
private var _maxRadius:Number = 150;
private var _cmf:ColorMatrixFilter;
private var _bf:BlurFilter;
//------------------------------------
// public properties
//------------------------------------
private var _bmd:BitmapData;
//------------------------------------
// constructor
//------------------------------------
public function Draw3() {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.frameRate = 41;
CurveModifiers.init();
_cmf = new ColorMatrixFilter([1,0,0,0,0,
0,1,0,0,0,
0,0,1,0,0,
0,0,0,.5,0]);
_bf = new BlurFilter(8, 8, 3);
createCanvas();
createLines();
}
//
// PRIVATE
//________________________________________________________________________________________________
public function createCanvas():void {
_bmd = new BitmapData(550, 400, true, 0x000000);
var bm:Bitmap = new Bitmap(_bmd);
addChild(bm);
}
private function createLines():void {
for (var i:uint = 0; i <_lineNum; i++) {
var obj:Object = { };
obj.color = Math.random() * 0xFF0000;
obj.x = obj.prevX = getRandomPos().x;
obj.y = obj.prevY = getRandomPos().y;
_objArray.push(obj);
var l:Sprite = new Sprite();
//l.filters = [new BlurFilter(2, 2, 3)]
l.name = "line" + i;
l.graphics.lineStyle(3, Math.random() * obj.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
addChild(l);
_lineArray.push(l);
randomTween(getRandomData(obj, l), l);
}
addEventListener(Event.ENTER_FRAME, loop);
}
private function loop(e:Event):void {
for (var i = 0; i <_lineNum; i++) {
_lineArray[i].graphics.clear();
_lineArray[i].graphics.lineStyle(3, _objArray[i].color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
_lineArray[i].graphics.moveTo(_objArray[i].prevX, _objArray[i].prevY);
_lineArray[i].graphics.lineTo(_objArray[i].x, _objArray[i].y);
_objArray[i].prevX = _objArray[i].x;
_objArray[i].prevY = _objArray[i].y;
}
_bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
//_bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
_bmd.draw(this);
}
private function randomTween(o:Object, line:Sprite):void {
Tweener.addTween(o, { x:o.x1, y:o.y1, _bezier:o.bezier, time .time, transition:"linear", onComplete:
function():void {
randomTween(getRandomData(o, line), line);
}
});
}
private function getRandomData(obj:Object, line:Sprite):Object {
obj.time = Math.random() * 8 + 12;
obj.x1 = getRandomPos().x;
obj.y1 = getRandomPos().y;
obj.bezier = [];
for (var i = 0; i <_pointNum; i++) {
obj.bezier.push({
x:getRandomPos().x,
y:getRandomPos().y
});
}
return obj;
}
private function getRandomPos():Object {
var o:Object = {}
o.x = Math.cos(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageWidth * .5);
o.y = Math.sin(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageHeight * .5);
return o;
}
// PUBLIC
//________________________________________________________________________________________________
}
}

Draw 4 (demo)

Just a bit of fun on the second experiment with a blur filter, pretty nice if you like techno style

Plain Text

Actionscript:

/*
* Class
*
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 3.0 and flash player 9
* Date: 01-2008
*
* @author Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version 1.0
* @usage
*
*/
package {
import flash.display.*;
import flash.events.*;
import flash.filters.BlurFilter;
import flash.filters.ColorMatrixFilter;
import flash.geom.*;
import flash.ui.*;
import caurina.transitions.Tweener;
import caurina.transitions.properties.CurveModifiers;
public class Draw4 extends Sprite {
//------------------------------------
// private properties
//------------------------------------
private var _lineNum:uint = 5;
private var _pointNum:uint = 5;
private var _lineArray:Array = [];
private var _objArray:Object = [];
private var _maxRadius:Number = 150;
private var _cmf:ColorMatrixFilter;
private var _bf:BlurFilter;
//------------------------------------
// public properties
//------------------------------------
private var _bmd:BitmapData;
private var _bm:Bitmap;
//------------------------------------
// constructor
//------------------------------------
public function Draw4() {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.frameRate = 41;
CurveModifiers.init();
btReload.addEventListener(MouseEvent.CLICK, reload);
_cmf = new ColorMatrixFilter([1,0,0,0,0,
0,1,0,0,0,
0,0,1,0,0,
0,0,0,1,0]);
_bf = new BlurFilter(6, 6, 2);
createCanvas();
createLines();
}
//
// PRIVATE
//________________________________________________________________________________________________
public function createCanvas():void {
_bmd = new BitmapData(550, 400, true, 0x000000);
_bm = new Bitmap(_bmd);
addChild(_bm);
}
private function createLines():void {
for (var i:uint = 0; i <_lineNum; i++) {
var obj:Object = { };
obj.color = Math.random() * 0xFF0000;
obj.x = getRandomPos().x;
obj.y = getRandomPos().y;
_objArray.push(obj);
var l:Sprite = new Sprite();
l.filters = [new BlurFilter(3, 3, 2)]
l.name = "line" + i;
l.graphics.lineStyle(3, Math.random() * obj.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
addChild(l);
_lineArray.push(l);
randomTween(getRandomData(obj, l), l);
}
addEventListener(Event.ENTER_FRAME, loop);
}
private function loop(e:Event):void {
for (var i = 0; i <_lineNum; i++) {
_lineArray[i].graphics.lineTo(_objArray[i].x, _objArray[i].y);
}
_bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
_bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
_bmd.draw(this);
}
private function randomTween(o:Object, line:Sprite):void {
line.graphics.clear();
line.graphics.lineStyle(3, o.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
line.graphics.moveTo(o.x, o.y);
Tweener.addTween(o, { x:o.x1, y:o.y1, _bezier:o.bezier, time .time, transition:"linear", onComplete:
function():void {
randomTween(getRandomData(o, line), line);
}
});
}
private function getRandomData(obj:Object, line:Sprite):Object {
obj.time = Math.random() * 2 + .8;
obj.x1 = getRandomPos().x;
obj.y1 = getRandomPos().y;
obj.bezier = [];
for (var i = 0; i <_pointNum; i++) {
obj.bezier.push({
x:getRandomPos().x,
y:getRandomPos().y
});
}
return obj;
}
private function getRandomPos():Object {
var o:Object = {}
o.x = Math.cos(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageWidth * .5);
o.y = Math.sin(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageHeight * .5);
return o;
}
// PUBLIC
//________________________________________________________________________________________________
public function reload(e:MouseEvent = null):void {
Tweener.removeAllTweens();
removeEventListener(Event.ENTER_FRAME, loop);
for (var i:uint = 0; i <_lineNum; i++) {
removeChild(_lineArray[i]);
}
removeChild(_bm);
_objArray = [];
_lineArray = [];
createCanvas();
createLines();
}
}
}

Draw 5 (demo)

This one is mixing the colors and creating a shape little by little.

Plain Text

Actionscript:

/*
* Class
*
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 3.0 and flash player 9
* Date: 01-2008
*
* @author Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version 1.0
* @usage
*
*/
package {
import flash.display.*;
import flash.events.*;
import flash.filters.BlurFilter;
import flash.filters.ColorMatrixFilter;
import flash.geom.*;
import flash.ui.*;
import caurina.transitions.Tweener;
import caurina.transitions.properties.CurveModifiers;
public class Draw5 extends Sprite {
//------------------------------------
// private properties
//------------------------------------
private var _lineNum:uint = 5;
private var _pointNum:uint = 10;
private var _lineArray:Array = [];
private var _objArray:Object = [];
private var _maxRadius:Number = 150;
private var _cmf:ColorMatrixFilter;
private var _bf:BlurFilter;
//------------------------------------
// public properties
//------------------------------------
private var _bmd:BitmapData;
private var _bm:Bitmap;
//------------------------------------
// constructor
//------------------------------------
public function Draw5() {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.frameRate = 41;
CurveModifiers.init();
btReload.addEventListener(MouseEvent.CLICK, reload);
_cmf = new ColorMatrixFilter([1.1,0,0,0,0,
0,1.1,0,0,0,
0,0,1.1,0,0,
0,0,0,.585,0]);
_bf = new BlurFilter(5, 5, 2);
createCanvas();
createLines();
}
//
// PRIVATE
//________________________________________________________________________________________________
public function createCanvas():void {
_bmd = new BitmapData(550, 400, true, 0x000000);
_bm = new Bitmap(_bmd);
addChild(_bm);
}
private function createLines():void {
for (var i:uint = 0; i <_lineNum; i++) {
var obj:Object = { };
obj.color = Math.random() * 0xFF0000;
obj.x = obj.prevX = getRandomPos().x;
obj.y = obj.prevY = getRandomPos().y;
_objArray.push(obj);
var l:Sprite = new Sprite();
l.filters = [new BlurFilter(2, 2, 2)]
l.name = "line" + i;
l.graphics.lineStyle(3, Math.random() * obj.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
addChild(l);
_lineArray.push(l);
randomTween(getRandomData(obj, l), l);
}
addEventListener(Event.ENTER_FRAME, loop);
}
private function loop(e:Event):void {
for (var i = 0; i <_lineNum; i++) {
_lineArray[i].graphics.clear();
_lineArray[i].graphics.lineStyle(3, _objArray[i].color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
_lineArray[i].graphics.moveTo(_objArray[i].prevX, _objArray[i].prevY);
_lineArray[i].graphics.lineTo(_objArray[i].x, _objArray[i].y);
_objArray[i].prevX = _objArray[i].x;
_objArray[i].prevY = _objArray[i].y;
}
_bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
_bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
_bmd.draw(this);
}
private function randomTween(o:Object, line:Sprite):void {
Tweener.addTween(o, { x:o.x1, y:o.y1, _bezier:o.bezier, time .time, transition:"linear", onComplete:
function():void {
randomTween(getRandomData(o, line), line);
}
});
}
private function getRandomData(obj:Object, line:Sprite):Object {
obj.time = Math.random() * 3 + 3;
obj.x1 = getRandomPos().x;
obj.y1 = getRandomPos().y;
obj.bezier = [];
for (var i = 0; i <_pointNum; i++) {
obj.bezier.push({
x:getRandomPos().x,
y:getRandomPos().y
});
}
return obj;
}
private function getRandomPos():Object {
var o:Object = {}
o.x = Math.cos(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageWidth * .5);
o.y = Math.sin(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageHeight * .5);
return o;
}
// PUBLIC
//________________________________________________________________________________________________
public function reload(e:MouseEvent = null):void {
Tweener.removeAllTweens();
removeEventListener(Event.ENTER_FRAME, loop);
for (var i:uint = 0; i <_lineNum; i++) {
removeChild(_lineArray[i]);
}
removeChild(_bm);
_objArray = [];
_lineArray = [];
createCanvas();
createLines();
}
}
}

Draw 6 (demo)

Almost the same test but I move the bitmapdata layer.

Plain Text

Actionscript:

/*
* Class
*
* Copyright info: Free to use and change, an notification email will be welcome for a commercial use
* Actionscript: built for actionscript 3.0 and flash player 9
* Date: 01-2008
*
* @author Romuald Quantin - romu@soundstep.com - www.soundstep.com
* @version 1.0
* @usage
*
*/
package {
import flash.display.*;
import flash.events.*;
import flash.filters.BlurFilter;
import flash.filters.ColorMatrixFilter;
import flash.geom.*;
import flash.ui.*;
import caurina.transitions.Tweener;
import caurina.transitions.properties.CurveModifiers;
public class Draw6 extends Sprite {
//------------------------------------
// private properties
//------------------------------------
private var _lineNum:uint = 5;
private var _pointNum:uint = 40;
private var _lineArray:Array = [];
private var _objArray:Object = [];
private var _maxRadius:Number = 150;
private var _cmf:ColorMatrixFilter;
private var _bf:BlurFilter;
//------------------------------------
// public properties
//------------------------------------
private var _bmd:BitmapData;
private var _bm:Bitmap;
//------------------------------------
// constructor
//------------------------------------
public function Draw6() {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.frameRate = 41;
CurveModifiers.init();
btReload.addEventListener(MouseEvent.CLICK, reload);
_cmf = new ColorMatrixFilter([1.1,0,0,0,0,
0,1.1,0,0,0,
0,0,1.1,0,0,
0,0,0,.66,0]);
_bf = new BlurFilter(8, 8, 2);
createCanvas();
createLines();
}
//
// PRIVATE
//________________________________________________________________________________________________
public function createCanvas():void {
_bmd = new BitmapData(800, 400, true, 0x000000);
_bm = new Bitmap(_bmd);
addChild(_bm);
}
private function createLines():void {
for (var i:uint = 0; i <_lineNum; i++) {
var obj:Object = { };
obj.color = Math.random() * 0xFF0000;
obj.x = obj.prevX = getRandomPos().x;
obj.y = obj.prevY = getRandomPos().y;
_objArray.push(obj);
var l:Sprite = new Sprite();
l.filters = [new BlurFilter(2, 2, 2)]
l.name = "line" + i;
l.graphics.lineStyle(3, Math.random() * obj.color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
addChild(l);
_lineArray.push(l);
randomTween(getRandomData(obj, l), l);
}
addEventListener(Event.ENTER_FRAME, loop);
}
private function loop(e:Event):void {
for (var i = 0; i <_lineNum; i++) {
_lineArray[i].graphics.clear();
_lineArray[i].graphics.lineStyle(3, _objArray[i].color, 1, false, LineScaleMode.NONE, CapsStyle.ROUND);
_lineArray[i].graphics.moveTo(_objArray[i].prevX, _objArray[i].prevY);
_lineArray[i].graphics.lineTo(_objArray[i].x, _objArray[i].y);
_objArray[i].prevX = _objArray[i].x;
_objArray[i].prevY = _objArray[i].y;
}
_bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _cmf);
_bmd.applyFilter(_bmd, _bmd.rect, new Point(0, 0), _bf);
_bmd.draw(this);
_bmd.scroll(-4, 0);
}
private function randomTween(o:Object, line:Sprite):void {
Tweener.addTween(o, { x:o.x1, y:o.y1, _bezier:o.bezier, time .time, transition:"linear", onComplete:
function():void {
randomTween(getRandomData(o, line), line);
}
});
}
private function getRandomData(obj:Object, line:Sprite):Object {
obj.time = Math.random() * 8 + 12;
obj.x1 = getRandomPos().x;
obj.y1 = getRandomPos().y;
obj.bezier = [];
for (var i = 0; i <_pointNum; i++) {
obj.bezier.push({
x:getRandomPos().x,
y:getRandomPos().y
});
}
return obj;
}
private function getRandomPos():Object {
var o:Object = {}
o.x = Math.cos(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageWidth * .5 + 200);
o.y = Math.sin(Math.random() * (Math.PI * 2)) * (Math.sqrt(Math.random()) * _maxRadius) + (stage.stageHeight * .5);
return o;
}
// PUBLIC
//________________________________________________________________________________________________
public function reload(e:MouseEvent = null):void {
Tweener.removeAllTweens();
removeEventListener(Event.ENTER_FRAME, loop);
for (var i:uint = 0; i <_lineNum; i++) {
removeChild(_lineArray[i]);
}
removeChild(_bm);
_objArray = [];
_lineArray = [];
createCanvas();
createLines();
}
}
}

Source

You can download the source here.

More links

More details on the Tweener bezier curve and the color matrix filter use.

Search
Categories
- BaseUI (10)
- experiments (13)
- SomaCore (5)
- SomaUI (17)
- talking (39)
Pages
- About
- Contact
- Downloads
  - BaseUI
  - FPS
  - SomaCore
  - SomaLoader
  - SomaText
  - SomaUI
  - TextGradient
- Forum
- Soma Protest
Twitter
- keep #github gh-pages in sync in the #git master branch as a submodule, great link! http://t.co/DIPrABjV 10:34:51 PM January 25, 2012 from Echofon Reply Retweet Favorite
- sorry I couldn't post it here! Go giant: https://t.co/dxvr0j1d #url #shortener 06:25:51 PM January 20, 2012 from Echofon Reply Retweet Favorite
- Is #Adobe, #Apple, #Microsoft and others supporting #SOPA? check the list at the end of this page if it is any real http://t.co/R7a2bzl0 03:14:50 PM January 19, 2012 from Echofon Reply Retweet Favorite
- I just received that #whatsapp hoax https://t.co/22YESwYx 02:39:28 PM January 19, 2012 from Echofon Reply Retweet Favorite
- Still in a #SOPA action, boycott SOPA products and stop buying products from 800 supporting SOPA companies. https://t.co/RM3grvGz 11:16:48 AM January 17, 2012 from Echofon Reply Retweet Favorite
@soundstep
Archives
- July 2011
- June 2011
- May 2011
- April 2011
- March 2011
- February 2011
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- March 2010
- January 2010
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- April 2009
- March 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
Recent Posts
Recent Comments
- Julienne Mozena on SomaTween proxy for Tweener TweenMax and GTween
- auto verzekeren on SomaUI update for Flex SDK 4
- hemgui on BaseUI
- hemgui on BaseUI
- Pierre on SomaUI
Tags

3D Add new tag air as2 as3 BaseUI class css data management experiment flash flex framework html javascript liquid layout liquid UI papervision3D soma SomaCore SomaUI tutorial
Soundstep RSS

Archive for May, 2008

3D line drawing with Papervision

Background fitting the browser (html/css/javascript)

Background fitting the browser and image ratio

Line Bitmap drawing with Tweener Bezier

Search

Categories

Pages

Twitter

Archives

Recent Posts

Recent Comments

Tags

Soundstep RSS