Comments on: Open Challenge: how would you do this?

By: Torbjørn Caspersen

Torbjørn Caspersen — Wed, 20 May 2009 11:09:28 +0000

In the solution you ended up using - won’t the alpha ‘curve’ look like a bouncing ball rather than an undulating sin curve when you use Math.abs? Would it not be better to transpose the sin result: (Sin+1)/2 - to make it go from 0 to 1? I can’t imagine that it would make a big difference visually in this case, but as we’re discussing nitty-gritty stuff… what do you think?

By: Alexander

Alexander — Tue, 19 May 2009 08:57:57 +0000

Step right up!
Step riiiiiight up!

By: hp.

hp. — Tue, 19 May 2009 08:55:47 +0000

One-tenth of a dollar
One-tenth of a dollar
We got service after sales

By: Alexander

Alexander — Tue, 19 May 2009 08:32:29 +0000

@Roger @hp @Thomas Rounding errors, rounding errors, everyone is a winner!

By: Roger

Roger — Tue, 19 May 2009 08:28:44 +0000

@Alexander Am I missing something obvious?

A printout gives me (numbers rounded)

[INFO] pos: 0.00, result: 0.00
[INFO] pos: 0.05, result: 0.20
[INFO] pos: 0.10, result: 0.40
[INFO] pos: 0.15, result: 0.60
[INFO] pos: 0.20, result: 0.80
[INFO] pos: 0.25, result: 1.00
[INFO] pos: 0.30, result: 0.80
[INFO] pos: 0.35, result: 0.60
[INFO] pos: 0.40, result: 0.40
[INFO] pos: 0.45, result: 0.20
[INFO] pos: 0.50, result: 0.00
[INFO] pos: 0.55, result: 0.20
[INFO] pos: 0.60, result: 0.40
[INFO] pos: 0.65, result: 0.60
[INFO] pos: 0.70, result: 0.80
[INFO] pos: 0.75, result: 1.00
[INFO] pos: 0.80, result: 0.80
[INFO] pos: 0.85, result: 0.60
[INFO] pos: 0.90, result: 0.40
[INFO] pos: 0.95, result: 0.20
[INFO] pos: 1.00, result: 0.01

..which seems fairly correct?

By: hp.

hp. — Tue, 19 May 2009 08:26:47 +0000

@Alexander, Yeah, hitting a perfect zero is nice but 3.307100200773103e-92 is seriously close to it, and only non zero because Math.PI is not accurate enough.

So a rounding operation resolves it.
Number(3.307100200773103e-92).toFixed(20) //: 0.00000000000000000000 (String)
int(3.307100200773103e-92*1000000)/1000000 //: 0 (number)

By: Alexander

Alexander — Tue, 19 May 2009 07:11:25 +0000

@Thomas @hp Math.sin was also the way I ended up solving it, but it looks like combining it with Math.pow will give you the same problems that @Roger had, namely that you will get out of bounds values at the year’s end (0.5 & 1).

