7 Replies Latest reply on Sep 5, 2007 11:27 AM by kglad

    A little math problem

      I have built a slider that for arguments sake is 100px long and outputs a number from 0 to 100 depending on where you drag the handle to. If you imagine a graph plotting the output against the position of the slider handle it would be a straight line going steadily upwards on a diagonal.
      My question is this:
      Can I set it up so that the graph would go up very slowly until near the end and then suddenly rise sharply (I'm sure there is a mathematical term for this type of curve)?
      In other words if you dragged the handle from the 0 end over the first 50px (50% of the total) the output would only go from say 0 to 10 then in the next 25px it would rise from 10 to 50 then in the last 25px from 50 to 100.

      I have played around with hard coding values and using weighted arrays but this seems very untidy. I have also dabbled with Math.log(), Math.exp() etc but my maths is pretty shoddy (as you may have gathered from my rambling explanation of the issue :) )

      If anyone can shed any light on the issue it would be greatly appreciated. I am fascinated by maths and its relation to patterns and lines but it is all a bit above my head (at the moment)

      Cheers all
        • 1. Re: A little math problem

          For a shape like half a ‘U’, you could try using a function for a parabola (can also look it up in google to see what the shape is like):
          y = x^2

          Or maybe you could also try a cubic (look it up in google to see what the curve looks like):
          y = x^3

          You can also stretch and compress these curves by multiplying constants:
          y = 2(x^2) yields a steeper curve (twice as steep as y=x^2), while y = 1/2(x^2) yields a more gradual curve (half as steep as y=x^2)

          (In both of the above functions, you’d probably only want half of the curve, where 0<= x).
          • 2. Re: A little math problem
            Pop_Clingwrap Level 1
            Cheers for these. Very handy to know.
            After much messing about and picking of other peoples brains I have ended up with this formula:
            a = steepness of curve (1 = straight diagonal, 100 = almost a right angle)
            b = the maximum value you want to output

            y = (x^a)/(b^a)*b

            I don't know if this is a recognized formula or not but it works well in my case so might be useful to others.
            If anyone can simplify this or knows a better approach please post it. I would be interested to hear more on the whole line/curve/function subject.

            • 3. Re: A little math problem
              Bob_Robertson Level 1
              y = (x^a)/(b^a)*b is the same as y = (x^a)/(b^[a-1]) , for one thing. Not a biggie, but it might simplify things some internally.

              You might also try using what's called a piecewise function, which is defined as different equations, depending on its input. So, in your example, you'd want to define it as, say, x/10 for x between 0 and 50; (x-10)/0.8 +10 for the second part, and (x-50)*2+50 for the third part. It's not really elegant, but it's pretty intuitive, which is important for learning new ideas.

              If precise accuracy's not important and you just want to get a curve going, an Excel spreadsheet is a quick and dirty way to get an equation. Type in your known x coordinates in one column, and the associated y coordinates in another column. Graph them, with the XY (Scatter) type. Then, right-click on a data point, and click Add Trendline. Play around with that, and be sure to select 'show equation' and 'show R-squared value' under options. The closer r-squared is to 1.0, the more perfect a match the displayed equation will be.

              Finally, I've found sosmath.com to be a good introductory resource, and http://mathforum.org/library/ looks fairly promising, as well.

              Sorry if that's a bit of a brain dump, but I hope it helps
              • 4. Re: A little math problem
                Pop_Clingwrap Level 1
                This is all good stuff. Thanks a lot.
                I have only skimmed these links but they look really good. http://mathforum.org/library/ has a lot of stuff on fractals and cellular automata both of which I have tried to build in AS in the past (usually resulting in infinite loops and crashes :)).

                Keep em coming if you have more. Number 5 needs input! :)
                • 5. Re: A little math problem
                  kglad Adobe Community Professional & MVP
                  actually, the curve you want is an exponential curve and not a polynomial (that you're currently using):

                  y = b^(c*x+d)-e, where b, c, d and e are constants that you can solve for your particular needs.

                  but if that polynomial works for you, keep using it because it's easier for flash to calculate the values of that simple polynomial than it is to calculate the values of an exponential function.
                  • 6. Re: A little math problem
                    Pop_Clingwrap Level 1
                    the polynominal (new word for the day!) seems to do the job in this instance but I will definately have a play around with any other methods that get posted here. It's all good stuff to know and its a personal interest of mine (trying to make up for not paying attention in maths when I was at school)
                    • 7. Re: A little math problem
                      kglad Adobe Community Professional & MVP
                      yes, i'd have to say i've never used as much math outside of school as that used in flash.