[stuff] filtered cubic 3D

[pwdVergesser]

tach zusammen,


und weil es so ´n spaß macht...
hier ein kleiner 3D Würfel, gescriptet, mit so ein paar Filtern
versetzt

ansehen

Hier noch eine Variation - das ganze flirrt ein wenig mehr:

ansehen


Und hier mal was zum nachvollziehen und rumspielen:

/////////////////////////////////////////////////////
//  flat cubic burner
//  author : frank reitberger
//  site : http://www.dasprinzip.com
//  copyright 2006
/////////////////////////////////////////////////////


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


stop();


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

///////////////////////////////////
// import flash filter classes
///////////////////////////////////


import flash.display.BitmapData;
import flash.filters.*;
import flash.geom.*;



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

///////////////////////////////////
// setup firecracker global vars
///////////////////////////////////


var p:Object = new Object();

p.points = [
			{ x: -100, y: -100, z: -100 },
			{ x: +100, y: -100, z: -100 },
			{ x: +100, y: -100, z: +100 },
			{ x: -100, y: -100, z: +100 },
			{ x: -100, y: +100, z: -100 },
			{ x: +100, y: +100, z: -100 },
			{ x: +100, y: +100, z: +100 },
			{ x: -100, y: +100, z: +100 }];
			
var angle_x:Number = 0.01;
var angle_y:Number = 0.0075;
var angle_z:Number = 0.005;

var bindings:Array = new Array([0,1,0,1],[1,2,1,2],[2,3,2,3],[3,0,3,0],[4,5,4,0],[5,6,5,1],[6,7,6,2],[7,4,7,3]);


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

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

function initStage() {
	
	_root.efxStage = new BitmapData(Stage.width, Stage.height, true, 0x00FFFFFF);
	
	_root.createEmptyMovieClip("efxClip", _root.getNextHighestDepth());
	_root["efxClip"].attachBitmap(_root.efxStage, _root.getNextHighestDepth());	

	for ( var i:Number = 0; i<9 ;i++ ) {
		_root.createEmptyMovieClip("dot"+i,_root.getNextHighestDepth());
	}
	
	paint();
}



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

///////////////////////////////////
// paint flat cubic burner
///////////////////////////////////

function paint() {
		
	_root.onEnterFrame = function() {
	
		_root.efxStage.colorTransform(_root.efxStage.rectangle, new ColorTransform(1, 1, 1, 1, 1, -1, -1,-4));			
		_root.efxStage.applyFilter(_root.efxStage, _root.efxStage.rectangle, new Point(0, 0), new BlurFilter(2, 2, 2));	
		
		for (i=0; i<8; i++) {

			_root["dot"+i]._x = p.points[i].x+200;
			_root["dot"+i]._y = p.points[i].y+200;
			_root["dot"+i].lineStyle(1, 0xffffff, 100);
			_root["dot"+i].moveTo(p.points[bindings[i][0]].x+200,p.points[bindings[i][0]].y+200);
			_root["dot"+i].lineTo(p.points[bindings[i][1]].x+200,p.points[bindings[i][1]].y+200);				
			_root["dot"+i].moveTo(p.points[bindings[i][2]].x+200,p.points[bindings[i][2]].y+200);
			_root["dot"+i].lineTo(p.points[bindings[i][3]].x+200,p.points[bindings[i][3]].y+200);
			

			_root.efxStage.draw(_root["dot"+i]);
			_root["dot"+i].clear();

		}
		
		
		
		for ( var i:Number = 0; i<8 ;i++ ) {
			
			var px:Number = p.points[i].x;
			var py:Number = p.points[i].y;
			var pz:Number = p.points[i].z;

            // Rotation um x-Achse
            p.points[i].y = py*Math.cos(angle_x)-pz*Math.sin(angle_x);
            p.points[i].z = py*Math.sin(angle_x)+pz*Math.cos(angle_x);

            py = p.points[i].y;
            pz = p.points[i].z;

            // Rotation um y-Achse
            p.points[i].x = px*Math.cos(angle_y)+pz*Math.sin(angle_y);
            p.points[i].z =-px*Math.sin(angle_y)+pz*Math.cos(angle_y);

            px = p.points[i].x;

            // Rotation um z-Achse
            p.points[i].x = px*Math.cos(angle_z)-py*Math.sin(angle_z);
            p.points[i].y = py*Math.cos(angle_z)+px*Math.sin(angle_z);
			
			
        }

        paint();
	}
}


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

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

initStage();

Viel Spaß damit
pwd

[Janoscharlipp]

Sieht sehr schick aus, allerdings röchelt meine CPU gaanz böse, schätze mal 10 FPS, da kann man es nicht genießen.

[pwdVergesser]

hmmm...

wieviel FPS hast du denn, wenn du mein script ohne
das zuschalten des blur-filters, also nur mit dem color-
transform laufen läßt?

?
pwd

