[stuff] perlin julia-menge fraktal

[pwdVergesser]

hallo zusammen,

so, nach den ersten startschwierigkeiten in as3 habe ich mal mein
erstes kleines snippet fertig. den code nicht gleich zerreißen, ich
bin erstmal froh das ich das in as3 soweit hingeschlonzt habe...

das ganze ist ein "julia-menge" fraktal, welches in dieser farbtiefe nicht
in as2 darstellbar wäre, und schon garnicht in der geschwindigkeit in der
as3 das fraktal zeichnet.

ansehen

dazu noch ein wenig perlin und displacement... für ein wenig feedback,
gerade in bezug auf eine bessere umsetzung der farbgebung, die derzeit
echt "b" ist, wäre ich gern´ zu haben.


hier das script:

/////////////////////////////////////////////////////
//  juliamenge fractal viewer
//  author : frank reitberger
//  site : http://www.dasprinzip.com
//  copyright 2006
/////////////////////////////////////////////////////


// --------------------------------------------------------------------------------------------------


stop();


// --------------------------------------------------------------------------------------------------

///////////////////////////////////
// import stage classes
///////////////////////////////////


import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.StageScaleMode;
import flash.display.MovieClip;
import flash.geom.Point;
import flash.geom.Rectangle;



// --------------------------------------------------------------------------------------------------

///////////////////////////////////
// setup juliamenge global vars
///////////////////////////////////


var efxDraw:Bitmap;
var efxStage:BitmapData;




// --------------------------------------------------------------------------------------------------

///////////////////////////////////
// get mouse position steady
///////////////////////////////////


function catchMouse(evt:MouseEvent) {

	blurStage.copyPixels(efxStage, new Rectangle(stage.mouseX-50, stage.mouseY-50, 50 , 50), new Point(stage.mouseX-50, stage.mouseY-50));

}


// --------------------------------------------------------------------------------------------------

///////////////////////////////////
// draw blur filters steady
///////////////////////////////////


function onEnterFrame(evt:Event) {
	
	blurStage.applyFilter(blurStage,blurStage.rect,new Point(0, 0),new BlurFilter(8, 8, 1));
	blurStage.colorTransform(blurStage.rect, new ColorTransform(1, 1, 1, 1, -1, -1, -1,-4));
	
	noiseStage.perlinNoise(20, 20, 1, Math.random()*1000, false, true, true, true);
	
	var dpMap:DisplacementMapFilter = new DisplacementMapFilter(noiseStage, new Point(0, 0), 1, 2, 20, 20);
	dpMap.mode = "clamp";
	
	blurStage.applyFilter(blurStage, new Rectangle(0, 0, stage.stageWidth, stage.stageHeight), new Point(0, 0), dpMap);	


}
	
// --------------------------------------------------------------------------------------------------

///////////////////////////////////
// configure canvas
///////////////////////////////////


function initStage() {
	
	stage.scaleMode = StageScaleMode.NO_SCALE;
	
	efxStage = new BitmapData( stage.stageWidth , stage.stageHeight , false , 0x000000 );
	efxDraw = new Bitmap( efxStage );
	addChild( efxDraw );
	
	blurStage = new BitmapData( stage.stageWidth , stage.stageHeight , true, 0x000000 );
	blurDraw = new Bitmap( blurStage );
	addChild( blurDraw );
	
	noiseStage = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0xffffff);
	
	addChild( txt );
	
	stage.addEventListener(MouseEvent.MOUSE_MOVE,catchMouse);
	stage.addEventListener(Event.ENTER_FRAME, onEnterFrame );
	
	paint();

}


// --------------------------------------------------------------------------------------------------

///////////////////////////////////
// paint juliamenge fractal
///////////////////////////////////


