We help IT Professionals succeed at work.

Animation help 2...

As shown below, a circular drum with a string wrapped around it is pulled in x-direction. as a result:

1. The drum rotates.
2. Point of drum-string separation (originally as 0 degrees) moves up along the drum surface.

The program is to accept the following four variables:
r, h, x inch/sec rate, and max X can be pulled.

At start, the string is pulled from X=0 to X=X=max Upon click on start button. In the process of pull, the angle of drum rotation a will be displayed in degrees.

In order see the drum is rotating, we can rotate a redial line drawn from center of the drum to zero angle.

To facilitate the operation, you may populate a table where variable b is incremented and substituded in two formulas given to get two equation and two unknowns in turn solving them to get their related a and x values. I will try to supply the data in a tabular form as well.

The program could be in java or java script (HTML5).

Thank you.

drum-1.png
Comment
Watch Question

Aaron TomoskyDirector, SD-WAN Solutions

Commented:
Sounds academic to me. You may get general help he but we don't do homework for you.
Mike EghtebasDatabase and Application Developer

Author

Commented:
It is not school related. All you can do just ask.
Mike EghtebasDatabase and Application Developer

Author

Commented:
Why do you say it is school work. Do you have special power that we don't know about?

I probably delete and repost this question. But before I do, let us know about you special magic and ability. Please...
Mike EghtebasDatabase and Application Developer

Author

Commented:
mplungjan,

Thank you for your comment.  aarontomosky ends his post saying "but we don't do homework for you."

His effort is very much appreciated and make sence to discourage people posting homework, however it is a better manaer just ask is this a homework?

I have to delete and post this question again because I have to better state the question statement. I need to do some prepration for it.

Regards,

Mike
Aaron TomoskyDirector, SD-WAN Solutions

Commented:
Ok, so I'll just ask the question: is this homework? If it's not, can you explain why it reads like it came out of a textbook? I'm not trying to offend, just following the rules.
Mike EghtebasDatabase and Application Developer

Author

Commented:
Thank you for asking. I have made it using MS Paint. Ask me to draw something else for you, I will draw and it looks as if it is from a book. I am basically a very good in making drawings.

It looks like came because I want it to be. I have simplified the design for now. It will be a cam of different shape later on. For now I am using a circular shape wanting to make it easier to get going. Circular shape makes the math a bit easier.

At first, I was planning to make a model using cardboard cut-and actual string to demo the concept. But because I recently took a course in Java (after wasting many years in vb), exited for what is possible, I decided to go high-tech on it and make an attempt to have in form of animation not a clumsy cardboard cut-outs.

I hope the above explanations are satisfactory and you would decide unleash your skill's dragon and expertise to solve this problem.

Regards,

Mike
Mike EghtebasDatabase and Application Developer

Author

Commented:
I prefer this to be done in Java. But JavaScript (HTML5) is also acceptable. This is because I am focusing to learn these two (Java and JavaScript) as I am also taken care to my project (hobby). I wouldn't want in any other platform or languages.

Thx
Michel PlungjanIT Expert
Top Expert 2009

Commented:
I do not (yet) do html5, but here is a start

https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes#Arcs
Mike EghtebasDatabase and Application Developer

Author

Commented:
Using the formulas on the graph, and substituting Cos(b) and Sin(b) with C and S, respectively, I got:

