animation mit linien

[sonderformat]

guten morgen,

ich habe die glorreiche aufgabe bekommen,
bis montag für meine schule eine animation
zu machen, die auf irgendeiner veranstaltung
gezeigt werden soll.

es soll ein netz aus linien sein, das sich stetig ändert.
also eine gewisse anzahl an linien (Random1) zu verschiedenen
zeiten geändert (Random2) sollen sich zufällig im Raum bewegen
und überlagern. Wäre cool, wenn die Speed der Bewegung auch noch
Variieren würde. Die Linien sollen dabei immer über die volle Filmfläche, also bis zum Rand gehen.


Mit meinem bisherigen Flashkönnen habe ich das bisher geschafft.
Das haut aber keinen so richtig vom Hocker?!

Vielleicht hat jemand einen Hinweis?

Thanks a lot!

Norbert

[hgseib]

- erhöhe die framerate so auf 120
- nimm die leeren frames aus der zeitleiste raus
- nimm die zahl aus Math.random raus
- setze die random-faktoren auf die grösse des swf's
- ändere auch mal liniendicke und farbe

- und lass sinnige texte über den bildschirm wandern:
linien sind grumm
das leben ist eine linie
wenn linien denken könnten

und lauter so einen stuss. wirkt höchst prefessionell und keiner wird zugeben wollen, das er den sinn von dem ganzen nicht versteht ;-)

[sonderformat]

Hallo hgseib,

danke für die immer schnellen Anworten und Hilfe im Forum.

Ich sollte mir wohl lieber die rote Clownsnase aufsetzen und
am Montag versuchen, die Leute mit einer Polonaise zu einer Linie zu animieren, aber Gott wollte es anders.


Bin auf Thread "netzanimation" gestoßen und habe mir das Tutorial
bei http://www.bit-101.com/tutorials/ unter nodes angesehen.

Das ist es! Und äußerst spannend noch dazu.
Ich lerne gerade so viel dazu.

und daraus ergeben sich fragen, die ab und zu auch dumm sind.
sorry dafür!

meine nodes sollen sich nur auf den Randlinien des Films bewegen,
aber mein hirn denkt daran vorbei?!

numNodes = 10;
nodez = [];
for(i=0;i<numNodes;i++){
    node = attachMovie("node", "n"+i, i);
    nodez[i] = node;
    
    // die nodes sollen sich auf den randlinien des films bewegen
    // das ist aber doch schon wieder schwachsinn oder?
    node._x = a;
    node._y = b 
    if(a == 0 or a == 1024){
        b = Math.random()*768;
    }else if(b == 0 or b == 768){
        a = Math.random()*1024;
        }
    //node._x = Math.random()*1024;
    //node._y = Math.random()*768;
    
    node.vx = Math.random()*10-5;
    node.vy = Math.random()*10-5;
    node.onEnterFrame = nodeMove;
}
minDist = 1024;
_root.onEnterFrame = function(){
    var i, j, nodeA, nodeB, dx, dy, dist;
    clear();
    for(i=0;i<nodez.length-1;i++){
        nodeA = nodez[i];
        for(j=i+1;j<nodez.length;j++){
            nodeB = nodez[j];
            dx = nodeB._x - nodeA._x
            dy = nodeB._y - nodeA._y
            dist = Math.sqrt(dx*dx+dy*dy);
            if(dist<minDist){
                alpha = 100;
                lineStyle(1, 0xffffff, alpha);
                moveTo(nodeA._x, nodeA._y);
                lineTo(nodeB._x, nodeB._y);
            }
        }
    }
}
 
//hier müsste es eigentlich passen
function nodeMove(){
    this._x += this.vx;
    this._y += this.vy;
    if(this._x>1024){
        this._x = 0;
    } else if(this._x<0){
        this._x = 1024;
    }
    if(this._y>768){
        this._y = 0;
    } else if(this._y<0){
        this._y = 768;
    }
} 

[sonderformat]

es funktioniert fast.
haha. ich bin gar nicht so doof! nur ängstlich.