function paint() {
	
	var cnt:Number;
	var tx:Number;
	var ty:Number;
	var dim:Number;
	var dist:Number;
	var xn:Number;
	var yn:Number;	
	
	
	var a:Number = -1;
	var b:Number = 0.28;
	var xmin:Number = -1;
	var ymin:Number = -1;
	
	var k = 1.2;
	
	dim = k / 200;
	
	tx = xmin;
	
	for (var s:Number = 0; s <= 500; s++) {
		
		ty = ymin;
		
		for (var r:Number = 0; r<=600; r++) {	
        	
			xn = tx;
        	yn = ty;
        	cnt = 0;	
			
			while ((cnt < 100) && (Math.sqrt(xn*xn+yn*yn)<2)) {
				
				cnt++;
				
				dist = (xn*xn)-(yn*yn) + a;
				yn = (2*xn*yn) + b;
				
				xn = dist;
				
			}
			
				

			if (cnt == 0) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+20) ;
				efxStage.setPixel( s , r , color );
			}						
			
			if (cnt == 1) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+30) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt == 2) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+40) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt == 3) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+50) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt == 4) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+60) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt == 5) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+70) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt == 6) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+80) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt == 7) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+90) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt == 8) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+100) ;
				efxStage.setPixel( s , r , color );
			}	
			if (cnt == 9) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+110) ;
				efxStage.setPixel( s , r , color );
			}
			
			if (cnt > 9 && cnt < 12) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+120) ;
				efxStage.setPixel( s , r , color );
			}	
			
			if (cnt == 12) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+130) ;
				efxStage.setPixel( s , r , color );
			}
			
			if (cnt > 12 && cnt < 15) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+140) ;
				efxStage.setPixel( s , r , color );
			}
			
			if (cnt >= 15 && cnt < 20) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+150) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt >= 20 && cnt < 24) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+160) ;
				efxStage.setPixel( s , r , color );
			}
			
			if (cnt >= 24 && cnt < 28) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+170) ;
				efxStage.setPixel( s , r , color );
			}
		
			if (cnt >= 28 && cnt < 34) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+180) ;
				efxStage.setPixel( s , r , color );
			}
			
			if (cnt >= 34 && cnt < 38) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+130) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt >= 38 && cnt < 42) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+120) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt >= 42 && cnt < 46) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+110) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt >= 46 && cnt < 50) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+100) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt >= 50 && cnt < 54) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+90) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt >= 54 && cnt < 58) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+80) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt >= 58 && cnt < 62) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+70) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt >= 62 && cnt < 66) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+60) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt >= 66 && cnt < 70) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+50) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt >= 70 && cnt < 74) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+40) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt >= 74 && cnt < 78) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+30) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt >= 78 && cnt < 82) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+20) ;
				efxStage.setPixel( s , r , color );
			}
			if (cnt >= 82 && cnt < 86) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+10) ;
				efxStage.setPixel( s , r , color );
			}				
			
			
			

			
			
			ty = ty + dim;			
		}
		
		tx = tx + dim;
	}		
	
}


// --------------------------------------------------------------------------------------------------

///////////////////////////////////
// init
///////////////////////////////////


initStage();

[wolter]

Klasse, was so langsam alles mit AS3 entsteht. Aber ich denke, Du solltest nicht die Debug-Version der Datei isn Netz stellen .

Lg,

Sascha.

[pwdVergesser]

Zitat von wolter

Du solltest nicht die Debug-Version der Datei isn Netz stellen .

"uuups" - war ich mal wieder betriebsblind.
danke für den tip.


pwd

[pixartist]

ich will zoomen xD

[pwdVergesser]

...das ließe sich auch noch implementieren...

[pixartist]

Zitat von pwdVergesser

...das ließe sich auch noch implementieren...

jau is aber hammer-rekursionsintensiv oder?

edit: du scheinst es ja drauf zu haben, kannste kurz nen blick in meinen farb thread werfen? ich hab probleme mit nem 32 bit-bitshift

danke

[pwdVergesser]

und gerade mit farbumwandlungen und den ganzen sachen
habe ich so richtig probleme. das mache ich ja in meinem
script auch echt übel...

da bin ich nicht der beste ansprechpartner für...

pwd

[pixartist]