[[je]]

Sieht schön aus, aber auch hier leider sehr langsam. Wieso rufst du in onEnterFrame noch einmal paint() auf?

[Janoscharlipp]

Hmm, in der IDE läufts relative angenehm, der Blurfilter halbiert aber die Performance in etwa.

Die Verschachtelung von paint und onEnterFrame ist lustig, aber einfacher hättest du es mit

PHP-Code:

_root.onEnterFrame = paint; 


und paint dann ohne onEnterFrame und weiteren paint Aufruf.

[pwdVergesser]

paint()

an dieser stelle ist natürlich firlefanz...
bitte rausnehmen und so tun als hätte es da
nie gestanden...

pwd

[Aerks]

Ganz lustig. Ein paar Sachen sind mir aber aufgefallen:

Neben der schon angesprochenen paint-Geschichte:

_root.efxStage = new BitmapData(Stage.width, Stage.height, true,0x00FFFFFF);
--------------------------------------------------------------^

Transparenz ist bei diesem Beispiel sinnlos, braucht du ja eh nicht (weil Hintergrund komplett schwarz) und es geht dann auch (vermutlich) etwas schneller. Also lieber auf false setzen und den Hintergrund schwarz machen.

_root.efxStage.applyFilter(_root.efxStage, _root.efxStage.rectangle, new Point(0, 0), new BlurFilter(2, 2, 2));	
-----------------------------------------------------------------------------------------------------------^

Die Blur-Qualität ist meiner Meinung nach zuviel. Würde mal mit 1 probieren, damit das ganze etwas flotter läuft.

Eine Kleinigkeit: In jedem Frame erzeugst du eine neue Blur-Filer-Instanz und einen neuen "Point" Muss ja nicht sein. Eins reicht ja. Dasselbe für ColorTransform.


Was ich nicht verstehe: Wieso wird für jede Fläche (bzw. 2 Linien) ein einzelner MovieClip benötigt? Hat das einen Grund?
Man kann doch alles in einen Clip reinmalen und danach den ganzen Kram mit .draw in die Bitmap malen.
Geht so vielleicht auch einen Tick fixer. Wirkt in dieser Form fast wie ein Flash4 Überbleibsel.

Viele Gruesse
=:] Aerks

[Skorpion]

@Aerks: da wollte uns doch der gütige pwdVergesser nur eine kleine Freude machen und du schiesst ihm eine volle Breitseite rein... aua. Aber deine Argumente sind stichhaltig. Noch mehr aua.

@pwdVergesser: bin mir zwar über Sinn und Unsinn deines Scripts nicht ganz im klaren, aber das Ergebnis sieht interessant aus. Finde solche Experimente spannend. Danke für die Anregung.

[pwdVergesser]

@Aerks

Transparenz ist bei diesem Beispiel sinnlos, braucht du ja eh nicht (weil Hintergrund komplett schwarz) und es geht dann auch (vermutlich) etwas schneller. Also lieber auf false setzen und den Hintergrund schwarz machen.

...der Hintergrund hat einen Verlauf - evtl. nicht auf deinem Monitor...

Eine Kleinigkeit: In jedem Frame erzeugst du eine neue Blur-Filer-Instanz und einen neuen "Point" Muss ja nicht sein. Eins reicht ja. Dasselbe für ColorTransform.

...hast recht - muß nicht - werde ich mal ändern.

Was ich nicht verstehe: Wieso wird für jede Fläche (bzw. 2 Linien) ein einzelner MovieClip benötigt? Hat das einen Grund?
Man kann doch alles in einen Clip reinmalen und danach den ganzen Kram mit .draw in die Bitmap malen.
Geht so vielleicht auch einen Tick fixer. Wirkt in dieser Form fast wie ein Flash4 Überbleibsel.

..."Mensch Thoooooorsten" ...ist doch nur mal eben als Flash-Filter-Spaß gedacht.
Zum ansehen...

Sicherlich kann man das auch alles in einem Clip malen usw. ...
man kann auch drüber streiten ob man _root verwenden sollte (sollte man
nicht) ... aber das mache ich dann wenn ich nicht "mal eben" was zum gucken
poste...

@skorpion

@pwdVergesser: bin mir zwar über Sinn und Unsinn deines Scripts nicht ganz im klaren, aber das Ergebnis sieht interessant aus. Finde solche Experimente spannend. Danke für die Anregung.

Danke danke - denn so war es gedacht - als Anregung...


pwd

[querkopf]

Ruckelt bei mir im Browser leider auch enorm.
Sowohl im Firefox als auch im IE mit dem neuesten Player.
Habe mir dann die SWF mal runtergeladen und von lokal getestet. Da läuft es dann super flüssig

Bis dann,
-querkopf-

[[je]]

Eine flüssigere Variante:
http://je2050.de/showroom.php?file=fadecube

-- Auch lustig: Icecube

