Some functions using the modulo-operation (mod, %, remainder) :

basic case: y=x%100, value waves between 0 and 99:

Additions:

addition of two different modulos: y=(x%100+x%79)/2

addition of three: y=(x%100+x%31+x%79)/3. I divide by n to get a result easier to compare, with f’(x)=1 when defined …

addition of four - and we’re approaching a fractal wave: y=(x%100 + x%79 + x%31 + x%17)/4

Subtract:

Subtracting two modulos: y=x%50 -x%30 - tops of the levels are horizontal e.g. f’(x)=0 when defined

and four y=x%50 -x%30 +x%20 -x%12, a ‘city skyline’-function

ZigZags:

A zigzag function: y=|x%(2*m)-m| : m= wave’s height, 2*m = wavelength:

In the javascript-demo I defined a special function for that:

function zigzag(x,m) {
return Math.abs(x%(2*m)-m);
}
adding two zigzags, y=zigzag(x,25) +zigzag(x,15):

… and three, y=zigzag(x,25) +zigzag(x,21)+zigzag(x,15), for a ‘random’ mountain silhuette:

small javascript-demo for testing

Pixel Bendel -code as an example of this in 2D, creating a ‘random’ size tiling:

Waves from a PerlinNoise:



Source codes: PerlinWaves.as and PerlinWavesMain.as
—

FreeTransform:



Source codes: FreeTransform.as and FreeTransformDemo.as
As a principle that’s a cubic spline with two parameters

Continuing my earlier post …
… you’ll need the Flash Player 10 Beta to view these demos correctly !

Simple demo converting perlinNoise to polar coordinates in vector format: source code

Groovy flower ... (not very much commented) source code :

… and a couple of more:

… you’ll need the Flash Player 10 Beta to view the demos correctly !

Here’s some results from testing the new methods in Flash 10 graphics:
method drawPath(commands:Vector, data:Vector, winding:String = “evenOdd”)
commands: Vector of Strings holding info like MOVE_TO, LINE_TO, CURVE_TO etc,
data: Vector of Numbers defining the x,y -coordinates for line graphics
In the demo I take two horizontal lines of the bitmap with perlinNoise, and create curves with y by pixels value.

Essential parts of the code:

	private var _commands:Vector.<int> = new Vector.<int>();
	private var _dataUint:Vector.<uint>;
	private	var _dataVector:Vector.<Number>;

	// ...

	// It's enough to define _commands once
	// The command serie starts with MOVE_TO,
	// All the following commands are LINE_TO
	_commands.push(GraphicsPathCommand.MOVE_TO);
	for (i=1 ; i!=n+n; i++) {
		_commands.push(GraphicsPathCommand.LINE_TO);
	}

	// ...

	// BitmapData.getVector returns the values as uints 0xHHHHHHHH
	_dataUint = perlinData.getVector(new Rectangle(0,0,n,2));

	_dataVector = new Vector.<Number>() ;

	// First the upper row from left to right
	// coordinates x = i, y = blue channel's value from bitmap
	for (i=0 ; i!=n; i++) {
		_dataVector.push( i, _dataUint[i] & 0xFF );
	}
	// Then the lower row from right to left
	for (i=n-1 ; i!=-1; i--) {
		_dataVector.push( i, _dataUint[n+i] & 0xFF );
	}

	// Draw the new graphics
	with (this.graphics) {
		clear();
		beginFill(0x00,1.0);
		lineStyle(1.0,0x00);
		drawPath(_commands, _dataVector);
		endFill();
	}

… source for flash10

In the demo you’ll see the 10-version above and 9-version below.
The reference says: This method sends commands to the renderer much faster than when using the lineTo() and curveTo() methods. However, this only matters if your code is bottlenecked in getting commands to the renderer. Otherwise using this method will not give a performance increase. Well, at least in this case there was difference: I did some further performance testing and, depending on the situation like here for a path with a length of 1024 points, seems to be 5 to 10 times faster than the old methods - running 100 times gave ~50ms for flash10 and ~470ms for flash9.
It not only spares you from using a for() -loop but also allows to easily repeat, why not also save and load, the same graphics. Generally, for visuality, drawPath() doesn’t offer anything new - only in a faster and more advanced way.

In case you don’t yet feel familiar with the new classes and methods, here’s for comparison the same written in flash9 actionscript:

	with (this.graphics) {
		clear();
		beginFill(0x00,1.0);
		lineStyle(1.0,0x00);

		moveTo(0,perlinData.getPixel(0,0) & 0xFF);

		// point's y-value is red from the bitmapdata
		// First the upper row from left to right
		for (i=0 ; i!=n; i++) {
			this.graphics.lineTo(i,perlinData.getPixel(i,0) & 0xFF);
		}

		// Then the lower row from right to left
		for (i=n-1 ; i!=-1; i--) {
			this.graphics.lineTo(i,perlinData.getPixel(i,1) & 0xFF);
		}
		endFill();
	}

… source for flash9

—

PerlinDancer … Another demo with a bit different code: here both x- and y-coordinates are created by perlinNoise:

	_dataUint = perlinData.getVector(new Rectangle(0,0,2,n));
	_dataVector = new Vector.<Number>(2*n,false);

	i=0;
	for each (var value in _dataUint) {
		_dataVector[i++] = Number ( (value & 0xFF)<<1 );
	}

	with (this.graphics) {
		clear();
		beginFill(color,1.0);
		lineStyle(1.0,color);
		drawPath(_commands, _dataVector);
		endFill();
	}

