actionscript zu javascript.. wo ist der fehler?

[szylla]

hallo,

ich hab hier eine schöne methode für farben. im original kommt das ding von keith peters, ich hab das aber schon mehrfach wo im einsatz gesehen.
ist auch egal, ich versuch das ganze grad in JS zu übertragen, aber das haut nicht hin. da scheint noch ein fehler drinn zu sein und ich find den nicht.
wär super wenn da mal einer von euch drüber schauen könnte.

AS:

PHP-Code:

//initial
private var ra:uint;
private var ga:uint;
private var ba:uint;
//...
ra = Math.random() * 0x00;
ga = Math.random() * 0xFF;
ba = Math.random() * 0x66;
//in einem interval:
var r:uint = Math.sin( ra += .01  ) * 127 + 128;
var g:uint = Math.sin( ga += .007 ) * 127 + 128;
var b:uint = Math.sin( ba += .013 ) * 127 + 128;

var col:uint = r << 16 | g << 8 | b; 


das ergebnis ist wie gesagt genauso wie es sein soll. aber in JS sieht das mehr nach random colors aus.

JS

PHP-Code:

//initial
var rgb;
//...
rgb = {};
rgb.r = Math.round( 0xffffff * Math.random() );
rgb.g = Math.round( 0xffffff * Math.random() );
rgb.b = Math.round( 0xffffff * Math.random() );
//in einem interval:
var r = Math.round( 0xffffff * ( Math.sin( rgb.r += 0.010 ) * 127 + 128 ) );
var g = Math.round( 0xffffff * ( Math.sin( rgb.g += 0.007 ) * 127 + 128 ) );
var b = Math.round( 0xffffff * ( Math.sin( rgb.b += 0.013 ) * 127 + 128 ) );
var a = alpha;//alpha = 1 in diesem fall

var col = "rgba(" + ( r >> 16 ) + "," + ( g >> 8 & 255 ) + "," + ( b & 255 ) + "," + a + ")"; 


mir ist klar das es im AS nur rgb und in JS rgba ist und das es in AS immer den gleichen farbwert zu begin gibt und der in JS immer random ist, aber trotzdem läuft ja hier was schief.
ich vermute mal es liegt an der art wie ich dann die var col zusammensetze?! oder sieht wer wo anders einen fehler?

vielen dank für eure hilfe,
szylla

edit:
schreib ich das in JS so, kommen nur dunkle blautöne raus die sich mit schwarz abwechseln

PHP-Code:

var r = Math.sin( rgb.r += 0.010 ) * 127 + 128;
var g = Math.sin( rgb.g += 0.007 ) * 127 + 128;
var b = Math.sin( rgb.b += 0.013 ) * 127 + 128;
var a = alpha;//alpha = 1 in diesem fall 

var col = "rgba(" + ( r >> 16 ) + "," + ( g >> 8 & 255 ) + "," + ( b & 255 ) + "," + a + ")"; 


[shin10]

Zitat von szylla

hallo,

ich hab hier eine schöne methode für farben. im original kommt das ding von keith peters, ich hab das aber schon mehrfach wo im einsatz gesehen.

Ich hab es noch nicht gesehen. Was soll das Ding machen?

PHP-Code:

 ( r >> 16 & 255) 


Sonst bekommst du da auch Werte die Teils im negativen Bereich sind, oder zu groß. Aber ich frag mich, warum du überhaupt Werte von bis zu FFFFFF zuweist, wenn ja klar ist, dass du max. FF brauchst.

[szylla]

die methode gibt einem einfach schöne farbwerte aus... haste bestimmt schonmal in einem von keith peters beispielen gesehen. das sind ganz softe übergänge, aber umgeschrieben in JS ballert der einfach random irgendwelche farbwerte raus. so sieht es jedenfalls aus.

[shin10]

Also ich tipp jetzt auf

PHP-Code:

var alpha = 1;
//initial
rgb = {};
rgb.r = Math.round( 0xff * Math.random() );
rgb.g = Math.round( 0xff * Math.random() );
rgb.b = Math.round( 0xff * Math.random() );

var r = Math.sin( rgb.r += 0.010 ) * 127 + 128;
var g = Math.sin( rgb.g += 0.007 ) * 127 + 128;
var b = Math.sin( rgb.b += 0.013 ) * 127 + 128;
var a = alpha;//alpha = 1 in diesem fall 

var col = "rgba(" + ( r & 0xFF ) + "," + ( g & 0xFF  ) + "," + ( b & 0xFF ) + "," + a + ")";  
alert(col); 


link?

[shin10]

bzw.

PHP-Code:

var alpha = 1;
//initial
rgb = {};
rgb.r = Math.random()*Math.PI;
rgb.g = Math.random()*Math.PI;
rgb.b = Math.random()*Math.PI;

var r = Math.sin( rgb.r += 0.010 ) * 127 + 128;
var g = Math.sin( rgb.g += 0.007 ) * 127 + 128;
var b = Math.sin( rgb.b += 0.013 ) * 127 + 128;
var a = alpha;//alpha = 1 in diesem fall 

var col = "rgba(" + ( r & 0xFF ) + "," + ( g & 0xFF  ) + "," + ( b & 0xFF ) + "," + a + ")";  
alert(col); 


Scheint mit dem Sinus mehr Sinn zu machen - aber es fehlt mir immer noch an Vorstellungskraft, was das soll.
Colorpicker? Ne - da machen die Werte von 0.01 etc. keinen Sinn.

[szylla]

ursprünglich hab ich das script hierher... weiß leider nicht mehr welches von den x bsp'S das war:
Old BIT-101 Lab | BIT-101

[szylla]

ich habs wiedergefunden.
hier sieht man das sehr schön: http://www.bit-101.com/flafiles/ und dort dann die 030321.fla auswählen. genau so ein ergebnis möchte ich auch gerne haben. die farbe der gezeichneten linien beachten.
mit den von dir vorgeschlagenen änderungen kommt ein regenbogen dabei raus. schonmal deutlich besser als mein kläglicher versuch, aber immer noch nicht das was ich will

edit: 111 beiträge! schnappszahl. ich gebe virtuell einen aus

[shin10]

Also so ist dir das zu knallig, oder was genau soll passieren?

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

[szylla]

hm, in deinem bsp schaut das eigentlich gut aus, ich muss das nochmal mit meinem ansatz vergleichen. evtl hab ich da was übersehen. bei mir sieht das noch irgendwie anders aus. halt regenbogenmäßig.

[shin10]

Checks mal so aus - da kannst du mit der Intensität spielen.
http://jsfiddle.net/shin10/r5t5E/1/

[szylla]

ich glaub in meinem fall lief das einfach zu schnell...
mit:

PHP-Code:

var r = Math.sin( rgb.r += 0.0010 ) * 127 + 128;
var g = Math.sin( rgb.g += 0.0007 ) * 127 + 128;
var b = Math.sin( rgb.b += 0.0013 ) * 127 + 128; 


sieht das schon deutlich besser aus...
ich versuch aber noch ein bisschen munter rum.

danke dir auf jedenfall, du hast mir hier super weitergeholfen! vg,
szylla

[shin10]

Gern geschehen.

Ich hab auch noch ein wenig damit herumgespielt. Die Begriffe für die Variablen sind wohl ziemlich daneben, aber man kann ein bisserl mehr damit rumspielen.

v2 32bit Farben wie in After Effects wär cool ...

Auf jeden Fall viel Spaß noch und zeig uns was, wenn es soweit ist.