die netzknoten liegen jetzt alle auf der randlinie.
also x 0 oder x1024 oder y0 oder y768.

da kommt schon die nächste herausforderung:
die knoten dürfen sich nur am rand entlangbewegen,
so das nur die diagonalen verbindungen zu sehen sind.
schaff ich das auch selber?

numNodes = 10;
nodez = [];
for(i=0;i<numNodes;i++){
    node = attachMovie("node", "n"+i, i);
    nodez[i] = node;
    
    //es funktioniert!!!
    node._x = 0 || 1024;
    node._y = 0 || 768;
    a = node._x
    b = node._y
    
    if(a == 0 || a == 1024){
        b = Math.random()*768;
    } else if(b == 0 || b == 768){
        a = Math.random()*1024;
    }
    
    //node._x = Math.random()*1024;
    //node._y = Math.random()*768;
    node.vx = Math.random()*10-5;
    node.vy = Math.random()*10-5;
    node.onEnterFrame = nodeMove;
}
minDist = 1280;
_root.onEnterFrame = function(){
    var i, j, nodeA, nodeB, dx, dy, dist;
    clear();
    for(i=0;i<nodez.length-1;i++){
        nodeA = nodez[i];
        for(j=i+1;j<nodez.length;j++){
            nodeB = nodez[j];
            dx = nodeB._x - nodeA._x
            dy = nodeB._y - nodeA._y
            dist = Math.sqrt(dx*dx+dy*dy);
            if(dist<minDist){
                alpha = 100;
                lineStyle(1, 0xffffff, alpha);
                moveTo(nodeA._x, nodeA._y);
                lineTo(nodeB._x, nodeB._y);
            }
        }
    }
}
function nodeMove(){
    this._x += this.vx;
    this._y += this.vy;
    if(this._x>1024){
        this._x = 0;
    } else if(this._x<0){
        this._x = 1024;
    }
    if(this._y>768){
        this._y = 0;
    } else if(this._y<0){
        this._y = 768;
    }
} 

[hgseib]

"..Ich sollte mir wohl lieber die rote Clownsnase aufsetzen.."
wenn's ne gestreifte ist, warum nicht. aber obacht! quergestreift macht dick.

wenn du fla's hochladen würdest, dann könnte man dir eventuell helfen.
attachMovie("node" ...
ich hab dein node-mc nicht und weiss auch nicht wie es aussieht.

-----
ok, da ist garnichts drinn

[hgseib]

lustige spielerei:
- da deine notes ja nie echt gebraucht werden, kannst du auch einfache objekte nutzen.
- den abstand misst niemand nach, aber wurzel ziehen ist zeitaufwendig
- hab's nicht mit der stoppuhr nachgemessen, aber lieber ein onEnterFrame als für jeden note ein eigenes
- du zeichnest auf _root. ich zeichne in mc's, lasse die verblassen und dann löschen ich sie. so kommt etwas mehr leben in die bude ;-)

_quality="LOW";
//
b = 1024;
h = 768;
speed = 20;
anzNodes = 30;
minDist = 250;
anzLevels = 8;
level = anzLevels;
nodez = [];
//
function fRnd() {
    return speed*(.25+.75*Math.random())*(Math.random()<.5 ? 1 : -1);
}
// init
for (i=0; i<anzNodes; i++) {
    nodez.push({x:Math.random()*b, y:Math.random()*h, vx:fRnd(), vy:fRnd()});
}
//
_root.onEnterFrame = function() {
    // neue positionen
    for (var i = 0; i<anzNodes; i++) {
        with (nodez[i]) {
            x += vx;
            y += vy;
            if (x>b || x<0) {
                vx = -vx;
            }
            if (y>h || y<0) {
                vy = -vy;
            }
        }
    }
    // neu zeichnen
    _root.createEmptyMovieClip('m'+level, level);
    with (_root['m'+level]) {
        lineStyle(1, 0xffffff);
        for (var i = 0; i<anzNodes-1; i++) {
            var nodeA = nodez[i];
            for (var j = i+1; j<anzNodes; j++) {
                var nodeB = nodez[j];
                if (Math.abs(nodeB.x-nodeA.x)+Math.abs(nodeB.y-nodeA.y)<minDist) {
                    moveTo(nodeA.x, nodeA.y);
                    lineTo(nodeB.x, nodeB.y);
                }
            }
        }
    }
    // levels verblassen
    for (var i = 1; i<anzLevels; i++) {
        _root['m'+(level-i)]._alpha = 100*(1-i/anzLevels);
    }
    _root['m'+(level-anzLevels)].removeMovieClip();
    level++;
}; 

ach ja, an der wand lang - laaaaangweilig

_quality="LOW";
//
b = 1024;
h = 768;
umfang = b+h+b+h;
speed = 10;
anzNodes = 12;
maxDist = 200;
nodez = [];
//
function fRnd() {
    return speed*(.25+.75*Math.random())*(Math.random()<.5 ? 1 : -1);
}
// init
for (i=0; i<anzNodes; i++) {
    nodez.push({x:0, y:0, pos:Math.random()*umfang, v:fRnd()});
}
//
_root.onEnterFrame = function() {
    // neue positionen
    for (var i = 0; i<anzNodes; i++) {
        with (nodez[i]) {
            pos = (pos+v+umfang)%umfang;
            if (pos<b) {
                x=pos, y=0;
            } else if (pos<b+h) {
                x=b, y=pos-b;
            } else if (pos<b+h+b) {
                x=b-(pos-b-h), y=h;
            } else {
                x=0, y=h-(pos-b-h-b);
            }
        }
    }
    // neu zeichnen
    clear();
    lineStyle(1, 0xffffff);
    for (var i = 0; i<anzNodes-1; i++) {
        var nodeA = nodez[i];
        for (var j = i+1; j<anzNodes; j++) {
            var nodeB = nodez[j];
            if (Math.abs(nodeB.x-nodeA.x)+Math.abs(nodeB.y-nodeA.y)>maxDist) {
                moveTo(nodeA.x, nodeA.y);
                lineTo(nodeB.x, nodeB.y);
            }
        }
    }
}; 

[RedSaint]

ihr seid zwar scheinbar schon fast da wo ihr hinwolltet, aber hier mal ein anderer ansatz der mir zu dem thema eingefallen ist:


Tiefergehender Ansatz gesucht: Wellenlinie(n)





_RED_



[edith]: hab mir das von euch gerade mal angesehen > sieht doch genial aus! also echt nette spielerei ... wow [/edith]

[sonderformat]

danke@hgseib!

das sieht gut aus. ich habe das jetzt
so gemacht, dass die Knoten am
Rand im Einfallswinkel abprallen lasse.

Ich muss Deinen Code noch nachvollziehen.
Vor allem das mit dem Umfang wurmt mich.

Mein Kopf verknüpft das ganze gerade mit
deinem Ballistik-Tutorial und erinnert mich
an:

http://www.sodaplay.com
http://www.sodarace.net

Ist schon älter, aber vielleicht kennt es jemand
noch nicht. Ich finde es passt hierher.
Ich schaue es mir immer wieder gerne an.

Grüße

Norbert

[sonderformat]

Hallo zusammen,

Spiele immernoch mit dem Liniennodegarden rum.
habe mir etwas viel vorgenommen.

Problem 1:
Versuche gerade, das Browserfenster zu skalieren und
die linien sollen immernoch am rand entlanglaufen.
ich denke, ich muss den nodegarden nach resize reloaden, aber wie?

Problem 2:
Die Knoten hängen jetzt zum größten Teil oben links in der Ecke?

Problem 3:
Habe lineTo durch curveTo ersetzt.
Den Kurvenkontrollpunkten gebe ich ein Math.random(), was aber noch ziemlich langweilig ist.

Problem 4:
Wäre toll, wenn sich die Linien nur in der y-Achse am Rand bewegen
und nicht mehr in der x-Achse

Problem 3 und 4 müsste ich hinbekommen, Problem 1 ist die harte Nuss.

vielleicht hat ja jemand Lust, mitzuspielen.