[RESOLVED] wierd behaviour .push()

@jens1701Nov 02.2007

Hallo,

i wrote this function to prozess a singel substraction and store the output in an array. But the output i got is just crazy, i have debug that thing for half an hour now and i don`t get it. It’s suposed to be simple ARRRR!!!

Please have a look on this.

[CODE]ANIMATION.MOVIE.buildMovie = function(aniObject) { BUG.feed(‘calling ANIMATION.MOVIE.buildMovie’,2);

aniObject.movie = new Array(aniObject.startColor); BUG.feed(‘movie: ‘+aniObject.movie,3);

var workingColor = aniObject.startColor; BUG.feed(‘workingColor:’+workingColor,3);

for (var f = 1; f <= aniObject.frames; f++) {

for (var c = 0; c < workingColor.length; c++) { workingColor[c] -= aniObject.changesPerFrame[c]; BUG.feed(‘workingColor: ‘+c+’ / ‘+workingColor[c],3); } BUG.feed(‘workingColor: ‘+workingColor,3); aniObject.movie.push(workingColor); BUG.feed(‘movie after: ‘+aniObject.movie,3); BUG.feed(‘next round’,2); }[/CODE]

And this is the output:

[CODE]level 2: calling ANIMATION.MOVIE.color2rgb level 3: targetColor: 125,125,124 level 2: calling ANIMATION.MOVIE.difference level 3: changesPerFrame: -20.833333333333332,-20.833333333333332,-20.666666666666668 level 2: calling ANIMATION.MOVIE.buildFrame level 3: movie: 0,0,0 level 3: workingColor: 0,0,0 level 3: workingColor: 0 / 20.833333333333332 level 3: workingColor: 1 / 20.833333333333332 level 3: workingColor: 2 / 20.666666666666668 level 3: workingColor: 20.833333333333332,20.833333333333332,20.666666666666668 level 3: movie after: 20.833333333333332,20.833333333333332,20.666666666666668,20.833333333333332,20.833333333333332,20.666666666666668 level 2: next round level 3: workingColor: 0 / 41.666666666666664 level 3: workingColor: 1 / 41.666666666666664 level 3: workingColor: 2 / 41.333333333333336 level 3: workingColor: 41.666666666666664,41.666666666666664,41.333333333333336 level 3: movie after: 41.666666666666664,41.666666666666664,41.333333333333336,41.666666666666664,41.666666666666664,41.333333333333336,41.666666666666664,41.666666666666664,41.333333333333336 level 2: next round level 3: workingColor: 0 / 62.5 level 3: workingColor: 1 / 62.5 level 3: workingColor: 2 / 62 level 3: workingColor: 62.5,62.5,62 level 3: movie after: 62.5,62.5,62,62.5,62.5,62,62.5,62.5,62,62.5,62.5,62 level 2: next round level 3: workingColor: 0 / 83.33333333333333 level 3: workingColor: 1 / 83.33333333333333 level 3: workingColor: 2 / 82.66666666666667 level 3: workingColor: 83.33333333333333,83.33333333333333,82.66666666666667 level 3: movie after: 83.33333333333333,83.33333333333333,82.66666666666667,83.33333333333333,83.33333333333333,82.66666666666667,83.33333333333333,83.33333333333333,82.66666666666667,83.33333333333333,83.33333333333333,82.66666666666667,83.33333333333333,83.33333333333333,82.66666666666667 level 2: next round level 3: workingColor: 0 / 104.16666666666666 level 3: workingColor: 1 / 104.16666666666666 level 3: workingColor: 2 / 103.33333333333334 level 3: workingColor: 104.16666666666666,104.16666666666666,103.33333333333334 level 3: movie after: 104.16666666666666,104.16666666666666,103.33333333333334,104.16666666666666,104.16666666666666,103.33333333333334,104.16666666666666,104.16666666666666,103.33333333333334,104.16666666666666,104.16666666666666,103.33333333333334,104.16666666666666,104.16666666666666,103.33333333333334,104.16666666666666,104.16666666666666,103.33333333333334 level 2: next round level 3: workingColor: 0 / 124.99999999999999 level 3: workingColor: 1 / 124.99999999999999 level 3: workingColor: 2 / 124.00000000000001 level 3: workingColor: 124.99999999999999,124.99999999999999,124.00000000000001 level 3: movie after: 124.99999999999999,124.99999999999999,124.00000000000001,124.99999999999999,124.99999999999999,124.00000000000001,124.99999999999999,124.99999999999999,124.00000000000001,124.99999999999999,124.99999999999999,124.00000000000001,124.99999999999999,124.99999999999999,124.00000000000001,124.99999999999999,124.99999999999999,124.00000000000001,124.99999999999999,124.99999999999999,124.00000000000001 level 2: next round[/CODE]

As you can see with every aniObject.movie.push() everything in the array is replaced with the new values… whats this???

Please look into this, normally this shouldn’t be happening.

Greets

Jens

to post a comment

JavaScript

10 Comments(s) _↴

@KravvitzNov 02.2007 — #What is aniObject.startColor set to?

I'm confused. The debug output shows where other functions are called but not the one you posted the definition of?

@jens1701authorNov 02.2007 — #Your are right! sorry about that!

new try:

[CODE]ANIMATION.MOVIE.buildMovie = function(aniObject) {
 BUG.feed('calling ANIMATION.MOVIE.buildMovie',2);
 
  aniObject.movie = new Array(aniObject.startColor);
  BUG.feed('movie: '+aniObject.movie,3);
 
  var workingColor = aniObject.startColor;
  BUG.feed('workingColor: '+workingColor+' / 0',3);
  BUG.feed('start iteration');
  for (var f = 1; f <= aniObject.frames; f++) {
 
   for (var c = 0; c < workingColor.length; c++) {
   workingColor[c] -= aniObject.changesPerFrame[c];
   BUG.feed('workingColor['+c+'] / '+workingColor[c],3);
   }
   BUG.feed('workingColor: '+workingColor,3);
   aniObject.movie.push(workingColor);
   BUG.feed('movie after: '+aniObject.movie,3);
   BUG.feed('next round',2);
  }[/CODE]

some important values:

[CODE]aniObject.startColor = 0,0,0
 aniObject.changesPerFrame = -20.833333333333332,-20.833333333333332,-20.666666666666668[/CODE]

And the output:

[CODE]evel 2: calling ANIMATION.MOVIE.buildMovie
 level 3: movie: 0,0,0
 level 3: workingColor: 0,0,0 / 0
 level 2: START ITERATION
 level 3: workingColor[0] / 20.833333333333332
 level 3: workingColor[1] / 20.833333333333332
 level 3: workingColor[2] / 20.666666666666668
 level 3: workingColor: 20.833333333333332,20.833333333333332,20.666666666666668
 level 3: movie after: 20.833333333333332,20.833333333333332,20.666666666666668,20.833333333333332,20.833333333333332,20.666666666666668
 level 2: NEXT ROUND
 level 3: workingColor[0] / 41.666666666666664
 level 3: workingColor[1] / 41.666666666666664
 level 3: workingColor[2] / 41.333333333333336
 level 3: workingColor: 41.666666666666664,41.666666666666664,41.333333333333336
 level 3: movie after: 41.666666666666664,41.666666666666664,41.333333333333336,41.666666666666664,41.666666666666664,41.333333333333336,41.666666666666664,41.666666666666664,41.333333333333336
 level 2: NEXT ROUND
 level 3: workingColor[0] / 62.5
 level 3: workingColor[1] / 62.5
 level 3: workingColor[2] / 62
 level 3: workingColor: 62.5,62.5,62
 level 3: movie after: 62.5,62.5,62,62.5,62.5,62,62.5,62.5,62,62.5,62.5,62
 level 2: NEXT ROUND
 level 3: workingColor[0] / 83.33333333333333
 level 3: workingColor[1] / 83.33333333333333
 level 3: workingColor[2] / 82.66666666666667
 level 3: workingColor: 83.33333333333333,83.33333333333333,82.66666666666667
 level 3: movie after: 83.33333333333333,83.33333333333333,82.66666666666667,83.33333333333333,83.33333333333333,82.66666666666667,83.33333333333333,83.33333333333333,82.66666666666667,83.33333333333333,83.33333333333333,82.66666666666667,83.33333333333333,83.33333333333333,82.66666666666667
 level 2: NEXT ROUND
 level 3: workingColor[0] / 104.16666666666666
 level 3: workingColor[1] / 104.16666666666666
 level 3: workingColor[2] / 103.33333333333334
 level 3: workingColor: 104.16666666666666,104.16666666666666,103.33333333333334
 level 3: movie after: 104.16666666666666,104.16666666666666,103.33333333333334,104.16666666666666,104.16666666666666,103.33333333333334,104.16666666666666,104.16666666666666,103.33333333333334,104.16666666666666,104.16666666666666,103.33333333333334,104.16666666666666,104.16666666666666,103.33333333333334,104.16666666666666,104.16666666666666,103.33333333333334
 level 2: Last ROUND
 level 3: workingColor[0] / 124.99999999999999
 level 3: workingColor[1] / 124.99999999999999
 level 3: workingColor[2] / 124.00000000000001
 level 3: workingColor: 124.99999999999999,124.99999999999999,124.00000000000001
 level 3: movie after: 124.99999999999999,124.99999999999999,124.00000000000001,124.99999999999999,124.99999999999999,124.00000000000001,124.99999999999999,124.99999999999999,124.00000000000001,124.99999999999999,124.99999999999999,124.00000000000001,124.99999999999999,124.99999999999999,124.00000000000001,124.99999999999999,124.99999999999999,124.00000000000001,124.99999999999999,124.99999999999999,124.00000000000001
 [/CODE]

@KravvitzNov 02.2007 — #It's doing what you told it to do. 1 minus -1 is 2. When you subtract a negative number from another it's the same as adding the absolute value.

@jens1701authorNov 02.2007 — #what i wanted to do is:

Input:

aniObject.startColor (array) / 3 values

aniObject.changesPerFrame (array) / 3 values

aniObject.frames (number) / 1 - 256

Output:

aniObject.movie (array) / contains the prozessed arrays

1.) Substraction

substract aniObject.changesPerFrame from aniObject.startColor for every value. Don't overwrite aniObject.startColor.

2.) Rounding

Round the Output of the above for every value to an integer. Don't overwrite the prozessed values above.

3.) Storing

store the Output from above as an array in aniObject.movie

4.) Iteration

do this for the value of frames. Only use the not rounded values for the following interations.

So thats the plan.

In a matter of fact, i got a clue from further testing, what the problem could be. Have a look on this slightly different code.

[CODE]ANIMATION.MOVIE.buildMovie = function(aniObject) {
 BUG.feed('calling ANIMATION.MOVIE.buildMovie',2);
 
  aniObject.movie = new Array();
 
  var workingColor = aniObject.startColor;
  aniObject.movie.push(workingColor);
 
  BUG.feed('workingColor: '+workingColor,3);
  BUG.feed('movie: '+aniObject.movie,3);
 
  BUG.feed('START ITERATION',2);
  for (var f = 3; f <= aniObject.frames; f++) {
   var roundedColor = new Array;
 
   for (var c = 0; c < workingColor.length; c++) {
   workingColor[c] -= aniObject.changesPerFrame[c];
   roundedColor[c] = Math.round(workingColor[c]);
   BUG.feed('workingColor['+c+'] / '+workingColor[c],3);
   }
 
   BUG.feed('workingColor: '+workingColor,3);
   BUG.feed('roundedColor: '+roundedColor,3);
   BUG.feed('movie before: '+aniObject.movie,3);
 
   aniObject.movie.push(roundedColor);
 
   BUG.feed('movie after: '+aniObject.movie,3);
   BUG.feed('NEXT ROUND',2);
  }
 }[/CODE]

As you can see i'm pushing workingColor as first Element in aniObject.movie.

so the state of aniObject.movie is now 0,0,0

Then function goes through the loop the first time.

Now the state of aniObject.movie is now 20.833333333333332,20.833333333333332,20.666666666666668,21,21,21

But it's supposed to be 0,0,0,21,21,21

The problem is, i think, that

[CODE]var workingColor = aniObject.startColor;
 aniObject.movie.push(workingColor);[/CODE]

i have not pushed the actual values of workingColor in to aniObject.movie, but only a pointer to workingColor. If I change the values of workingColor in the loop so will the first Entry in aniObject.movie.

I didn't know that it works that way ?

Now the big question, how do i get only the values and not the pointer?!?

To visualize the whole thing here the output again:

[CODE]level 2: calling ANIMATION.MOVIE.buildMovie
 level 3: workingColor: 0,0,0
 level 3: movie: 0,0,0
 level 2: STARTING LOOP
 level 3: workingColor[0] / 20.833333333333332
 level 3: workingColor[1] / 20.833333333333332
 level 3: workingColor[2] / 20.666666666666668
 level 3: workingColor: 20.833333333333332,20.833333333333332,20.666666666666668
 level 3: roundedColor: 21,21,21
 level 3: movie before push: 20.833333333333332,20.833333333333332,20.666666666666668
 level 3: movie after push: 20.833333333333332,20.833333333333332,20.666666666666668,21,21,21
 level 2: NEXT ROUND
 level 3: workingColor[0] / 41.666666666666664
 level 3: workingColor[1] / 41.666666666666664
 level 3: workingColor[2] / 41.333333333333336
 level 3: workingColor: 41.666666666666664,41.666666666666664,41.333333333333336
 level 3: roundedColor: 42,42,41
 level 3: movie before push: 41.666666666666664,41.666666666666664,41.333333333333336,21,21,21
 level 3: movie after push: 41.666666666666664,41.666666666666664,41.333333333333336,21,21,21,42,42,41
 level 2: NEXT ROUND
 level 3: workingColor[0] / 62.5
 level 3: workingColor[1] / 62.5
 level 3: workingColor[2] / 62
 level 3: workingColor: 62.5,62.5,62
 level 3: roundedColor: 63,63,62
 level 3: movie before push: 62.5,62.5,62,21,21,21,42,42,41
 level 3: movie after push: 62.5,62.5,62,21,21,21,42,42,41,63,63,62
 level 2: LAST ROUND
 level 3: workingColor[0] / 83.33333333333333
 level 3: workingColor[1] / 83.33333333333333
 level 3: workingColor[2] / 82.66666666666667
 level 3: workingColor: 83.33333333333333,83.33333333333333,82.66666666666667
 level 3: roundedColor: 83,83,83
 level 3: movie before push: 83.33333333333333,83.33333333333333,82.66666666666667,21,21,21,42,42,41,63,63,62
 level 3: movie after push: 83.33333333333333,83.33333333333333,82.66666666666667,21,21,21,42,42,41,63,63,62,83,83,83
 [/CODE]

@KorNov 02.2007 — #

<i>
 </i>BUG.feed('movie: '+[COLOR="Red"]aniObject.movie[/COLOR],3);

[B]aniObject.movie[/B] value is an array. You can not concatenate a string with an array.

@jens1701authorNov 02.2007 — #No...?

Well, it works. The whole debugging output is generated with

BUG.feed(msg,format);

@Orc_ScorcherNov 02.2007 — #To append the values on one array to another array, you have at least two options (I'll call the two arrays a and b here):

[LIST=1]

[*]a = a.concat(b)

Please note that this creates a new array and assigns it to a. The old array referenced by a is left untouched, so this might not be what you want if that array is still accessable by another name.

[*]a.push.apply(a, b)

This modifies the array referenced by a, so no need to assign anything (that would be wrong anyway because push returns the new length of the array).

[/LIST]

@jens1701authorNov 02.2007 — #Mhh, i don't think you get my problem! But may be i have more than one in my code, that i don't know about. ?

I looked up the thing i talking about in Java Script The definitive Guide. The Problem i discribed above is related to the subject of

manipulating by value or by reference.

As i stated above, if i change the variable workingColor i also change aniObject.startColor, because workingColors holds not the actual Values of aniObject.startColor, but only a reference to aniObject.startColor. This is this by reference thing. So now i need to know how to copy not the reference into my variable workingColor, but the actual Values.

How do i do that???

This concept is a little bit confusing i think i have to look into it some more.

Greets

Jens

@KravvitzNov 03.2007 — #Try what Orc Scorcher said. I would have suggested the same thing as the first option he gave.

<i>
 </i>BUG.feed('movie: '+[COLOR="Red"]aniObject.movie[/COLOR],3);

[B]aniObject.movie[/B] value is an array. You can not concatenate a string with an array.[/QUOTE]
Yes, you can. The array's toString() method is called automatically.

@jens1701authorNov 03.2007 — #Ah, now i understand you Kravvitz and Orc Scorcher. Yes, yes that's what i'm searching for, this works. Thank you for helping me to see through this. ?

So, lets put this together, if you want to work with values you get from an object but you don't want to change the values stored in the object. You have to copy the values of the object property, not reference them, to a new variable.

In the case of my array it's something like:
[CODE]a = a.concat(b)[/CODE]

Here a table how javascript handles values of different datatypes

[CODE]Datatypes and manipulation:
 Type                copied by                passed by                compared by
 
 Number              Value                    Value                        Value
 Boolean             Value                     Value                        Value
 String              Immutable               Immutable                Immutable
 Object             Reference                Reference                  Reference[/CODE]

Also in #JavaScript _↴

JSON seachaction integration with Google CSE variable's values into an address query showing different layers on page load

Success!

Help @jens1701 spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] wierd behaviour .push()

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] wierd behaviour .push()

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