Zeichnen aus Array , Geschwindigkeit

[betaheidi]

Hallo,

ich habe ein kleines Problem und weiss nicht wie ich es lösen soll, vielleicht kann mir jemand helfen.
Ich lasse Daten (aufgezeichnete Mauspositionen) aus einem Array lesen und diese dann zeichnen.
Klappt soweit alles wunderbar, nur hätte ich jetzt gerne, dass das Zeichnen schneller passiert.
Ich möchte sozusagen den Prozess beschleunigen. Soweit ich weiss kann einem setInterval da weiterhelfen,
jedoch weiss ich nicht, wie ich dies in mein kleines Script einfügen kann, sodass es klappt.




Ich freue mich über jede Anregung und jeden Zuspruch.

Danke!

abSpielen.onRelease = function() {
    i = 0;
    _root.abSpielen.enabled = false;
    _root.abSpielen._alpha = 0;
    leerfilm.onEnterFrame = function() {        
        if (i < bildListe.length) {
            this._x = bildListe[i][0];
            this._y = bildListe[i][1];
            this._farbe = bildListe[i][2];
            this._staerke = bildListe[i][3];
            if ((i == 0) || (this._x == 123456789)) {
                moveTo(this._x, this._y);
            }
            lineStyle(this._staerke, this._farbe, 100);
            lineTo(bildListe[i][0], bildListe[i][1]);
        } else {
            delete this.onEnterFrame;
        }
        i++;
    };
}; 

[_geo_]

1. willkommen im Forum :-)

versuchs mal mit:

abSpielen.onRelease = function() {
        i = 0;
        _root.abSpielen.enabled = false;
        _root.abSpielen._alpha = 0;
        function zeichnen() {
            with(leerfilm){
                if (i < bildListe.length) {
                        this._x = bildListe[i][0];
                        this._y = bildListe[i][1];
                        this._farbe = bildListe[i][2];
                        this._staerke = bildListe[i][3];
                        if ((i == 0) || (this._x == 123456789)) {
                                moveTo(this._x, this._y);
                        lineStyle(this._staerke, this._farbe, 100);
                        lineTo(bildListe[i][0], bildListe[i][1]);
                } else {
                        clearInterval(interval);
                }
                i++;
            }
        };
        interval = setInterval(zeichnen,50);
}; 

[betaheidi]

Hallo _geo_

Vielen Dank für die schnelle Antwort!
Leider funktioniert es nicht. Mit dem von Dir
modifizierten Script zeichnet die Funktion bei mir
gar nicht mehr. Die Bezeichnung onEnterFrame
ist wichtig für das Starten, bzw. den Zeitpunkt des
Startens des Zeichenvorgangs.

Ich grübele weiter...

[leif]

... wusste noch gar nich, dass es ein setInterval() auch für Flash gibt! Hab grad mit rumprobiert und das ist ja ein komisches Ding.
Hab das auf einen random-Linienzeichner angewandt und mit verschiedenen FrameRate ausprobiert. Lustig: der zeichnet dann soviel Linien, wie er bis zum nöchsten Framewechsel schafft und trägt die dann als Gruppe auf die Bühne auf. Versehe ich die Funktion mit nem updateAfterEvent() sollte Flash ja eigentlich
nach jedem Linienzeichnen die Bühne refreshen. macht er auch - aber ziemlich langsam.

Hab ich ne FrameRate von 120, müsste ja (bei Unterlastung) alle 8.3 Millisecs ein Bild gezeichnet werden.
Was weiss ich, wie schnell der das bei nem onEnterFrame wirklich macht: jedenfalls sieht's schnell aus und wird sich wohl in der Region bewegen.
Wenn ich das stattdessen mit setInterval und updateAfterEvent() mache, sollte ich ja iegentlich die 120-Frame-Barriere sprengen können... wenn ich das Intervall auf z.B. 1 Millisec setze. Ist aber nciht der Fall: läuft extrem viel langsamer!
Denke also: in Sachen Geschwindigkeit bringt das wohl eher Nach- als Vorteile.

@betaheidi: Musst in die Funktion wahrscheinlich noch ein updateStageafterEvent() mit aufnehmen, damit zeichnet. Ansonsten kann man in Deinem Script noch ein paar Dinge beschleunigen:

- "bildListe.length" ist konstant; das musst Du nicht in jedem Frame abfragen und kannst Deine if-Abfrage dadurch beschleunigen. Wahrscheinlich ist "Array.length" auch langsamer, als wenn Du einfach "if (bildliste[i]!=undefined)" abfragst.

- verschachtelte Arrays kosten Zeit. Schneller ist es, alle Eigenschaften der Punkte in EIN Array zu schreiben, so dass jeder Punkt vier Array-Plätze belegt. bildliste[0] = _x des ersten Punkts, bildliste[1] = _y der ersten Punkts, bildliste[2] = farbe des ersten Punkts, bildliste[3] = staerke des ersten Punkts, bildliste [4] = _x des zweiten Punkts... etc.

- den Umweg über die Variablen "this._farbe" und "this._staerke" kannst Du Dir (und dem Script) ersparen; der kostet nur Zeit. Die Adressierung mit "this" im Übrigen nochmal mehr als eine lokale Variable mit "var _staerke = [irgendwas]". Also einfach direkt im lineTo() auf das Array zugreifen.

- eine if-Abfrage mit "||" ist (angeblich) langsam. Daher lieber zwei if-Abfragen schreiben (einen mit Kondition1, einen mit Kondition2) und jeweils den Funktionsblock eintragen - auch wenn er dann doppelt vorhanden ist.

[leif]

... ähem... Moment mal. Ist das wirklich beabsichtigt, dass Du Deinen Clip "leerfilm" mit jedem Frame an neue Koordinaten schiebst? Das kostet natürlich Performance satt...?

[betaheidi]

Vielen Dank Leif für die ausführliche Hilfe!
Ich werde mal schauen, dass ich mein Skript mit
Hilfe Deiner Ausführungen ein bischen "schlanker"
mache. Vielleicht bringt es ja Geschwindigket.

Was das Zeichnen angeht...ja, ich bewege den Clip
an die Koordinaten die aus dem Array gelesen
werden. Er beinhaltet die Darstellung eines Stiftes.
Aber vielleicht lasse ich das mal weg, wenn es
stark ausbremst.

Kann ich also in mein Skript irgendwie den setInterval
Befehl einbauen, oder muss ich es komplett umbauen?

Danke im Voraus!

[leif]

Also nach meinen knappen Untersuchungen scheint das setInterval() keine performancegünstige Lösung zu sein... und überdies merkwürdig zu reagieren: Ich würde also drauf verzichten. Lasse mich aber gern eines Besseren belehren... :-)