Dazu ein wenig den Code verändert, also lokale Variablen benutzt und die Technik auch geändert was die ganzen MovieClips da usw. angeht.

PHP-Code:

/////////////////////////////////////////////////////
//  flat cubic burner
//  author : frank reitberger
//  site : http://www.dasprinzip.com
//  copyright 2006
/////////////////////////////////////////////////////

import flash.display.BitmapData;
import flash.filters.*;
import flash.geom.*;

var points: Array = [
            { x: -100, y: -100, z: -100 },
            { x: +100, y: -100, z: -100 },
            { x: +100, y: -100, z: +100 },
            { x: -100, y: -100, z: +100 },
            { x: -100, y: +100, z: -100 },
            { x: +100, y: +100, z: -100 },
            { x: +100, y: +100, z: +100 },
            { x: -100, y: +100, z: +100 }];
            
var angle_x:Number = 0.01;
var angle_y:Number = 0.0075;
var angle_z:Number = 0.005;

var bindings:Array = new Array([0,1,0,1],[1,2,1,2],[2,3,2,3],[3,0,3,0],[4,5,4,0],[5,6,5,1],[6,7,6,2],[7,4,7,3]);

var w: Number = Stage.width;
var h: Number = Stage.height;

var screen: BitmapData = new BitmapData( w, h, false, 0 );
this.attachBitmap( screen, 1 );

var buffer: MovieClip = this.createEmptyMovieClip( '__buffer__', 0xff );
buffer._visible = false;

var scl: Number = .25;

var fx: Matrix = new Matrix;
fx.a = ( w + scl ) / w;
fx.d = ( h + scl ) / h;
fx.tx = -scl;

var damp: ColorTransform = new ColorTransform( .99, .91, .99, 1, 0, 0, 0, 0 );

var origin: Point = new Point;

var filter: BlurFilter = new BlurFilter( 2, 2, 1 );

this.onEnterFrame = function( Void ): Void
{
    screen.draw( screen, fx, damp );
    screen.applyFilter( screen, screen.rectangle, origin, filter );
    
    for ( var i: Number = 0; i < 8; i++ )
    {
        var bi: Array = bindings[ i ];
        
        buffer.clear();        
        buffer.lineStyle( 1, 0xffffff, 100 );
        
        buffer.moveTo( points[ bi[ 0 ] ].x + 200, points[ bi[ 0 ] ].y + 200 );
        buffer.lineTo( points[ bi[ 1 ] ].x + 200, points[ bi[ 1 ] ].y + 200 );                
        buffer.moveTo( points[ bi[ 2 ] ].x + 200, points[ bi[ 2 ] ].y + 200 );
        buffer.lineTo( points[ bi[ 3 ] ].x + 200, points[ bi[ 3 ] ].y + 200 );
        
        screen.draw( buffer );
    }
        
    for ( var i: Number = 0; i < 8; i++ )
    {
        var point: Object = points[ i ];
        
        var px:Number = point.x;
        var py:Number = point.y;
        var pz:Number = point.z;
        
        var sin: Function = Math.sin;
        var cos: Function = Math.cos;
        
        var cax: Number = cos( angle_x );
        var sax: Number = sin( angle_x );
        var cay: Number = cos( angle_y );
        var say: Number = sin( angle_y );
        var caz: Number = cos( angle_z );
        var saz: Number = sin( angle_z );

        point.y = py * cax - pz * sax;
        point.z = py * sax + pz * cax;

        py = point.y;
        pz = point.z;

        point.x =  px * cay + pz * say;
        point.z = -px * say + pz * cay;

        px = point.x;

        point.x = px * caz - py * saz;
        point.y = py * caz + px * saz;
    }
} 


[pwdVergesser]

auch cool - der farbige blur gefällt mir auch sehr gut.

aber auch hier verlangsamt sich die drehung des cubes
nach ca. eineinhalb "selbstumdrehungen" um 50%...

Und der Icecube ist bei mir performance-technisch widerum
leider ein killer...

pwd

[salazar]

@pwd: du weißt ja das es auf meinem rechner mal so gar nicht läuft. im firefox macht es kaum sinn.. naja. aber weiß ja von deinem rechner noch wie es ausehen soll

@je: wow, der totale performance schuub. deine variante kann ich mir fast problemlos sogar im ff anschauen! begeistert bin

grüße, sal

[pwdVergesser]

obwohl das ja nur die konsequenten umsetzungen
der anmerkungen von Aerks sind...

pwd

[salazar]

Zitat von pwdVergesser

obwohl das ja nur die konsequenten umsetzungen
der anmerkungen von Aerks sind...

hab ich ja gelesen... aber [je] hats halt umgesetzt. der performance schuub ist krass. aerks schrieb ja "Geht so vielleicht auch einen Tick fixer.".. also bei mir liegen da welten zwischen. kann es dir gerne morgen zeigen

cya, sal