Come si realizza uno spectrum (grafico in funzione dell'audio)evoluto?

[Xenon136]

Ciao a tutti!
Ho visto l'altro giorno il sito della ferrari california e sono rimasto colpito oltre che dalla macchina, dallo spectrum evoluto che hanno implementato.

Ho trovato in rete come ottenere la classica linea "seghettata" che si anima con la musica, ma io vorrei creare una cosa + simile a quella che è più una linea che si arriccia, si avvolge, si muove seguendo l'audio....come si può ottenere?

vi do il link:
http://www.ferraricalifornia.com/web...m?locale=it_IT

grazie

[and80]

Credo che basti utilizzare gli stessi dati che usi per creare la linea, usando invece che il lineTo, il curveTo, poi aggiungendo ritardi o utilizzando un byteArray diverso credi le linee secondarie.
Bisognerebbe fare un po' di tentativi per arrivare ad un risultato quanto meno simile, ma comunque mi sembra fattibile utilizzando bene o male lo stesso codice dello spectrum a linea spezzata.

[Xenon136]

Grazie...proverò.

[Xenon136]

Ragioniamo sulla costruzione di 1 curva.

non riesco ad implementare la curva nel codice che ho trovato perchè il modo con cui costruisce la spezzata è particolare, tratto da un tutorial:


var s:Sound = new Sound(new URLRequest("track.mp3"));
s.play(0, 2);

var ba:ByteArray = new ByteArray();

addEventListener(Event.ENTER_FRAME, loop);

var sp:Sprite = new Sprite();
addChild(sp);

function loop(e:Event):void
{
sp.graphics.clear ();
sp.graphics.lineStyle(2, 0xFF00FF);
sp.graphics.moveTo(-10, 300);
SoundMixer.computeSpectrum(ba);

for(var i:uint=0; i<300; i++)
{
var num:Number = -ba.readFloat()*300 + 300;
sp.graphics.lineTo(i*4.5, num);

}
}

mettere curveTo anziché lineTo non da un risultato accettabile con questo codice, proprio per come costruisce le curve.

altri modi per disegnare?

Nel filmato della ferrari la curva è fluida, il moto è + intenso al centro.
che venga costruita punto per punto?

[Stan]

Cavolo è eccezionale!

[Xenon136]

Ho trovato altri Spectrum migliori del precedente postato...

[and80]

Originariamente inviato da Xenon136
Ragioniamo sulla costruzione di 1 curva.

non riesco ad implementare la curva nel codice che ho trovato perchè il modo con cui costruisce la spezzata è particolare, tratto da un tutorial:

[...]

mettere curveTo anziché lineTo non da un risultato accettabile con questo codice, proprio per come costruisce le curve.

altri modi per disegnare?

Nel filmato della ferrari la curva è fluida, il moto è + intenso al centro.
che venga costruita punto per punto?

direi di no, per costruire una curva tanto precisa per punti bisognerebbe sfruttarne troppi e con i ciclo si perderebbe di fluidità
la fluidità della curva mi indurrebbe più che altro a pensare che ci siano meno punti, ad esempio con tre o quattro punti riesci a costruire una curva abbastanza morbida a quella lunghezza

[Xenon136]

A curveTo si da coordinata x,y e 2 anchor point giusto?

Il risultato lo si dovrebbe ottenere quindi con qualche curva unita...

Se no si può costruire 1 curva soltanto ma che "passi" per determinati punti?

[and80]

Originariamente inviato da Xenon136
A curveTo si da coordinata x,y e 2 anchor point giusto?

Il risultato lo si dovrebbe ottenere quindi con qualche curva unita...

Se no si può costruire 1 curva soltanto ma che "passi" per determinati punti?

una sola curva non è sufficiente, considera che si tratta di curve bezier quadratiche, quindi il punto di ancoraggio è uno solo ma ne devi specificare x e y separatamente, il punto di partenza della curva invece parte da dove indichi tu con moveTo, se non indichi nulla parte da 0,0
chiaramente se fai due curveTo successivi, il primo partirà da 0,0 mentre il secondo partirà da dove è finito il primo

un esempio spicciolo con tre curve lo ottieni con questo codice:

var sp:Sprite = new Sprite();
var gr:Graphics = sp.graphics;
gr.lineStyle(1);
gr.curveTo(50, 10, 100, 0);
gr.curveTo(150, -10, 200, 0);
gr.curveTo(250, 10, 300, 0);
sp.x = 10;
sp.y = 10;
addChild(sp); 

creo una prima curva che imposta il punto finale della curva a coordinate 100,0 e il punto di ancoraggio lo metto a metà della x in orizzontale e la abbasso di 10 rispetto alla y
faccio la stessa cosa per le curve successive, incrementando i valori di x di 100 in 100 e facendo oscillare la y del punto di ancoraggio tra 10 e -10 per creare curve contrapposte

[Xenon136]

grazie!
ho iniziato a far prendere vita alla curva :P
Ecco la prima prova:

var sp:Sprite = new Sprite();
var gr:Graphics = sp.graphics;
var ba:ByteArray = new ByteArray();

var s:Sound = new Sound(new URLRequest("track.mp3"));
s.play(0, 2);

var num:Number;
addEventListener(Event.ENTER_FRAME, control);
//setInterval(control,0.0001);
function control(e:Event):void {
sp.graphics.clear();
SoundMixer.computeSpectrum(ba);
var num = ba.readFloat();
num=num*1000;
gr.lineStyle(3);
gr.curveTo(num, 10, 100, 0);
num=num+100;
gr.curveTo(num, -10, 200, 0);
num=num+100;
gr.curveTo(num, 10, 300, 0);

}

sp.x = 100;
sp.y = 100;
addChild(sp);

Ho provato il setInterval per avere una risposta + veloce e anche decidere i tempi di "aggiornamento", ma non mi è piaciuto un granché
ora va con l'fps del filmato a 100....mha....che mi consigli?
loop del filmato di 1 frame, setInterval o altro?

grazie