Why always perlinNoise? I donno, at least it’s easily available and so often gives surprisingly nice and versatile results …

this demo requires Flash 10 Beta installed:

Extract from as3 language reference:

histogram() method

flash10 function histogram(hRect:Rectangle = null):Vector

Language Version : ActionScript 3.0
Player Version : Flash Player 10

Computes a 256 bin histogram of a BitmapData object.
The functions returns a vector of 4 number vectors.
The 4 number vectors represent the red, green, blue
and alpha components respectively. Each number vector
contains 256 values which represent the population count
of a indivual component value, from 0 to 255.

Parameters
hRect:Rectangle (default = null) — The area of the BitmapData
object that should be used.

Returns Vector

some code snippet from my demo:

function updateHistograms(bmpData:BitmapData,
sprites:Vector.<Sprite>):void {

// histogram is a Vector in two dimensions
// notice the interesting type Vector.<Vector.<Number>>
var hst:Vector.<Vector.<Number>> = bmpData.histogram();

var height:int=128; // height for diagrams
var maxValue:Number;
var value:Number;
var i:int;
var clr:int = 16; // value for bitwise shift left, start with red
// channel = 0:red, 1:green, 2:blue

for (var channel:int = 0; channel!=3; channel++) {

// find the max value on the histogram,
// i goes from 1 to 254,
// I discarded the 0 and 0xFF values to get a better balanced chart

maxValue =0.0;
for (i=1; i!=255; i++) {
value = hst[channel][i];
maxValue = value>maxValue ? value : maxValue;
}

with (sprites[channel].graphics) {
// empty and white background
clear();
beginFill(0xFFFFFF,1.0);
drawRect(0,0,255,height);
// draw a vertical line for each value with a corresponding color

i=0;
for each(value in hst[channel]) {
lineStyle(1.0,i<<clr) ;
moveTo(i,height);
lineTo(i++,Math.max(0.0,height-value*height/maxValue) );
}

}
clr -= 8;
}
}

In the demo I used Grant Skinner’s ColorMatrix for manipulating the image.

… two other new methods for BitmapData are getVector() and setVector() working just like older getPixels and setPixels-methods except with a Vector of uints, length = width x height:
like for instance copying pixels from 0,0 - 49,49 to 100,100 - 149,149:

var bmpVct:Vector.<uint> = bmpData.getVector(new Rectangle(0,0,50,50));
bmpData.setVector(new Rectangle(100,100,50,50),bmpVct);

And an example of experimental image manipulation of sorting by the pixel value

Pixel Bender -filter for tiling with regular hexagons, and as a tutorial a couple of words to explain how this hexagonalization was done:

———–

PB-bytecode in Adobe Exchange

———–

DEMO (for Flash Player 10 beta) featuring also FileReference.load() and .save() - up’n'download your own picture to player ! ps. If you try save, do not overwrite an older file, it has a know bug. … and here’s an hexsample of same image saved and loaded a couple of times

———–

I used Kevin Goldsmith’s PB HTML formatter for code hilighting - although pasting to this site didn’t support all the tabs …

———–
When it comes to the algorithm for hexagonal tiling as explained above, there might be some ’simplier’ ways of achieving it - as maths it’s ancient stuff. Anyway, when I first tried googling for more info and perhaps some code snippets, somehow I didn’t came up with any generally useful examples, in case of pixel manipulation algorithm. Nevertheless I did find a whole lot of inspirating stuff such as Spidrons or more on uniform tilings. So where next ?

The Beta release of Flash Player 10 required! Slightly improved version of the code I wrote last winter

—

Here’s the older version with actionscript

The beta release of Flash Player 10, code named Astro, is now out on Adobe labs!

After download you can check out couple of simple demos I wrote using new features:

Spherical Mapping - rotating 3D globe with alpha support. This version runs in CPU, if it seems slow …

ThreePointGradient - a colorful gradient by specified three colors and points - the colorPickers are as well dragable, try moving and changing colors ( ! it’s not a build-in function of graphics API, but an example of pixel bender-shader rendering a fill … )

There’s not much information on the net - yet. Senocular has posted a tutorial of new features.

and here’s CJ’s demo with lightbeams !

It’s creepy, it’s haunted, it’s eerieNoise:

if that was scary, please join a perlinParty:

And the third one – I don’t know what it is, but it does look soft …

And some northern lights ?

And finally ‘Shaman’s Prayer’:

Some simple actionscript hint for arrays:

not only can you define a new array by just writing:
var items:Array = ["first", "second", "third"]; // = new Array(”first”,”second”,”third”);

but you can also access items on a literal array by using an index [1,2,3] [i] ; !
If you have a limited number of cases you can replace a function, switch or ifs with this.

for (var i:int=0; i<3; i++) {
choices[i].name = ["D2", "D3", "D4"] [i] ; // choices[0].name= “D2″ … etc
}

var dimVal:int= [ 0, 1, 4, 13, 40 ] [n] ; // var n:int, precounted values for function (3^n -1)/2

var someColor:uint = [0xFF0000, 0xFF00, 0xFF, 0xFFFF00, 0xFF00FF, 0xFFFF] [n] ;

works in javascript as well:

var someFib = [1, 1, 2, 3, 5, 8, 13][4];
alert(”some Fibonacci number: “+someFib);

If I was a teacher, I’d now give you a task to write a script converting an integer, 0<i<5000, to a Roman Number returned as a string …