Using hp’s algorithm:
[INFO] 09:06:45.854 :: pos: 0 ::test: 0 ::target: 0
[INFO] 09:06:45.858 :: pos: 0.05 ::test: 0.0008707514062631436 ::target: 0.31
[INFO] 09:06:45.860 :: pos: 0.1 ::test: 0.04123937851565786 ::target: 0.59
[INFO] 09:06:45.861 :: pos: 0.15 ::test: 0.28037924859373686 ::target: 0.81
[INFO] 09:06:45.863 :: pos: 0.2 ::test: 0.7400106214843418 ::target: 0.95
[INFO] 09:06:45.867 :: pos: 0.25 ::test: 1 ::target: 1
[INFO] 09:06:45.869 :: pos: 0.3 ::test: 0.7400106214843425 ::target: 0.95
[INFO] 09:06:45.870 :: pos: 0.35 ::test: 0.28037924859373686 ::target: 0.81
[INFO] 09:06:45.872 :: pos: 0.4 ::test: 0.04123937851565791 ::target: 0.59
[INFO] 09:06:45.873 :: pos: 0.45 ::test: 0.0008707514062631527 ::target: 0.31
[INFO] 09:06:45.875 :: pos: 0.5 ::test: 3.307100200773103e-92 ::target: 0
[INFO] 09:06:45.876 :: pos: 0.55 ::test: 0.0008707514062631348 ::target: 0.31
[INFO] 09:06:45.878 :: pos: 0.6 ::test: 0.041239378515657815 ::target: 0.59
[INFO] 09:06:45.879 :: pos: 0.65 ::test: 0.28037924859373675 ::target: 0.81
[INFO] 09:06:45.881 :: pos: 0.7 ::test: 0.7400106214843418 ::target: 0.95
[INFO] 09:06:45.882 :: pos: 0.75 ::test: 1 ::target: 1
[INFO] 09:06:45.884 :: pos: 0.8 ::test: 0.7400106214843408 ::target: 0.95
[INFO] 09:06:45.886 :: pos: 0.85 ::test: 0.280379248593736 ::target: 0.81
[INFO] 09:06:45.888 :: pos: 0.9 ::test: 0.041239378515657295 ::target: 0.59
[INFO] 09:06:45.889 :: pos: 0.95 ::test: 0.000870751406263119 ::target: 0.31
[INFO] 09:06:45.891 :: pos: 1 ::test: 1.289967041377515e-89 ::target: 0

By: hp.

hp. — Tue, 19 May 2009 06:27:13 +0000

And when you need norwegian seasons you do this:

summerBitmap.alpha = Math.pow(Math.sin(Math.PI* value *years),6)

( http://flash.apt.no/wp-content/uploads/2009/05/picture-1.png )

By: Roger

Roger — Mon, 18 May 2009 21:21:25 +0000

@Alexander: Hmm… I was a bit too quick there, obviously..

Tempting as it is I don´t have time too look more into it atm, thought. :/

By: Pål

Pål — Mon, 18 May 2009 19:10:17 +0000

Usually I also like to use math solutions for problems like this. But in this case I would like to bring on one of my favorite toys, the GTweenTimeline! It’s a great tool that all Flash developers need to look into. So here is the G-solution for this problem:
timeline = new GTweenTimeline();
timeline.addTween(0/4,new GTween(red,1/4,{alpha:1}));
timeline.addTween(1/4,new GTween(red,1/4,{alpha:0}));
timeline.addTween(2/4,new GTween(red,1/4,{alpha:1}));
timeline.addTween(3/4,new GTween(red,1/4,{alpha:0}));
timeline.autoPlay = false;

Later you can just use timeline.gotoAndStop() to skip to 0 through 1.

But GTweenTimeline is so much more powerful than this, you could tween all other properties of the pictures or i.e. fade inn/out leaves in the fall.

PS. Here is my results, with the no easing as above (number formatting applied):
[INFO] 21:04:40.703 :: pos 0 : 0
[INFO] 21:04:40.718 :: pos 0.05 : 0.2
[INFO] 21:04:40.718 :: pos 0.1 : 0.4
[INFO] 21:04:40.718 :: pos 0.15 : 0.6
[INFO] 21:04:40.718 :: pos 0.2 : 0.8
[INFO] 21:04:40.718 :: pos 0.25 : 1
[INFO] 21:04:40.718 :: pos 0.3 : 0.8
[INFO] 21:04:40.718 :: pos 0.35 : 0.6
[INFO] 21:04:40.718 :: pos 0.4 : 0.4
[INFO] 21:04:40.718 :: pos 0.45 : 0.2
[INFO] 21:04:40.718 :: pos 0.5 : 0
[INFO] 21:04:40.718 :: pos 0.55 : 0
[INFO] 21:04:40.734 :: pos 0.6 : 0.4
[INFO] 21:04:40.734 :: pos 0.65 : 0.6
[INFO] 21:04:40.734 :: pos 0.7 : 0.8
[INFO] 21:04:40.734 :: pos 0.75 : 1
[INFO] 21:04:40.734 :: pos 0.8 : 0.64
[INFO] 21:04:40.734 :: pos 0.85 : 0.48
[INFO] 21:04:40.734 :: pos 0.9 : 0.32
[INFO] 21:04:40.734 :: pos 0.95 : 0.16
[INFO] 21:04:40.734 :: pos 1 : 0