Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pendulum - Shake Animation TRICK???

    Hello!
    I'm working on a widget for XWidget pc program:
    http://www.xwidget.com/

    and I want to reproduce this:


    The design is almost finished but I need a help with the movement of the balls (right/left)
    Currently the widget uses this script:

    Code:
    var rockRange = 5; //ζȣ޸ֵ
    
    /////////////////////
    var Counter= 1;
    function timercore1OnUpdate(Sender)
    {
    Counter = Counter +1;
    rotator1.rotateAngle = -15 + (Math.cos((Counter%40)/40*2*Math.PI)/rockRange+0.25)/Math.PI*180 ;
    
    Counter = Counter +1;
    rotator2.rotateAngle = -15 + (Math.cos((Counter%40)/40*2*Math.PI)/rockRange+0.25)/Math.PI*180 ;
    }
    (rotator 1 is the left ball and rotator 2 the right ball)
    but with this script the balls move in the same direction.
    What should I do so the balls will move as the real one?
    It needs a "sleep" function?
    I think that the right ball when the widget starts, on the first run, needs 1 sec of delay.
    I'm a novice user so pls provide me the final script code for this..

    Thank you

  • #2
    New Coder
    Join Date
    Oct 2005
    Location
    London, United Kingdom
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I suppose that you just need to add the corresponding offset to Counter in the second block to shift the phase.

    It would be a great help if you create JSFiddle with the pendulum or post here more code.
    Code Review 4U - boost your code and skills for
    being social - JavsScript and C# code reviews.

  • #3
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your interest Alex, but I as I wrote I'm not so expert in scripts so it will be more easier for me if you can give me the form of the script written...
    Thank you

  • #4
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Quoting someone:

    Quote Originally Posted by Philip M View Post
    This forum is not a free coding service. As a general rule, the people helping out in this forum don't write code for others ([..]), but try to help with fixing code that doesn't work. You'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work.

  • #5
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Here is my 5 minute attempt
    Code:
    <!DOCTYPE HTML>
    <html>
     <body>
       <canvas id="myCanvas" width="600" height="600"></canvas>
       <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        var direct=-0.05, bangle=0.9, wire=90;
        ctx.fillStyle = 'green';
       
    function initialise(){
      drawball(180,100,0);
      drawball(220,100,0);
      drawball(260,100,0);
      drawball(300,100,0);
      drawball(340,100,bangle);
    }
    
    function drawball(xval,yval, angle){
      var x2=xval+wire*Math.sin(angle);
      var y2=yval+wire*Math.cos(angle);
      ctx.beginPath();
      ctx.moveTo(xval,yval);
      ctx.lineTo(x2,y2);
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(x2,y2,20,0,2*Math.PI);
      ctx.fill();
      }
    
    function move(){
      if (bangle>1 || bangle<-1){
          direct=-direct;
        }
      bangle+=Math.cos(bangle)*direct;
      if (bangle>-.001){
        ctx.clearRect(320,100,120,110);
        drawball(340,100,bangle);
         }
      if (bangle<.001){
        ctx.clearRect(80,100,120,110);
        drawball(180,100,bangle);
         }   
     }
    
    initialise();
    setInterval(move,8);
    
      </script>
     </body>
    </html>
    Last edited by donna1; 11-09-2013 at 02:51 PM.

  • #6
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Airblader View Post
    Quoting someone:
    But if you see my original first post you will see that there is already my code!
    I only need help to edit it adding a funtion..


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •