Tiefergehender Ansatz gesucht: Wellenlinie(n)

[RedSaint]

hi leude,

ich hab eine intro idee von ner verzweifelten freundin bekommen ... klar kann ich helfen und nu??? - aber code mäßig hab ich kaum nen wirklichen ansatz ...

-> es geht darum dass mehrere wellen linien von oben und unten in einander laufen

-> jede wellenlinie hat dabei eine eigene "wellen bewegung"

-> das war´s ansich ...


für mich ist "wellenbewegung " == sinus & cosinus, und da das ganze durch ne linie dargestellt wird, kann man evtl. was mit lineTo bzw curveTo machen ... aber da hörts dann bei mir auch schon auf ... leider

und wenn ich am ende 10 wellen unten und 10 wellen oben hab .. wie mach ich das performant????

jemand nen ansatz? oder ne idee? oder nen begriff zum nachschlagen im AS handbuch? oder ...



danke

_RED_

[honifred]

hi red, alter achim!

hier hätte ich vielleicht einen ansatz. habe den hier tief in meinem flashordner gefunden. kannst de mal anschauen

var t=0;
var z;
onEnterFrame=function(){
        clear();
        t+=0.1;
        z=Math.sin(t)*100;
        lineStyle(1,0x000000,100);
        beginFill(0xffff11,100);
        moveTo(100,100);
        lineTo(100,200);
        curveTo(200,z+200,300,200);
        curveTo(400,-z+200,500,200);
        lineTo(500,100);
        lineTo(100,100);
        endFill();
}
stop(); 

[RedSaint]

warum "wackelt" das so wenn ich das nun so umcode:

PHP-Code:

var t=0; 
var z; 
this.onEnterFrame=function(){ 
        clear(); 
        m=random(100)+100
        t+=0.1; 
        z=Math.sin(t)*m; 
        lineStyle(1,0x000000,100); 
        moveTo(100,200); 
        curveTo(200,z+200,300,200); 
        curveTo(400,-z+200,500,200); 
} 
stop(); 


denn ich will ja hinterher wellenlinen haben die uterschiedlich fließen ...

-> und ne kurze erkläre zu dem z=Math.sin(t)*m; wäre echt lasse ... weil raffen tu ich da nichts... hab mir auch nochmal smirgels sinusquatsch angeschaut... aber wirklich peilen tu ich dat nicht ... nur sehn wa passiert... aber geklick hat´s noch nicht

_RED_

hallo

du suchst nicht zufällig den ozean?

createEmptyMovieClip("ocean", 10);
ptList=new Array(), ptList2=new Array();
anzahl = 12;
breite = Stage.width/anzahl*(anzahl+6);
for (var i = 0; i<anzahl; i++) {
    x = ((breite/(anzahl-1))*i);
    ptList[i] = {n:0, dz:i%2 ? (-(random(100))) : (random(100)), amp:(1+Math.random())/10, x:x, y:100};
    ptList2[i] = {x:0, y:0};
}
ocean.onEnterFrame = function() {
    for (var i = 0; i<anzahl; i++) {
        ptList[i].x -= 3;
        if (ptList[i].x<-Stage.width/anzahl*3) {
            ptList[i].x = breite;
            ptList.push(ptList.shift());
        }
        ptList[i].n += ptList[i].amp;
        ptList[i].y = Math.sin(ptList[i].n)*ptList[i].dz+100;
        ptList2[i].x = (ptList[i].x+ptList[i+1].x)/2;
        ptList2[i].y = (ptList[i].y+ptList[i+1].y)/2;
    }
    with (this) {
        clear();
        lineStyle(3, 0x0099cc);
        beginFill(0x0099cc);
        moveTo(0, Stage.height);
        lineTo(ptList[0].x, ptList[0].y);
        for (var i = 1; i<(anzahl-2); i++) {
            curveTo(ptList[i].x, ptList[i].y, ptList2[i].x, ptList2[i].y);
        }
        curveTo(ptList[i].x, ptList[i].y, ptList[i+1].x, ptList[i+1].y);
        lineTo(ptList[i+1].x, Stage.height);
        endFill();
    }
}; 

hier bekommt jeder kurvenabschnitt eine eigene amplitude, innerhalb derer die kurve schwingt. dabei werden einstiegs und ankerpunkte auf der x-achse horizontal 'durchgescrollt' und bei unterschreiten eines bestimmten wertes einfach wieder an das ende der punktliste gesetzt.

anbei auch nochmal als zip zum kucken.

Gruß & Kuss,
Tante Amanda

[RedSaint]

jaaaaaaaaaaaaaaa - genial ... ich denk damit komm ich auf jeden fall zu meinem ansatz zum weiterbasteln !


nur hab ich dass problem dass ich wieder nur seh was passiert - aber die code zeilen im detail nicht peile ... haste evtl. 5 minuten um mir das script zu kommentieren? wäre genial






grüße

_RED_

hi RedSaint.

klar, mach ich heute abend oder spätestens morgen..
leichter wird es aber trotzdem sein, wenn du mir vorab ein paar sachen aufschreibst, die du partout nicht verstehst. weil, dann weiß ich, daß du dich schonmal ein wenig mit dem script bschäftigt hast und muß mir nicht für alles kommentare aus den fingern saugen...bin nämlich verhältnismäßig kommentierfaul, weisst du?

gruß,
Tante Amanda

[RedSaint]

super genial tante amanda!!!

machen wir doch so... ich kommentier mal selbst wo ich´s kann:

PHP-Code:

createEmptyMovieClip("ocean", 10);  // mache neuen Mc, name: ocean, tiefe 10
ptList=new Array(), ptList2=new Array(); // 2 neue arrays anlegen
anzahl = 12; // variable anzahl ist auf wert 12
breite = Stage.width/anzahl*(anzahl+6); //var breite is bühnenbreite durch var anzahl mal anzahl+6 --->warum?
for (var i = 0; i<anzahl; i++) {  // solange var i kleiner als var anzahl, zähl mir i hoch
    x = ((breite/(anzahl-1))*i); // var x gleich breite durch (anzahl -1) mal i
    ptList[i] = {n:0, dz:i%2 ? (-(random(100))) : (random(100)), amp:(1+Math.random())/10, x:x, y:100}; // ???
    ptList2[i] = {x:0, y:0}; // zweiter array stelle i =_y und _x pos 0
} // evtl. kurz: was MACHT diese schleife?
ocean.onEnterFrame = function() { // der leere MC OEF
    for (var i = 0; i<anzahl; i++) { // wieder die for schleife
        ptList[i].x -= 3; // ??
        if (ptList[i].x<-Stage.width/anzahl*3) { //??
            ptList[i].x = breite; // ??
            ptList.push(ptList.shift());// ?? 
        } 
        ptList[i].n += ptList[i].amp; // ??
        ptList[i].y = Math.sin(ptList[i].n)*ptList[i].dz+100; // ??
        ptList2[i].x = (ptList[i].x+ptList[i+1].x)/2; // ??
        ptList2[i].y = (ptList[i].y+ptList[i+1].y)/2; // ??
    } 
    with (this) {  // mit dem ocean MC tue ausserdem folgendes
        clear(); // ??
        lineStyle(3, 0x0099cc); // lienen art
        beginFill(0x0099cc);  // fang an zu füllen
        moveTo(0, Stage.height); // beweg ihn zu...
        lineTo(ptList[0].x, ptList[0].y); // line machen zu ...
        for (var i = 1; i<(anzahl-2); i++) {  // ??
            curveTo(ptList[i].x, ptList[i].y, ptList2[i].x, ptList2[i].y); // ??
        } 
        curveTo(ptList[i].x, ptList[i].y, ptList[i+1].x, ptList[i+1].y); // ??
        lineTo(ptList[i+1].x, Stage.height); // linie machen zu ...
        endFill(); // ende der füllung
    } 
}; 


ansich brauch ich die füllung und dass sich das ganze gebilde bewegt auch garnicht ... nur die wellenlinie und wellenbewegung - aber ich wart mal auf deinen post evtl wird´s dann alles nochmal a bisserl klarer ...


danke und cu

_RED_

hallo hi hi..

sooo...eigentlich, wie sollte es anders sein, ist das alles gar nicht so schwierig..

createEmptyMovieClip("ocean", 10);  // mache neuen Mc, name: ocean, tiefe 10
ptList=new Array(), ptList2=new Array(); // 2 neue arrays anlegen 
anzahl = 12; // variable anzahl ist auf wert 12
breite = Stage.width/anzahl*(anzahl+6); //var breite is bühnenbreite durch var anzahl mal anzahl+6 --->warum? 
 

anzahl+6 wird hier als faktor für den bruchteil der breite der stage heran gezogen. das ist das 'sicherheitspolster', damit die kurvensegmente nur ausserhalb der sichtbaren bereiche links abgeschnitten und rechts wieder drangesetzt werden.

for (var i = 0; i<anzahl; i++) {  // solange var i kleiner als var anzahl, zähl mir i hoch 
    x = ((breite/(anzahl-1))*i); // var x gleich breite durch (anzahl -1) mal i 
    ptList[i] = {n:0, dz:i%2 ? (-(random(100))) : (random(100)), amp:(1+Math.random())/10, x:x, y:100}; // ??? 
    ptList2[i] = {x:0, y:0}; // zweiter array stelle i =_y und _x pos 0 
} // evtl. kurz: was MACHT diese schleife? 
 

diese schleife füllt die im ersten scriptteil deklarierten arrays mit objekten, die wiederum variablen zur beschreibung meiner punkte enthalten, sowie werte für die randomisierte sinusschwingung.

pList enthält also nach der schleife 12 objekte, die wiederum folgende vars enthalten:

n = zählervariable
dz = differenz, auf deren basis die y-koordinate der vertexpunkte später schwingt. hier wird entweder ein wert von 0 bis -99 oder von 0 bis +99 zurückgegeben, je nachdem, ob i (also die zählervariable der schleife) grade oder ungrade ist - also im wechsel.
amp = amplitude, randomisierter wert für die intensität der schwingung
x = x-koordinate des vertexpunktes des kurvensegments
y = y-koordinate des vertexpunktes des kurvensegments

pList2 wird mit 12 objekten gefüllt á

x = x-koordinate des ankerpunktes des kurvensegments
y = y-koordinate des ankerpunktes des kurvensegments

wobei die werte der ankerpunkte erst später unter einbeziehen der vertexpunkte berechnet werden.

ocean.onEnterFrame = function() { // der leere MC OEF 
    for (var i = 0; i<anzahl; i++) { // wieder die for schleife 
        ptList[i].x -= 3; // ?? 
        if (ptList[i].x<-Stage.width/anzahl*3) { //?? 
            ptList[i].x = breite; // ?? 
            ptList.push(ptList.shift());// ?? 
        } 

die x-koordinate eines jeden vertexpunktes im bezeichneten array wird pro onEnterFrame-aufruf um 3 px nach links bewegt. ist die x-koordinate eines vertexpunktes dabei kleiner als das bereits erwähnte 'sicherheitspolster' im negativen bereich, wird dem vertexpunkt als x-koordinate wieder die breite zugewiesen. als folge switched dieser punkt von links außerhalb des sichtbaren bereichs nach ganz rechts außerhalb des sichtbaren bereichs - eigentlich ein ähnliches prinzip wie die frühen horizontalen scrollmenus à la yugop. zum schluß wird noch innerhalb des arrays das gleiche getan, was mit der x-koordinate des vertexpunktes auch gemacht wurde: vom ersten index auf den letzten.

ptList[i].n += ptList[i].amp; // ?? 
        ptList[i].y = Math.sin(ptList[i].n)*ptList[i].dz+100; // ?? 
        ptList2[i].x = (ptList[i].x+ptList[i+1].x)/2; // ?? 
        ptList2[i].y = (ptList[i].y+ptList[i+1].y)/2; // ?? 
    } 

hier geht die schwingung von statten. wie gesagt, bringt jeder punkt seine eigenen schwingungswerte mit. die mit der amplitude heraufgezählte variable n schwingt mittels sinus im bereich, den der differenzwert dz vorgibt. 100 wird hinzuaddiert, weil das die anfangs y-koordinate des vertexpunktes war. in den letzten zeilen werden die ankerpunkte berechnet, die sich jeweils aus dem mittleren abstand des in der schleife momentan aktuellen und des jeweils nächsten vertexpunktes ergeben.

with (this) {  // mit dem ocean MC tue ausserdem folgendes 
        clear(); // ?? 
        lineStyle(3, 0x0099cc); // lienen art 
        //beginFill(0x0099cc);  // fang an zu füllen 
        //moveTo(0, Stage.height); // beweg ihn zu... 
        //lineTo(ptList[0].x, ptList[0].y); // line machen zu ... 
        moveTo(ptList[0].x, ptList[0].y);        
        for (var i = 1; i<(anzahl-2); i++) {  // ?? 
            curveTo(ptList[i].x, ptList[i].y, ptList2[i].x, ptList2[i].y); // ?? 
        } 
        curveTo(ptList[i].x, ptList[i].y, ptList[i+1].x, ptList[i+1].y); // ?? 
        //lineTo(ptList[i+1].x, Stage.height); // linie machen zu ... 
        //endFill(); // ende der füllung 
    } 
}; 

clear löscht alles, was zuvor in einen movieclip gezeichnet wurde.
ich habe mal alles auskommentiert, was du nicht mehr brauchst, wenn es dir ohnehin nur auf die linie ankommt. in der schleife werden die zuvor entstandenen werte nun in kurvensegmenten aneinandergereiht.

puh..

so.

fertig.

fragen?

ich hoffe nicht

zum besseren verständnis, schraub einfach mal ein wenig an den werten rum und sieh was passiert. das hat mir zumindest schon beim verständnis vieler scripten geholfen.

gruß,
Tante Amanda

[Heiko74]

Hallo zusammen,
cooles script ! Beim programmieren einer webseite benötige ich genau so ein script. habe das script auch schon eingebaut und konnte es auch nach meinen bedürfniss modifizieren. jetzt habe ich folgendes problem: mein chef möchte, das verschiedene menüpunkte auf der welle reiten! der punkt sollte immer an der selben _x position stehen und mit der welle auf und ab "schwimmen". jetzt habe ich das problem, das ich aus der kurve an einer position x den entsprechenden y position errechnen muß!!!! wie mache ich das am besten???.
schon mal vielen dank
heiko

[hgseib]

"..wie mache ich das am besten?.."
kündigen!

die kurven sind quadratische bezier-kurven und da kann man nicht einfach aus x einen y wert berechnen.
http://www.seibsprogrammladen.de/fra...ispiele/flash7
-> Zeichnen

"..auf der welle reiten!.."
oder
versuch halt das selbe mit sin/cos überlagerungen und nur mit lineTo zeichnen

oder näherungsweisse
zwichen zwei endpunkten der curveTo linear vermitteln.

[vauess]

hello
ich habe eine Frage zu diesem wundervollen Ozean aus post #4

und zwar hätte ich gerne zuerst eine ruhige Wasseroberfläche, die dann allmählich anfängt Wellen zu schlagen.

leider bin ich AS-Anfänger, aber es müsste doch so gehen, dass ich in Zeile 7 statt der 100 die für die Wellenhöhe zuständig ist eine Variable (b) setze, die zuerst 0 ist und dann bis auf 100 raufzähle.

PHP-Code:

for (var b = 0; b<100; b++) 


aber wo setzte ich das ein und verbinde es mit zeile 7 in die ich die Variable b eingesetzt habe

PHP-Code:

ptList[i] = {n:0, dz:i%2 ? (-(random(b))) : (random(b)), amp:(1+Math.random())/10, x:x, y:100}; 


kann mir jemand hier weiterhelfen ?
danke !