ich hab grade rausgefunden, dass man hex werte nicht um 32 bit shiften kann ARGH! -.-

[pwdVergesser]

na dann.

[sebastian]

Wieder mal eine coole Spielerei

( Solltest aber auch langsam mal auf OOP umsteigen )

lg

[pwdVergesser]

@Sebastian W:
Alte Gewohnheiten != OOP...

...aber recht haste´...

[Aerks]

Sehr schön. Die Farben sehen doch schon gut aus.

Und nun zum Codeteil der die Farben selektiert....

      if (cnt == 0) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+20) ;
				efxStage.setPixel( s , r , color );
			}						
			
			[...Fraktale Anhäufung von IFs gesnippt...]
	
			if (cnt >= 82 && cnt < 86) {
				var color:Number = cnt << 16 | cnt << 8 | (cnt+10) ;
				efxStage.setPixel( s , r , color );
			}

*ohnmächtig_werd*

ALTER, VERWALTER!!!1 FÜR DIESEN RIESIGEN IF-HAUFEN MUSS MAN DICH EINFACH HAUEN, REITI !!!!!!1!1

OK, ist zwar schnell hingemalt und Eperimentalcode und du hast gesagt
"den code nicht gleich zerreißen", aber es kam jetzt einfach so über mich...


OK. Spaß beiseite. Meiner Meinung nach ist die schnellste Möglichkeit, so ein Fraktal
zu kolorieren, folgende:

Man schreibt den IterationsZähler einfach direkt ins Bitmap rein ohne
Shift-Gewichse ohne Umrechnung ohne alles.

efxStage.setPixel( s , r , cnt );

Dann hätte man einfache, blaue Abstufungen bis zur maximalen Iteratationsstufe. Der Wert
sollte also 0xFF nicht überschreiten (höhere Maximalwerte sind mit AS3 auf
Durchschnittsrechnern eh nicht zu machen, wenn man das ganze in Echtzeit animieren
möchte.)

Die Bitmap koloriert man jetzt hinterher ganz einfach mit efxStage.paletteBitmap(...) nach. Man hat dabei alle Freiheiten sich die Farbverläufe so einzustellen, wie man möchte.

Das ist wesentlich schneller, als die Farbe langsam von Hand zu ermitteln.
In diesem Fall kann der Flashplayer die Kolorierung nativ erledigen und der Overhead, daß jedes Pixel zwei mal beschrieben wird kann man dann auch verschmerzen.

dazu noch ein wenig perlin und displacement...

Ich würde das Fraktal lieber animieren lassen und die MouseEffekte weglassen,
die haben mit dem Fraktal eigentlich nichts zu tun und machen es eher kaputt, als daß sie es untermalen. Aber ist wohl Geschmackssache.

Ich hab im Zug mal einen animierten MandelbrotFlug angefangen.
Im Moment hab ich keine Zeit, aber am WE poste ich den Source mal hierein.

Dann sieht man auch an einem Beispiel, wie die Kolorierung mit paletteMap funktioniert.

Ich hab´s zwar nicht nachgemessen, aber empfand es subjektiv so wesentlich schneller, als das explizite einfärben mit AS-Code per Pixel.

Viele Gruesse
=:] Aerks

[Aerks]

ich hab grade rausgefunden, dass man hex werte nicht um 32 bit shiften kann ARGH! -.-

Normale INTs sind ja auch nur 32Bit breit. Wenn Du die um 32Bit shiftest ist ja nix mehr drin. Was wolltest Du denn machen?

Viele Gruesse
=:] Aerks

[pwdVergesser]

@Aerks:
Der Herr Werner mal wieder... ...aber absolut recht haste...

Wenn Du auf der Zugfahrt von Düsseldorf nach Essen und andersherum noch
am Rechner hackst - dann ehrliche gratuliere... da schlafe ich immer vor mich
hin...

bin mal auf dein animiertes mandelbrot-fraktal gespannt.


verabschiede mich mit einem lauten "Akkkkselllll" ( == Aerks Insider)...


=)
pwd

