5 Replies Latest reply on Apr 30, 2010 2:14 PM by kglad

    Change graph scale to logarithmic

    kittinplus4 Level 1

      Hi all,
      I have the following script that takes a number and visualizes it on a  circular shape much like an odometer/speed meter that a car dashboard  has.

      Code:
      var inputVal = 6.70;

      var contentMC = _root.createEmptyMovieClip("contentMC", _root.getNextHighestDepth());
      var baseMC = contentMC.createEmptyMovieClip("baseMC", contentMC.getNextHighestDepth());

      baseMC._x = 150;
      baseMC._y = 150;
      var dynamicMC = baseMC.duplicateMovieClip("dynamicMC", contentMC.getNextHighestDepth());
      var maskMC = baseMC.duplicateMovieClip("maskMC", contentMC.getNextHighestDepth());

      var markMC = _root.createEmptyMovieClip("baseMC", _root.getNextHighestDepth());
      markMC.lineStyle(0,0xFF0000);
      markMC.beginFill(0xFF0000,100);
      markMC.moveTo(0,0);
      markMC.lineTo(0,12);
      markMC.lineTo(-12,0);
      markMC.lineTo(0,0);
      markMC.endFill();

      var startSize = 320*-1;
      var startPos = -110;
      drawWedge(baseMC,100,startSize,startPos,[0, 0x000000],[0x0033CC, 100]);
      drawDoughnut(maskMC,50,100,startSize,startPos,[5, 0xFF0000],[0xFF00FF, 100]);

      processsInput(inputVal);
      contentMC.setMask(maskMC);

      onMouseDown = function () {
          processsInput((1200/Stage.height)*_ymouse);
      };
      function processsInput(inVal) {
          var wedgeSize = (startSize/1200)*inVal;
          var wedgeStart = startPos;
          drawWedge(dynamicMC,100,wedgeSize,wedgeStart,[0, 0x000000],[0xFF6600, 100]);
          contentMC.setMask(maskMC);
      }

      function drawDoughnut(mc, radius, radius2, arc, startAngle, lstyle, fstyle) {
          mc.clear();
          var segAngle, theta, angle, angleMid, segs, ax, ay, bx, by, cx, cy;
          arc = (Math.abs(arc)>360) ? 360 : arc;
          segs = Math.ceil(Math.abs(arc)/45);
          segAngle = arc/segs;
          theta = -(segAngle/180)*Math.PI;
          angle = -(startAngle/180)*Math.PI;
          ax = Math.cos(angle)*radius;
          ay = Math.sin(angle)*radius;
          mc.lineStyle.apply(mc,lstyle);
          mc.beginFill.apply(mc,fstyle);
          rx = ax;
          ry = ay;
          mc.moveTo(ax,ay);
          if (segs>0) {
              for (var i = 0; i<segs; i++) {
                  angle += theta;
                  angleMid = angle-(theta/2);
                  bx = Math.cos(angle)*radius;
                  by = Math.sin(angle)*radius;
                  cx = Math.cos(angleMid)*(radius/Math.cos(theta/2));
                  cy = Math.sin(angleMid)*(radius/Math.cos(theta/2));
                  mc.curveTo(cx,cy,bx,by);
              }
          }
          startAngle = arc+startAngle;
          arc *= -1;
          segAngle = arc/segs;
          theta = -(segAngle/180)*Math.PI;
          angle = -(startAngle/180)*Math.PI;
          ax = Math.cos(angle)*radius2;
          ay = Math.sin(angle)*radius2;
          mc.lineStyle.apply(mc,lstyle);
          mc.lineTo(ax,ay);
          if (segs>0) {
              for (var j = 0; j<segs; j++) {
                  angle += theta;
                  angleMid = angle-(theta/2);
                  bx = Math.cos(angle)*radius2;
                  by = Math.sin(angle)*radius2;
                  cx = Math.cos(angleMid)*(radius2/Math.cos(theta/2));
                  cy = Math.sin(angleMid)*(radius2/Math.cos(theta/2));
                  mc.curveTo(cx,cy,bx,by);
              }
          }
          mc.lineTo(rx,ry);
          mc.endFill();
      }
      function drawWedge(mc, radius, arc, startAngle, lstyle, fstyle) {
          mc.clear();
          var segAngle, theta, angle, angleMid, segs, ax, ay, bx, by, cx, cy;
          arc = (Math.abs(arc)>360) ? 360 : arc;
          segs = Math.ceil(Math.abs(arc)/45);
          segAngle = arc/segs;
          theta = -(segAngle/180)*Math.PI;
          angle = -(startAngle/180)*Math.PI;
          ax = Math.cos(angle)*radius;
          ay = Math.sin(angle)*radius;
          mc.lineStyle.apply(mc,lstyle);
          mc.beginFill.apply(mc,fstyle);
          mc.moveTo(0,0);
          mc.lineTo(ax,ay);
          if (segs>0) {
              for (var i = 0; i<segs; i++) {
                  angle += theta;
                  angleMid = angle-(theta/2);
                  bx = Math.cos(angle)*radius;
                  by = Math.sin(angle)*radius;
                  cx = Math.cos(angleMid)*(radius/Math.cos(theta/2));
                  cy = Math.sin(angleMid)*(radius/Math.cos(theta/2));
                  mc.curveTo(cx,cy,bx,by);
              }
          }
          // 
          markMC._rotation = (startAngle-arc)-90;
          markMC._x = Math.cos(angle)*(radius-50)+baseMC._x;
          markMC._y = Math.sin(angle)*(radius-50)+baseMC._y;
          //
          mc.endFill();
      }

      The scale is from 0 to 1200 and the problem I have is that the  value I want to show is usually so small that it looks like it's stuck  next to zero all the time. So, what I need is change the scale to  logarithmic so the values from 1 to 10 take up as much space as those  from 10 to 100 etc. and the small values show fluctuation. In thefollowing image you see on the left how it behaves now and on the  right how I need it to become (both show a visualization of a small  value, something around 7 or 8).

       

      http://i43.tinypic.com/29v03kz.gif

       

      Anyone can tell me how it's done?  Thanks.

        • 1. Re: Change graph scale to logarithmic
          kglad Adobe Community Professional & MVP

          you can use:

           

          :
          var inputVal = 6.70;

          var contentMC = _root.createEmptyMovieClip("contentMC", _root.getNextHighestDepth());
          var baseMC = contentMC.createEmptyMovieClip("baseMC", contentMC.getNextHighestDepth());

          baseMC._x = 150;
          baseMC._y = 150;
          var dynamicMC = baseMC.duplicateMovieClip("dynamicMC", contentMC.getNextHighestDepth());
          var maskMC = baseMC.duplicateMovieClip("maskMC", contentMC.getNextHighestDepth());

          var markMC = _root.createEmptyMovieClip("baseMC", _root.getNextHighestDepth());
          markMC.lineStyle(0,0xFF0000);
          markMC.beginFill(0xFF0000,100);
          markMC.moveTo(0,0);
          markMC.lineTo(0,12);
          markMC.lineTo(-12,0);
          markMC.lineTo(0,0);
          markMC.endFill();

          var startSize = 320*-1;
          var startPos = -110;
          drawWedge(baseMC,100,startSize,startPos,[0, 0x000000],[0x0033CC, 100]);
          drawDoughnut(maskMC,50,100,startSize,startPos,[5, 0xFF0000],[0xFF00FF, 100]);

          preprocesssInput(inputVal);

          function preprocesssInput(inputVal){
               processsInput(Math.pow(10,inputVal))
          }


          contentMC.setMask(maskMC);

          onMouseDown = function () {
              processsInput((1200/Stage.height)*_ymouse);
          };
          function processsInput(inVal) {
              var wedgeSize = (startSize/1200)*inVal;
              var wedgeStart = startPos;
              drawWedge(dynamicMC,100,wedgeSize,wedgeStart,[0, 0x000000],[0xFF6600, 100]);
              contentMC.setMask(maskMC);
          }

          1 person found this helpful
          • 2. Re: Change graph scale to logarithmic
            kittinplus4 Level 1

            Thanks for your tip, problem is... it doesn't work. I added the extra function you proposed but it doesn't do anything. I attached the (CS3) fla file here

             

            http://www.sendspace.com/file/6o1nhi

             

            and the code is here again (changed some var names as they conflicted with an other script in same movie + removed the onMouseDown function). Thanks for your time.

             

            var inputVal = 6.70;

            var content2MC = _root.createEmptyMovieClip("content2MC", _root.getNextHighestDepth());
            var baseMC = content2MC.createEmptyMovieClip("baseMC", content2MC.getNextHighestDepth());

            baseMC._x = 200;
            baseMC._y = 200;

            var dynamicMC = baseMC.duplicateMovieClip("dynamicMC", content2MC.getNextHighestDepth());
            var maskMC = baseMC.duplicateMovieClip("maskMC", content2MC.getNextHighestDepth());

            var markMC = _root.createEmptyMovieClip("baseMC", _root.getNextHighestDepth());
            markMC.lineStyle(0,0xFF0000);
            markMC.beginFill(0xFF0000,100);
            markMC.moveTo(0,0);
            markMC.lineTo(0,7);
            markMC.lineTo(-7,0);
            markMC.lineTo(0,0);
            markMC.endFill();

            var startSize = 320*-1;
            var startPos = -110;
            drawWedge(baseMC,100,startSize,startPos,[0, 0x000000],[0x0033CC, 100]);
            drawDoughnut(maskMC,80,100,startSize,startPos,[5, 0xFF0000],[0xFF00FF, 10]);

            preprocesssInput(inputVal);
            function preprocesssInput(inputVal) {
                processsInput(Math.pow(10, inputVal));
            }

            processsInput(inputVal);
            content2MC.setMask(maskMC);

            function processsInput(inputVal) {
                var wedgeSize = (startSize/1200)*inputVal;
                var wedgeStart = startPos;
                drawWedge(dynamicMC,100,wedgeSize,wedgeStart,[0, 0x000000],[0xFF6600, 100]);
                content2MC.setMask(maskMC);
            }

            function drawDoughnut(mc, radius, radius2, arc, startAngle, lstyle, fstyle) {
                mc.clear();
                var segAngle, theta, angle, angleMid, segs, ax, ay, bx, by, cx, cy;
                arc = (Math.abs(arc)>360) ? 360 : arc;
                segs = Math.ceil(Math.abs(arc)/45);
                segAngle = arc/segs;
                theta = -(segAngle/180)*Math.PI;
                angle = -(startAngle/180)*Math.PI;
                ax = Math.cos(angle)*radius;
                ay = Math.sin(angle)*radius;
                mc.lineStyle.apply(mc,lstyle);
                mc.beginFill.apply(mc,fstyle);
                rx = ax;
                ry = ay;
                mc.moveTo(ax,ay);
                if (segs>0) {
                    for (var i = 0; i<segs; i++) {
                        angle += theta;
                        angleMid = angle-(theta/2);
                        bx = Math.cos(angle)*radius;
                        by = Math.sin(angle)*radius;
                        cx = Math.cos(angleMid)*(radius/Math.cos(theta/2));
                        cy = Math.sin(angleMid)*(radius/Math.cos(theta/2));
                        mc.curveTo(cx,cy,bx,by);
                    }
                }
                startAngle = arc+startAngle;
                arc *= -1;
                segAngle = arc/segs;
                theta = -(segAngle/180)*Math.PI;
                angle = -(startAngle/180)*Math.PI;
                ax = Math.cos(angle)*radius2;
                ay = Math.sin(angle)*radius2;
                mc.lineStyle.apply(mc,lstyle);
                mc.lineTo(ax,ay);
                if (segs>0) {
                    for (var j = 0; j<segs; j++) {
                        angle += theta;
                        angleMid = angle-(theta/2);
                        bx = Math.cos(angle)*radius2;
                        by = Math.sin(angle)*radius2;
                        cx = Math.cos(angleMid)*(radius2/Math.cos(theta/2));
                        cy = Math.sin(angleMid)*(radius2/Math.cos(theta/2));
                        mc.curveTo(cx,cy,bx,by);
                    }
                }
                mc.lineTo(rx,ry);
                mc.endFill();
            }
            function drawWedge(mc, radius, arc, startAngle, lstyle, fstyle) {
                mc.clear();
                var segAngle, theta, angle, angleMid, segs, ax, ay, bx, by, cx, cy;
                arc = (Math.abs(arc)>360) ? 360 : arc;
                segs = Math.ceil(Math.abs(arc)/45);
                segAngle = arc/segs;
                theta = -(segAngle/180)*Math.PI;
                angle = -(startAngle/180)*Math.PI;
                ax = Math.cos(angle)*radius;
                ay = Math.sin(angle)*radius;
                mc.lineStyle.apply(mc,lstyle);
                mc.beginFill.apply(mc,fstyle);
                mc.moveTo(0,0);
                mc.lineTo(ax,ay);
                if (segs>0) {
                    for (var i = 0; i<segs; i++) {
                        angle += theta;
                        angleMid = angle-(theta/2);
                        bx = Math.cos(angle)*radius;
                        by = Math.sin(angle)*radius;
                        cx = Math.cos(angleMid)*(radius/Math.cos(theta/2));
                        cy = Math.sin(angleMid)*(radius/Math.cos(theta/2));
                        mc.curveTo(cx,cy,bx,by);
                    }
                }
                //   
                markMC._rotation = (startAngle-arc)-90;
                markMC._x = Math.cos(angle)*(radius-20)+baseMC._x;
                markMC._y = Math.sin(angle)*(radius-20)+baseMC._y;
                //
                mc.endFill();
            }
            • 3. Re: Change graph scale to logarithmic
              kglad Adobe Community Professional & MVP

              the code i gave works.  it's just not the scale you probably want.  from your explanation, it looked like you wanted a log base 10 scaling.  but from looking at your code a log base 2 is more suitable:

               

              function preprocesssInput(inputVal){
                  processsInput(Math.pow(2.032,inputVal))
              }

              1 person found this helpful
              • 4. Re: Change graph scale to logarithmic
                kittinplus4 Level 1

                hmmmmm, tried that and it still uses a normal "analog" scale. On the following pic is on the left how it is now and on the right how I need it to be:

                 

                Untitled-1.gif

                 

                maybe I didn't explain well, I think the scale on the right is logarithmic no? Right now when I enter 600 as value data the needle stays right in the middle so it's still using the normal scale on the left.

                 

                Edit: the small black lines around the outer circle are made here to show you how the scale progresses, they are not drawn anywhere inside the script.

                 

                Edit2: it would also work if the original value was scaled at the beginning and was passed to the present drawWedge process to visualize.

                • 5. Re: Change graph scale to logarithmic
                  kglad Adobe Community Professional & MVP

                  a**8=1200 => a= 10**((2+log1.2)/8)

                   

                  is the base you want (assuming your 2nd pic is accurate and an input value of 8 should be mapped to 1200).