[betaheidi]

Ich habe mein Script etwas umgebaut und den setInterval Befehl untergebracht und siehe da, es funktioniert schneller. Danke hier schonmal an geo und leif!!!

abSpielen.onRelease = function() { 
var nachzeichenInterval = 1;
_root.zeichencontainer.clear(); 
_root.clear(); 
_root.i = 0; 
setInterval(nachzeichnen, nachzeichenInterval); 
}; 
function nachzeichnen() { 
    if (_root.i<_root.bildliste.length) { 
        if ((i == 0) || (bildListe[i][0] == 123456789)) { 
            _root.zeichencontainer.moveTo(bildListe[i][0], bildListe[i][1]); 
        }
        _root.zeichencontainer.lineStyle(bildListe[i][3], bildListe[i][2]);
        _root.zeichencontainer.lineTo(bildListe[i][0], bildListe[i][1]); 
        _root.i++; 
    }
} 

Jetzt noch eine Frage: Kann ich die aufgezeichneten MausKoordinaten, die ich in dem Array habe, auch auf einen Schlag grafisch darstellen, ohne es nachzeichnen zu lassen?

Nach ein bischen Recherche hier im Forum scheint mir dies nur zu funktionieren, indem ich aus den Array Daten mit Hilfe von PHP ein Pixelbild erstellen lasse. Liege ich da richtig, oder gibt es andere, flashinterne Möglichkeiten?

Danke!

[leif]

Wie willst Du die denn darstellen? Auf Pixel kannst Du mit Flash ja leider nicht direkt zugreifen. Kannst das aber simulieren, indem Du *ultrakurze* Linien zeichnest.
Auf einen Schlag machst Du das, indem Du alle Zeichenschritte innerhalb eines Framewechsels erledigst. ... Frage richtig verstanden?

[betaheidi]

Leider weiss ich ja nicht was in dem Array steht, da dies ja durch das bewegen der Maus erst mit Koordinaten gefüllt wird. D.h. es muss Schritt für Schritt ausgelesen werden.

Anders wäre das, wenn PHP aus den ArrayDaten ein Pixelbild erzeugt und dieses speichert. Das könnte ich dann direkt in Flash per loadMovie reinladen.

Habe ich mir mal so gedacht.

[leif]

Musst das Array natürlich Schritt für Schritt auslesen, egal wie Du es auswertest. Wenn Du es aber "auf einen Schlag" und nicht Stück für Stück zeichnen willst, kannst Du das doch problemlos machen.
Intern kannst Du zeichnen, was Du willst - auf die Bühne kommt es erst bei einem Framewechsel / StageRefresh.
Wenn Du also möchtest, dass das Array komplett gezeichnet auf einmal auf der Bühne auftaucht, musst Du lediglich alle Zeichenschritte innerhalb einer Schleife ohne Framewechsel erledigen. Also eine for- oder while-Schleife.
Ist darüberhinaus auch einfacher als setInterval() oder onEnterFrame.
Bin mir aber immer noch nicht sicher, ob wir hier von der gleichen Sache reden...? °_o

