Change graph scale to logarithmic

Report · Apr 22, 2010

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.

Report · Apr 22, 2010

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);
}

Report · Apr 23, 2010

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();
}

Report · Apr 23, 2010

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))
}

Report · Apr 23, 2010

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:

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.

Report · Apr 30, 2010

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).

Change graph scale to logarithmic

Photos