(r(x+r(1-C)/rS)^2 = (h + rS)^2 + (x + r(1 - C)^2       <-- varables are b and x

Now, incrementing angle b by one degree, I populated a table showing matching x valus. At b=0 degrees, x has to be zero also but it shows  125.2653511 meaning, I need to go my algebra to find where I made error.

After I figure out what went wrong, I can find the matching angel using:

(br + ar + h)^2 = (h + rSin(b))^2 + (x + r(1 - Cos(b))^2

My point here is that there will be a table of data for the expected mothin range as shown below if this could be of any help in completing the process.

Thanks,

Mike
a(deg)	b(deg)	x1	
?	0	125.2653511	<-- at b=0 xneeds tob zero
?	1	127.5437486	
?	2	133.1784981	
?	3	139.7324056	
?	4	148.0744243	
?	5	157.9366212	
?	6	169.0649811	
?	7	181.2352717	
?	8	194.2579811	
			
?	43	733.7076346	
?	44	748.0409131	
?	45	762.1716546

Open in new window

Commented:
mplungjan, is it ok to post solution ?
Mike EghtebasDatabase and Application Developer

Author

Commented:
HI rrz@871311,

Isn't it the idea? for me to ask question and a good expert like you to post with the answer? Post the solution?

I was to slow appreciating your at http://www.experts-exchange.com/Other/Math_Science/Q_27229644.html#a36304001

I revised the equations a bit and here is what I have for the data:


angel a    angel b           x
04.92      00.00        00.00
05.03      00.10        02.41
05.18      00.20        04.76
05.35      00.30        06.93
05.53      00.40        08.79
05.70      00.50       10.22
05.84      00.60       11.12
05.96      00.70       11.41
06.03      00.80       11.02
06.05      00.90       09.93
06.03      01.00      08.13

I can't wait to see the solution unless you think also this is a class assignment.

Mike
import java.text.DecimalFormat;
public class Data1 {
  public static void main(String args[]) {
      DecimalFormat df = new DecimalFormat("00.00");
      double h = 30;
      double r = 6;
      double a = 0;
      double x = 0;
      System.out.println("angela\t angel b\t x");
      for(double b = 0; b < 1; b += 0.1){
          x=(r*Math.sin(b)*(h+r*Math.sin(b))/r*Math.cos(b))+(r*Math.cos(b)-r*Math.sin(b))-r;       
          a = (1/r)*Math.sqrt(Math.pow((h + r*Math.sin(b)),2) + Math.pow((x + r*(1 - Math.cos(b))),2)-b*r-h);
          System.out.println(df.format(a) + "\t" + df.format(b) + "\t\t" + df.format(x));
      }
  }
}

Open in new window

Mike EghtebasDatabase and Application Developer

Author

Commented:
mplungjan,
I don't think I would want to go through the tutorial material not even knowing that would do what I want. Regardless what solution I get from here, I have to take to Java environment because I am committed to learn it. I cannot start learning few subjects at once. Thank you for the link though.

Regards,

Mike
Mike EghtebasDatabase and Application Developer

Author

Commented:
I have to double check the equations I am using because

angel a    angel b           x
04.92      00.00        00.00
 ^-- cannot be 4.92 it has to be zero also
Mike EghtebasDatabase and Application Developer

Author

Commented:
This is better,

angel a  angel b    x
00.00    00.00   00.00
00.01    00.05   01.51
00.03    00.10   03.04
00.07    00.15   04.59

03.38   00.85   36.73
04.01   00.90   40.85
04.76   00.95   45.55
import java.text.DecimalFormat;
public class Data1 {
  public static void main(String args[]) {
      DecimalFormat df = new DecimalFormat("00.00");
      double h = 30;
      double r = 5;
      double a = 0;
      double x = 0;
      System.out.println("angela\t angel b\t x");
      for(double b = 0; b < 1; b += 0.05){
          x=r*(Math.cos(b)+ Math.tan(b)*Math.sin(b)-1)+ h*Math.tan(b);       
          a = (1/r)*Math.sqrt(Math.pow((h + r*Math.sin(b)),2) + Math.pow((x + r - r*Math.cos(b)),2))-b-h/r;         
          System.out.println(df.format(a) + "\t" + df.format(b) + "\t\t" + df.format(x));
      }
  }
}

Open in new window

Commented:
I finished code for your simplified version. See
http://www.experts-exchange.com/Other/Math_Science/Q_27229644.html#a36282746 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
            body {
                margin: 0px;
                padding: 0px;
            }
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style> 
        <script src="http://www.html5canvastutorials.com/libraries/kinetic2d-v1.0.0.js"> 
        </script> 
        <script> 
            var kin;
            var pull;
            var r = 10; // radius of drum
            var h = 60; // height of drum off base line
            var a = 0;
            function PullPoint(x, y){
                this.x = x;
                this.y = y;
            }
            function updateStage(){
                var linearSpeed = document.speedForm.speed.value; // pixels / second
                var linearDistEachFrame = linearSpeed * kin.getTimeInterval() / 1000;
                var currentX = pull.x;
                if (currentX < kin.getCanvas().width) {
                    var newX = currentX + linearDistEachFrame;
                    pull.x = newX;
                }
                a = Math.sqrt(((pull.x - 30)/r)* ((pull.x - 30)/r) + (h/r)*(h/r)) - h/r;  
                document.speedForm.a.value = a;
            }
            window.onload = function(){
                document.speedForm.speed.focus();
                // instantiate new animation object
                kin = new Kinetic_2d("myCanvas");
                pull = new PullPoint(30, 80);
                kin.setDrawStage(function(){
                    updateStage();
                    kin.clear();
                    var context = kin.getContext();
                    context.strokeStyle = '#f00'; //red rope
                    context.beginPath();
                    context.moveTo(30,20)
                    context.lineTo(pull.x, pull.y);
                    context.closePath();
                    context.stroke();
                    context.fillStyle = "#FFF21F"; //yellow drum
                    context.strokeStyle = '#f00'; 
                    context.lineWidth = 1;
                    context.beginPath();
                    context.arc(20, 20, r, 0, 2 * Math.PI, false);
                    context.closePath();
                    context.fill();
                    context.stroke();
                    context.lineWidth = 2;
                    context.strokeStyle = "black"; //drum angle marker
                    context.beginPath();
                    context.moveTo(20, 20)
                    context.lineTo(20 + 10*Math.cos(-a),20 - 10*Math.sin(-a));
                    context.closePath();
                    context.stroke();
                    context.strokeStyle = "blue"; //drum angle marker
                    context.beginPath();
                    context.moveTo(5, 20 + h)
                    context.lineTo(799, 80);
                    context.closePath();
                    context.stroke();
                });
                kin.startAnimation();
            };
        </script> 
    </head> 
    <body> 
        <h3> Pull rope from drum. Simplified Version</h3>
        <canvas id="myCanvas" width="800" height="90"> 
        </canvas> 
        <form name="speedForm">
           Enter speed(pixels/sec) to start animation. 
           <input type="text" id="speed" name="speed" value="0" size="4"/>(enter number only) To stop remove number.<br/>
           Drum angle<input type="text" id="a" name="a" value="6" size="4"/>(in radians)<br/>
           Refresh page to run again. 
        </form>
    </body> 
</html>

Open in new window

I am still working on the more complicated version that you asked for here. Here is what I have so far.
<!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
            body {
                margin: 0px;
                padding: 0px;
            }
            
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style> 
        <script src="http://www.html5canvastutorials.com/libraries/kinetic2d-v1.0.0.js"> 
        
        </script> 
        <script> 
            var kin;
            var pull;
            var r = 10; // radius of drum
            var h = 60; // height of drum off base line
            var a = 0;
            var b = 0;
            var delta = 0;
            function PullPoint(x, y){
                this.x = x;
                this.y = y;
            }
            function updateStage(){
                    if(b > -1.56 && pull.x < 3000){ 
                        a = (r * Math.tan(-b) + h/Math.cos(-b) - h)/r - b;
                        pull.x = (h + r*Math.sin(-b))*Math.tan(-b) - r*(1 - Math.cos(-b)) + 30;
                        b -= delta;
                    }
                        var distance = pull.x - 30;
                        document.varForm.b.value = b.toFixed(4);
                        document.varForm.a.value = a.toFixed(2);
                        document.varForm.x.value = distance.toFixed(2); 
            }
            function run(d){
                delta = d;
                a = 0;
                b = 0;
                document.varForm.delta.value = delta;
                // instantiate new animation object
                kin = new Kinetic_2d("myCanvas");
                pull = new PullPoint(30, 80);
                kin.setDrawStage(function(){
                    updateStage();
                    if(pull.x > 3000)kin.stopAnimation();
                    kin.clear();
                    var context = kin.getContext();
                    context.strokeStyle = '#f00'; //red rope 
                    context.beginPath();
                    context.moveTo(20 + r*Math.cos(-b),20 -r*Math.sin(-b));
                    context.lineTo(pull.x, pull.y);
                    context.closePath();
                    context.stroke();
                    context.fillStyle = "#FFF21F"; //yellow drum
                    context.strokeStyle = '#f00'; 
                    context.lineWidth = 1;
                    context.beginPath();
                    context.arc(20, 20, r, 0, 2 * Math.PI, false);
                    context.closePath();
                    context.fill();
                    context.stroke();
                    context.lineWidth = 2;
                    context.strokeStyle = "black"; //drum angle marker
                    context.beginPath();
                    context.moveTo(20, 20)
                    context.lineTo(20 + r*Math.cos(-a),20 - r*Math.sin(-a));
                    context.closePath();
                    context.stroke();
                    context.strokeStyle = "blue"; //base line
                    context.beginPath();
                    context.moveTo(5, 20 + h)
                    context.lineTo(999, 80);
                    context.closePath();
                    context.stroke();
                });
                kin.startAnimation();
            };
        </script> 
    </head> 
    <body onLoad="run(.005);"> 
        <h3> Pull rope from drum.</h3>
        <canvas id="myCanvas" width="1000" height="90"> 
        </canvas> 
        <form name="varForm">
           Angles measured in radians.<br/> 
           Delta<input type="text" id="delta" name="delta" value="0.01" size="4"/><br/>
           Drum angle<input type="text" id="a" name="a" /><br/>
           Angle on drum where rope contacts drum.<input type="text" id="b" name="b" /><br/>
           Distance pulled <input type="text" id="x" name="x" />(in pixels)<br/>
           <input type="button" value="Restart with delta = 0.05" onClick="run(.05);">
           <input type="button" value="Restart with delta = 0.005" onClick="run(.005);">
           <input type="button" value="Restart with delta = 0.0005" onClick="run(.0005);">
        </form>
    </body> 
</html> 

Open in new window

Please be patient for the script server sometimes it is slow. I guess this stuff is getting popular. I tested on Google Chrome 12.

Commented:
I tested with Google Chrome 13.  The simplified version works good. The more complicated version demo doesn't work very well. It doesn't have a constant velocity. It accelerates as it pulls.  I don't know how much time I can give this. Maybe someone can take it from here. I will be available for questions.  If I find the time, then I will try to code the Java applet to do this. I want to see how it compares to what I have already done with HTML5 canvas.
Mike EghtebasDatabase and Application Developer

Author

Commented:
rrz@871311,

You are amazing. You make EE to be the wonderful place that is.

This solution is just starting point for me to do lots of exiting things.

Thank you so much,

Mike
Mike EghtebasDatabase and Application Developer

Author

Commented:
re>It accelerates as it pulls.

I think instead of incrementing b by 0.05, for example, to could be incremented by a function that reduces increment value in each step like 0.05, 0.04, ....0.001 etc.

I guess I can come up with such a function.

After I spend some time with it and customize it here and there, I will be intouch with you.

Also, if possible send me an email. We may be able to do some interesting things.

Mike
Mike EghtebasDatabase and Application Developer

Author

Commented:
WOW!
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Great you got a solution

I am in Europe (CET) so did not follow this conversation until now.

Of course this is not your average student trying to cheat on a test so I have no issue with the solutions being posted.

Best of luck

Michel
I barely know of html5. So, please keep posting what you have here (or a related question) rather than emailing to each other. One goal is to improve the EE PAQ, and direct email leaves the rest of us out.

For a pre-computed (i.e., before the animation begins) table driven solution, you could have a fixed increment of b. Then, create another table with fixed increment of x using standard interpolation approach.
Mike EghtebasDatabase and Application Developer

Author

Commented:
Hi phoffric,

Thank you for your help on the math portion of this question in math/science TA. The animation question is done. Thanks to rrz@871311.

The email request from him is not for exchanging solution and bypassing EE. Because rrz@871311 also knows Apache and I have some possible business plans where we possibly could work together.

Later I will post a question on how to do this animation using java applet (if I couldn't do it myself).

Regards,

Mike

Commented:
phoffic>So, please keep posting what you have here (or a related question) rather than emailing to each other.
I agree. We are all here to learn.

I found some more time to work on this. I dropped  the dependency on the kinetic2d lib. I just used the standard javascript timer functions and it was easier for this case.  I cleaned it up. But it still accelerates as it progresses. Maybe some fresh eyes will see the problem.  

Mike>also knows Apache and I have some possible business plans where we possibly could work together.
I am not an expert on the Apache server. I do know some about Tomcat though. But lately i am more interested in the Google App Engine. We can talk business in email.
<!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
            body {
                margin: 0px;
                padding: 0px;
            }
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style> 
        <script> 
            var drawId = 0;
            var canvas;
            var context;
            var pull;
            var r = 10; // radius of drum
            var h = 60; // height of drum off base line
            var a = 0;
            var b = 0;
            var newX = 0;
            function PullPoint(x, y){
                this.x = x;
                this.y = y;
            }
            function calculate(){
                    if(b < 1.56 && pull.x < 4000){ 
                        a = (r * Math.tan(b) + h/Math.cos(b) - h)/r - b;
                        newX = (h + r*Math.sin(b))*Math.tan(b) - r*(1 - Math.cos(b)) + 30;
                        var distance = newX - 30;
                        document.varForm.b.value = b.toFixed(4);
                        document.varForm.a.value = a.toFixed(2);
                        document.varForm.x.value = distance.toFixed(2); 
                        b += 0.0005;
                    }
            }
            function draw(){
                    // speed = pixels/time period   (which is set in setInterval call in onload function
                    var speed = document.varForm.speed.value; 
                    context.clearRect(0,0,1000,90);
                    if(speed != 0){
                        while(newX - pull.x < speed && newX < 4000)calculate();
                        pull.x = newX
                    }
                    context.strokeStyle = '#f00'; //red rope 
                    context.beginPath();
                    context.moveTo(20 + r*Math.cos(b),20 -r*Math.sin(b));
                    context.lineTo(pull.x, pull.y);     
                    context.closePath();
                    context.stroke();
                    context.fillStyle = "#FFF21F"; //yellow drum
                    context.strokeStyle = '#f00'; 
                    context.lineWidth = 1;
                    context.beginPath();
                    context.arc(20, 20, r, 0, 2 * Math.PI, false);
                    context.closePath();
                    context.fill();
                    context.stroke();
                    context.lineWidth = 2;
                    context.strokeStyle = "black"; //drum angle marker
                    context.beginPath();
                    context.moveTo(20, 20)
                    context.lineTo(20 + r*Math.cos(-a),20 - r*Math.sin(-a));
                    context.closePath();
                    context.stroke();
                    context.strokeStyle = "blue"; //base line
                    context.beginPath();
                    context.moveTo(5, 20 + h);
                    context.lineTo(999, 80);
                    context.closePath();
                    context.stroke();
                };
            window.onload = function(){
                   document.varForm.speed.focus();
                   canvas = document.getElementById("myCanvas");
                   context = canvas.getContext("2d");
                   pull = new PullPoint(30, 80);
                   drawId = setInterval("draw()", 25);
            };
        </script> 
    </head> 
    <body> 
        <h3> Pull rope from drum.</h3>
        <canvas id="myCanvas" width="1000" height="90"> 
            This text is displayed if your browser does not support HTML5 Canvas.
        </canvas> 
        <form name="varForm">
           To start(or resume) animation, enter any number greater than zero for the speed. <br/>
           To run slowly, enter something like 0.001<br/>
           <input type="text" id="speed" name="speed" value="0"/>(pixels/25 milliseconds)<br/>
           To pause animation, remove number.<br/>
           Angles measured in radians.<br/> 
           Drum angle<input type="text" id="a" name="a" value="0"  readOnly="true"/><br/>
           Angle on drum where rope contacts drum.<input type="text" id="b" name="b" value="0"  readOnly="true"/><br/>
           Distance pulled <input type="text" id="x" name="x" value="0"  readOnly="true"/>(in pixels)<br/>
           To rerun animation, refresh page.
        </form>
    </body> 
</html> 

Open in new window


Commented:
Oops, point of contact angle should be displayed as a negative number.
>document.varForm.b.value = b.toFixed(4);
replace with
document.varForm.b.value = - b.toFixed(4);
Mike EghtebasDatabase and Application Developer

Author

Commented:
re> But it still accelerates as it progresses...

Using part of your code, I got x vs. b plotted using excel (I hope aarontomosky doesn't mind if this graph looks like it comes from a text book lol):

We are supplying b in a manner that produces x shown by the red line. So, we have to supply b such that it will produce x output like the blue line.
public class BvsX
{
    public static void main(String[] args)
    {
        double r = 10.0;
        double h = 60.0; 
        double a = 0.0;
        double x = 0.0;

        System.out.println("  b\tx");
        for(int B=0;B<=50;B++)
        { 
            //B is supplied in degrees from 0 to 50 degrees
            double b = B*(Math.PI/180.0); //convert to radians
            a = (r * Math.tan(b) + h/Math.cos(b) - h)/r - b;
            x = (h + r*Math.sin(b))*Math.tan(b) - r*(1 - Math.cos(b));
            System.out.println(" "+B+"\t"+x);
        }            
    }
}

Open in new window

WhatWeNeed.png
Mike EghtebasDatabase and Application Developer

Author

Commented:
I guess my analysis is not correct. I take it back. But, the linear progression like:

for(int B=0;B<=50;B++)

needs to change to

for(int B=0;B<=50;B=supplyReducedB(B))


Where method supplyReducedB(), depending on the current value of parameter B will run a process to make sure xd/dt is linear.

Mike

Commented:
>will run a process to make sure xd/dt is linear.
Don't we want  dx/dt to be constant? Whatever is pulling the rope along the horizontal base line should do it at a constant rate, right?    
>So, we have to supply b such that it will produce x output like the blue line.
No.  At the start of the animation, dx/db will be small. It increases  as x increases. Look at phoffic's graph at  
http://www.experts-exchange.com/Other/Math_Science/Q_27229644.html?cid=748#36295588
Although the labels aren't correct, he has graphed  x = f(b).


In the simplified case, we could differentiate a = f(x) to find da/dt = f'dx/dt   See  
http://www.experts-exchange.com/Other/Math_Science/Q_27229644.html?cid=748#a36304297 

In this more complicated case, I can't find an easy solution. We are really interested in a = f(x) but it is not a simple relationship.  So, unless someone can suggest a better solution, we are forced to use "b" as a workaround.
I can't explain the observed acceleration in the animation. Maybe an expert can help us. Maybe someone can suggest a better solution.  You could open a question at
http://www.experts-exchange.com/Other/Math_Science/   
Give links to this and our first discussion.
You should post my last code( don't forget to change that one line).  Tell them to use Google Chrome, so we are all on the same page.

Commented:
I guess I should explain this line of code.
>while(newX - pull.x < speed && newX < 4000)calculate();  
What I am trying to do here is keep bumping up "b" until the distance pulled is the same for each interval of time.
I labeled it "speed". But the variable "speed" that the user inputs is a number of pixels.  It is the number of pixels that we want pulled in the time interval.  
>drawId = setInterval("draw()", 25);  
I have arbitrarily set the time interval to 25 milliseconds.

Commented:
You should also change my comment line.
>// speed = pixels/time period   (which is set in setInterval call in onload function
to
// speed = number of pixels to be pulled along the horizontal in each time period   (which is set in setInterval call in onload function
Mike EghtebasDatabase and Application Developer

Author

Commented:
To tell the truth, in what I'm doing, speed rate change is not critical. Also to your point the speed has to be constant not linear you are right I was not. Also, because x is not going to be very large, the increase in speed will not very noticeable.

I guess having it in a java desktop application or an applet  will be what I will need in a new post. If I'm given the basic structure and component I might do the time consuming work on my own in order not to impose on you and have some opportunity to sharpen my skills. Also having a UML could be very helpful also.

Thank you very much for your time and effort.

Mike

Commented:
In the process of explaining my code, I have realized the problem.
>while(newX - pull.x < speed && newX < 4000)calculate();    
This will result in over shooting. When x gets large then the overshooting will get larger. In phoffic's graph he has the x dimension in the vertical axis and b in the horizontal axis. But, in his graph, you can see that when the value of b gets around 1.4    dx/db gets very large and over shooting is a big problem. That explains the acceleration. I don't have a fix.   But since you say  
>speed rate change is not critical.
>x is not going to be very large  
I guess we can ignore the problem.  

>I guess having it in a java desktop application or an applet  will be what I will need in a new post. If I'm given the basic structure and component I might do the time consuming work on my own  
I can help you this weekend.  

Commented:
Do me a favor and include the JSP zone(along with the Java zone) in your question.
Mike EghtebasDatabase and Application Developer

Author

Commented:
re:> We are really interested in a = f(x) but it is not a simple relationship.  So, unless someone can suggest a better solution...

I have added a new question at:
http://www.experts-exchange.com/Other/Math_Science/Q_27241837.html

hoping someone may come up with the answer. I hope I have posted the correct starting equations.

I will post java and java script question tomorrow.

Thanks again,

Mike
Mike EghtebasDatabase and Application Developer

Author

Commented:
It seems somebody has a(x):

a = (1/r)*sqrt((x+r)^2+h^2-r^2) -h/r - ArcCos([r(x+r) -  h sqrt(-r^2+(x+r)^2+h^2)] / [(x+r)^2+h^2])

I need to gor over it by tracing the steps involved.

thx

Commented:
Why didn't you use my equation ?  
a = (r *tan(b) + h/cos(b) - h)/r - b;
Mike EghtebasDatabase and Application Developer

Author

Commented:
my bad, I will post this one right now.

Commented:
Do you want the derivation?
Mike EghtebasDatabase and Application Developer

Author

Commented:
No, I can see it from your post in the math TA,


Mike
Mike EghtebasDatabase and Application Developer

Author

Commented:
Yes please give me the derivation it will be helpful to sharpren my math skill.

Commented:
I can't create beautiful graphics like you have posted here. But here is mine.
rrz1.GIF
Mike EghtebasDatabase and Application Developer

Author

Commented:
NM, I got it.
Mike EghtebasDatabase and Application Developer

Author

Commented:
You beat me to it.
Mike EghtebasDatabase and Application Developer

Author

Commented:
I was using my kid's iPad and last few messages were submitted before they were ready.

You graph was excellent. I appreciate for the time and effort.

Mike

Commented:
From your equations we have
Length of green line = h + r*(a + b)
From my graph above here we have
Length of green line = r*tan(b) + h/cos(b)  
Equating the two
h + r*(a +b) = r*tan(b) + h/cos(b)
a = (r *tan(b) + h/cos(b) - h)/r - b

Commented:
Oops, I didn't see your last posts.
Mike EghtebasDatabase and Application Developer

Author

Commented:
You got it. Following is based on your good equation:

angle a   angel b    x
 00.00   00.00    00.00
 00.01   00.48    00.25
 00.05   00.95    00.50
 00.11   01.43    00.75

a and b are converted to degrees.

Mike


import java.text.DecimalFormat;
public class Data1 {
  public static void main(String args[]) {
      DecimalFormat df = new DecimalFormat("00.00");
      double h = 30;
      double r = 5;
      double a = 0;
      double b = 0;
      System.out.println("angle a\t angel b    x");
      for(double x = 0; x < 60; x +=0.25){
          
          b = Math.atan(x/h);
          a=(1/r)*Math.sqrt(Math.pow((x+r-r*Math.cos(b)),2)+Math.pow((h+r*Math.sin(b)),2))-b -(h/r);
          
          System.out.println(" " + df.format(a*(180/Math.PI)) + "  " + df.format(b*(180/Math.PI)) + "  " + df.format(x));
      }
  }
}

Open in new window

line 12: b = Math.atan(x/h);
==> tan b = x/h
Don't believe so since x=0 is defined to be at the right-most part of the circle.
Mike EghtebasDatabase and Application Developer

Author

Commented:
Based on 36323162, we have:
drum-1a.png
Mike EghtebasDatabase and Application Developer

Author

Commented:
oh I see...
>> oh I see...
Yeah, as x gets larger, the vertical leg of the blue triangle keeps shifting to the right. In fact, as x->oo, then that vertical leg also moves -> oo.
Mike EghtebasDatabase and Application Developer

Author

Commented:
Mike EghtebasDatabase and Application Developer

Author

Commented:
((x+d)/rTan(b)) = h/r

x+d = h*Tan(b)    eq.1

(r/cos(b))=r+d

d=(r/cos(b))-r     eq.2

subing d from eq.2 into eq.1:

x+(r/cos(b))-r =h*Tan(b)

x =h*Tan(b) - (r/cos(b)) +r

Is this better?



Commented:
I admire your persistence. Even though you have made a mistake,  you have found a simpler equation than the one that I used.  
The base of the blue triangle just above here is smaller than x. Your equations should be  
(x - d)/r*tan(b) = h/r
d = x - h*tan(b)
r/cos(b) = r + d  
d = r/cos(b) - r  
x - h*tan(b) = r/cos(b) - r  
x = h*tan(b) + r/cos(b) - r