[betaheidi]

Das klingt interessant. Nur wie kann ich das skriptmäßig umsetzen, mit einer for oder while Schleife. Und wie zeichne ich intern, ohne dass es auf der Bühne sichtbar ist? Wenn Du mir da noch ein bischen auf die Sprünge helfen könntest, wäre ich Dir noch dankbarer, als ich es ohnehin schon für die ausführliche Hilfestellung bin!!

[leif]

Ich hab hier mal verschiedene Varianten gebastelt. Musst Du noch minimal an Dein Movie anpassen - Du musst keinen "leerfilm" und keine Arrayfüllung mehr erzeugen, weil Du die ja schon hast. Dafür läuft dieses Script zum Ausprobieren jetzt erstmal so, wie es ist.
(Habe dann übrigens doch inkrementierende Schleifen verwendet, weil die Laufrichtung der Schliefe ja die Zeichenreihenfolge beeinflusst).

/*** PREFS ***/
 
screenWidth = 600;
screenHeight = 600;
 
 
/*** FUNCTIONS ***/
 
randomHex = function () {
    // erzeugt eine Zufalls-HexZahl und gibt sie als String zurück; nötig für Zufallsfarbe
    if (random(2)) {
        return (String.fromCharCode(random(10)+48));
    } else {
        return (String.fromCharCode(random(6)+65));
    }
}
 
randomColor = function () {
    // erzeugt eine ZufallsFarbe und gibt sie als String zurück
    var myCol = "0x";
    var i=6; while (--i>-1) {
        myCol+=randomHex();
    }
    return myCol;
}
 
fill_bildliste = function (werte) {
    // füllt das Array bildliste mit Zufallswerten
    bildliste =[];
    var i = werte; while (--i>-1) {
        bildliste.push(random(screenWidth));        // x-koordinate
        bildliste.push(random(screenHeight));      // y-koordinate
        bildliste.push(randomColor());      // farbe
        bildliste.push (random(6));   // linienstärke
    }
}
 
zeichne_bildliste_at_once = function () {
    // zeichnet den Inhalt von bildliste "auf einen Schlag" 
    with (leerfilm) {
        leerfilm.moveTo (bildliste[0], bildliste[1]);
        var myLoopLen = bildliste.length;
        var i = -4; while ((i+=4)<myLoopLen) {
            lineStyle (bildliste[i+3], bildliste[i+2], 100);
            lineTo (bildliste[i], bildliste[i+1]);
        }
    }
}
 
zeichne_bildliste_step_by_step = function () {
    // zeichnet den Inhalt von bildliste "Stück für Stück" 
    leerfilm.i = 0;
    leerfilm.myLoopLen = bildliste.length-1;
    leerfilm.moveTo (bildliste[0], bildliste[1]);
    
    leerfilm.onEnterFrame = function () {
        var i = this.i;
        this.lineStyle (bildliste[i+3], bildliste[i+2], 100);
        this.lineTo (bildliste[i], bildliste[i+1]);
        if ((this.i+=4)>this.myLoopLen) this.onEnterFrame = null;
    }
}
 
zeichne_bildliste_step_by_step_speeded = function (steps) {
    // zeichnet den Inhalt von bildliste mit [steps] linien je frame 
    leerfilm.i = 0;
    leerfilm.myLoopLen = bildliste.length-1;
    leerfilm.moveTo (bildliste[0], bildliste[1]);
    leerfilm.steps = steps;
    leerfilm.actualstep = 0;
    
    leerfilm.onEnterFrame = function () {
        while(this.actualstep++<this.steps) {
            var i = this.i+this.actualstep*4;
            this.lineStyle (bildliste[i+3], bildliste[i+2], 100);
            this.lineTo (bildliste[i], bildliste[i+1]);
        }
        if ((this.i+=(4*this.steps))>this.myLoopLen) {
            this.onEnterFrame = null; 
        } else {
            this.actualstep=0;
        }
    }
}
 
 
 
/*** PROGRAM ***/
 
createEmptyMovieClip("leerfilm", 1);    // leeren Clip zum Zeichnen erzeugen - brauchste nicht, haste ja schon
fill_bildliste(300);    // Array mit 300 Zufallswerten füllen, um irgendwas zu haben - Deins ist ja schon gefüllt
 
// die unterschiedlichen varianten, um das Array zu zeichnen:
zeichne_bildliste_at_once();
//zeichne_bildliste_step_by_step();
//zeichne_bildliste_step_by_step_speeded(10);      
stop(); 

[betaheidi]

leif...Du bist der Hammer!!!
Tausend Dank!

Ich werde mir das Skript morgen mal genau anschauen und versuchen es komplett zu durchsteigen. Dank Deiner schon geleisteten Hilfe wird mir das gelingen!