[Aerks]

Wenn Du auf der Zugfahrt von Düsseldorf nach Essen und andersherum noch am Rechner hackst - dann ehrliche gratuliere... da schlafe ich immer vor mich hin...

Lust hab ich auch nicht immer, oft meditier ich auch nur rum (== blöd aus dem Fenster glotzen).

Das produktivitätssteigernde Ambiente einer S-Bahn darf man allerdings nicht unterschätzen. Man wird nicht abgelenkt, weil das Umfeld (Pissgestank, Zugluft, Lärm) nicht besonders attraktiv ist. Nur eine Horde Teens - mit ultrafieser R&B-Mucke, die im Volksempfängerstyle durch einen knarzenden Handylautsprecher dröhnt - können dann noch die Lust am coden empfindlich stören.

bin mal auf dein animiertes mandelbrot-fraktal gespannt.

Gibts`s hier zum ansehen:

http://www.rgblaster.de/ff/fractal_pilot/

Zu Beginn ist es ja noch lustig und ich komme auf Frameraten von 9-13 (je nachdem wieviel man von der MB-Menge im Bild hat) aber mit fortschreitendem Zoom, steigt natürlich auch die Anzahl der Iterationen und ich dümpel dann so am Ende bei 2fps rum.

Um das Ganze zu beschleunigen hab ich teilweise mehr oder weniger rumgesaut. Die Auflösung ist halbiert. Die Iterationschleifen sind 2mal ausgerollt und in einem Schleifen-Durchlauf werden 4 Punkte aufeinmal berechnet. So kann ich in einem Bereich von 4 Punkte die Berechnungsreihenfolge wechseln und ein paar Tests machen. Gehören die beiden äußeren Punkte zur MandelbrotMenge, dann nehm ich einfach an, daß die inneren beiden es auch sind und setze sie einfach auf schwarz. Das funzt recht prima, nutzt aber in tieferen Vergrösserungen nichts mehr.

Interessierten kann ich nur empfehlen mal mit Xaos rumzuspielen: Ein Echtzeit-Fraktal-Explorer mit sehr ordentlicher Geschwindigkeit. Gibt's für alle Plattformen.

Man kann hier auch genau sehen, was für ein Potential zur Beschleunigung der Berechnung noch brachliegt. So wie ich das sehe, berechnet das Programm nur die neuen Pixel. Wenn ich in das Bild hereinzoome werden nur die entstehenden Lücken neu berechnet.

Es haben auch schon andere mit Fraktalen in Flash rumgespielt:

Einmal natürlich der Herr R. in diesem Thread

Erwähnenswert ist hier die Iterationsformel, die ich nicht verstehe. Der Ausdruck ist kürzer und sollte demnach schneller sein, aber ist das "nach Lehrbuch" so nicht falsch? Das Fraktal sieht aber ordentlich aus. Probier ich beizeiten mal aus.

Edwin Heijmen hat ein JuliaFraktal animiert.

Milan Toth hat auf gotoandplay.it einen rotierenden FraktalZoomer gebaut. Kommentierter Source ist auch vorhanden.

Unser margaris aus dem Flashforum hat aus mehreren Bildern einen schönen Fractalzoom-Fake gebastelt.

Mir fallen noch viele Sachen ein, wie man den FractalPilot optimieren könnte. Man könnte die Auflösung und die Iterationstiefe dynamisch der Framerate anpassen, so daß fixe Rechner entsprechend detaillierte Bilder liefern können. Ein Autopilot zu den schönsten Punkten wäre auch nicht schlecht und vielleicht eine Option mit fixer Farbpalette aber ich mag's eben schön bunt.

Der Source lad ich als Anhang hoch. Kommentare reich ich ggf. noch nach. Der innerste Loop für die Iterationsberechnung ist ziemlich unleserlich, weil alles ausgerollt ist (Ich will Macros), aber da muss man eben durch.

"Akkkkselllll"

Das hab ich ja schon ewig nicht mehr gehört.

Viele Gruesse
=:] Aerks