Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Measure the speed of a movement



  • Hi all,

    I want to know how quick a hit between a rocket and a ball is.
    Please consider the following simple code:

    main.qml:

    import QtQuick 2.9
    import QtQuick.Window 2.2
    
    Window {
        id: root
        visible: true
        width: 720
        height: 620
        property int move_time: 0
    
            Rectangle {
                id: ball
                x: root.width - 60
                y: root.height/3
                width: 15
                height: 15
                color: "black"
            }
    
            Rocket {
                id: racket
                x: root.width - 50
                y: root.height/3
                color: "blue"
            }
    
            if ((ball.x + ball.width >= racket.x &&
                 ball.x <= racket.x + racket.width) &&
                    (ball.y + ball.height >= racket.y &&
                     ball.y <= racket.y + racket.height)) {
                // hit occurred 
                move_time = howQuick() // Measure the speed 
            }
    
            function howQuick() {
                return time // in milliseconds
            }
            
    }
    

    Racket.qml:

    import QtQuick 2.12
    
    Rectangle {
        id: root
        width: 15; height: 65
    
        MouseArea {
            anchors.fill: root
            anchors.margins: -root.height
            drag.target: root
            drag.axis: Drag.YAxis
            drag.minimumY: 0
            drag.maximumY: 600
        }
    }
    

    main.cpp:

    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    
    int main(int argc, char *argv[])
    {
        QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    
        QGuiApplication app(argc, argv);
    
        QQmlApplicationEngine engine;
        engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
        if (engine.rootObjects().isEmpty())
            return -1;
    
        return app.exec();
    }
    

    What is the best way to achieve how quick was the hit? (in milliseconds) For instance, a smaller number in milliseconds if it's quick and a bigger number if it's not that quick but rather slow. Do we have a method in QML specific for that?

    Thanks in advance.


  • Qt Champions 2017

    Two options to measure time

    1. console.time and console.timeend
    2. JavaScript Date


  • @dheerendra

    Two options to measure time

    1. console.time and console.timeend
    2. JavaScript Date

    Thanks. Do both work for this task?
    I guess the first is easier to use because I don't know JavaScript.

    Do you agree I use option 1?


  • Qt Champions 2017

    Try. It should work.



  • @tomy said in Measure the speed of a movement:

    I don't know JavaScript

    console.time
    

    is js.
    And your code contains js also

    //this is js
            if ((ball.x + ball.width >= racket.x &&
                 ball.x <= racket.x + racket.width) &&
                    (ball.y + ball.height >= racket.y &&
                     ball.y <= racket.y + racket.height)) {
                // hit occurred 
                move_time = howQuick() // Measure the speed 
            }
    
            function howQuick() {
                return time // in milliseconds
            }
    


  • @LeLev
    Thank you.
    Three questions:

    1- How to recognise JavaScript in my QML code? Is it right that everything in the code except components (Text, Rectangle, Button and so on) is JavaScript?
    (For example, I used JavaScript in the code above but didn't figure it out!)

    2- Is the option 2 (JavaScript Date) this: new Date().getTime()?

    3- Is it right if we want to use a function, condition, loop or statement, in QML, it should be inside a component (Text, Rectangle, Button and so on)? That is, for an if condition, for example, it should be wrapped by a component otherwise we get an error by the Qt Creator.



  • see : JavaScript Expressions in QML Documents

    @tomy said in Measure the speed of a movement:

    3 Is it right if we want to use a function, condition, loop or statement, in QML, it should be inside a component (Text, Rectangle, Button and so on)? That is, for an if condition, for example, it should be wrapped by a component otherwise we get an error by the Qt Creator.

    It should be i a place where you can write Js code, because "function, condition, loop or statement" is javascript in QML

    This is not the rule, but often when you write : in QML, you can write js after. You can give fixed hardcoded value to a property or give js expression so the value is dynamic and based on some condition

    some exemples:

    Item{
    
         function getWidth(){ // a simple js function defined in the file
             return  5*2
        }
    
       signal mySignal() // QML signal that you can 'emit/call'  
       
    
      height : /*here you can write js*/  5*2 // this is js. 
      width : getWidth()  // calling js function 
      visible : height > 0  ?  true : false  // js conditionnal expression
      
    
     onVisibleChanged : { // js code, open ' { '  if more than one line .. ad close '}'
        console.log("calling signal")
        mySignal()   
     }
    
    
    }
    


  • @LeLev Thanks.

    I tried to use Both Date.getTime() and console.log this way:

    import QtQuick 2.9
    import QtQuick.Window 2.2
    
    Window {
        id: window
        width: 720
        height: 620
    
        Rectangle {
            id: table
            width: window.width / 1.15; height: window.height / 1.15
            y: 10
            anchors.horizontalCenter: parent.horizontalCenter
            color: "gray"
    
            Rectangle {
                id: ball
                x: table.width - 60
                y: table.height/3
                width: 15
                height: 15
                color: "black"
            }
    
            Rocket {
                id: racket
                x: table.width - 50
                y: table.height/2
                color: "blue"
             }
    
            Item {
              function get_speed() {
                if ((ball.x + ball.width >= racket.x &&
                      ball.x <= racket.x + racket.width) &&
                      (ball.y + ball.height >= racket.y &&
                       ball.y <= racket.y + racket.height))
                    return new Date().getTime(); // Hit occurred
                               //Give the time of hit
                     }
            console.log(get_speed().toString())  // calling the function inside log
          }
      }
    }
    

    But still get an error for console.log!


  • Qt Champions 2017

    console.log should be with the handler code. When do you want to call the get_speed method ?



  • @dheerendra

    console.log should be with the handler code. When do you want to call the get_speed method ?

    Edited:
    What is the handler code here? console.log is inside Item, is it not part of handler code?
    I want just to test that function to see when the two rectangles meet each other, we have the output of the function shown by console.log.

    How to fix the code to reach that goal please?


  • Qt Champions 2017

    It is Item object. Inside this you will be able to assign values to property only. You will not be able to call method. Your method get_speed has to be called based on some condition. In your program tell me the condition on which you would like to call get_speed() method.



  • @dheerendra

    The function is not my goal actually, I tried to use it just for the condition. What I want is to set a condition, here for example, an if condition, to test whether the two rectangles meet each other. And if they meet, it gives us the time of that meet through Date().getTime() and we put that time, which is in milliseconds into the propert double test and finally show that test's value on console.log.
    Please consider it's code:

    import QtQuick 2.9
    import QtQuick.Window 2.2
    
    Window {
        id: window
        visible: true
        width: 720
        height: 620
        property double test
    
        Rectangle {
            id: table
            property double test: 0
            width: window.width / 1.15; height: window.height / 1.15
            y: 10
            anchors.horizontalCenter: parent.horizontalCenter
            color: "gray"
    
            Rectangle {
                id: ball
                x: table.width - 60
                y: table.height/3
                width: 15
                height: 15
                color: "black"
            }
    
            Rocket {
                id: racket
                x: table.width - 50
                y: table.height/2
                color: "blue"
            }
            
          if ((ball.x + ball.width >= racket.x &&
               ball.x <= racket.x + racket.width) &&
               (ball.y + ball.height >= racket.y &&
               ball.y <= racket.y + racket.height))
               test = new Date().getTime(); // Hit occurred
            
               console.log(test.toString())
       }
    }
    


  • @tomy Your ball is a Rectangle, so it has x, y and other properties,
    for each property you have onPropertyNameChanged signal. Use onXChanged of your ball

     Rectangle {
                id: ball
                x: table.width - 60
    onXChanged:{
    
     
    }
                y: table.height/3
                width: 15
                height: 15
                color: "black"
            }
    


  • @LeLev
    Thanks but what I wanted was something else!
    Look please, we have two rectangles, and using a condition, we want to get the time when these two meat. Then show that time using console.log.
    It's the whole thing I want for this thread. I think it's not that complicated.



  • @tomy said in Measure the speed of a movement:

    when these two meat

    So they will move no ? Thats why i suggest to test if there is a Collision every time the ball will move , so xChanged and yChanged



  • @LeLev

    So they will move no ?

    Yes. We move them, for example by dragging the racket.
    Please look at the Racket.qml code above in the first post of this thread.

    The if condition is exactly to test for that Collision. If they collide, we obtain a time.
    Afterwards we use that time.

    Is it clear now, please?


  • Moderators

    hi @tomy ,

    Let's break it down a bit.

    you wrote yourself a condition (either an if-statement or a function or combination of both)

    Now the question is, how to you check/ where to you check if that condition is met?

    @LeLev suggested to bind it to updates of x or y values of your ball.

    That is one of a couple of ways to do it (that at least come to my mind):

    • Bind collision check to Ball (x and/or y) position change
    • Make a Timer to periodically check
    • Bind a property to the condition

    I think method 3 is the one I would go:

    //inside id:table
    
    property bool collision: {
        if ((ball.x + ball.width >= racket.x && ball.x <= racket.x + racket.width) && (ball.y + ball.height >= racket.y && ball.y <= racket.y + racket.height))
            return true;
        else
           return false;
    }
    
    onCollisionChanged:{
        if(collision) {
             var colTime = new Date().getTime()
             console.log("A collision happend!", colTime)
        }
    }
    


  • @J.Hilk
    Thank you for that remedy.

    In my example, the racket can go up and down only. The onYChanged method checks the difference on Y pixel (or point?) by pixel, repeatedly. It's fine.

    The Timer, what that was in my mind, has interval, start and stop which are handy for gaining what we want.

    But what you used is strange (for me) and very good too. It apparently checks that bool collision repeatedly just like onYChanged. Doesn't it? It was new for me.

    I thought of the code and knew that two times are needed to measure the speed of the collision: X = V(t2 -t1). So went for defining two bools as follows:

    //inside id:table
    
           property bool collision_1: {
               if ((ball.x + ball.width >= racket.x &&
                    ball.x <= racket.x + racket.width) &&
                   (ball.y + ball.height >= racket.y &&
                    ball.y <= racket.y + racket.height))
                   return true;
               else
                  return false;
           }
    
           onCollision_1Changed:{
               if(collision_1) {
                    var colTime_1 = new Date().getTime()
                    console.log("First collision happend!", colTime_1)
               }
           }
    
           property bool collision_2: {
               if ((ball.x + ball.width >= racket.x &&
                    ball.x <= racket.x + racket.width) &&
                   (ball.y + (ball.height / 1.2) >= racket.y &&
                    ball.y <= racket.y + racket.height))
                   return true;
               else
                  return false;
           }
    
           onCollision_2Changed:{
               if(collision_2) {
                    var colTime_2 = new Date().getTime()
                    console.log("Second collision happend!", colTime_2)
               }
           }
    

    Now we have the two times, and the X (in the equation) is ball.height / 1.2 (look at the third line of the second condition) which equals to 15 / 1.2 = 12.

    So the equation is complete and V is achievable.
    We use that V to set the speed of the ball when it's hit by the racket. Just like when you hit the ball slowly by a racket, the ball takes low speed, but when hit powerfully, it takes high speed.

    I think there isn't any built_in method to achieve the speed of the collision (V). Is there? If yes, we can draw back from using the above method.

    The second question is, as you see, the V is obtained by a two-step way, that is, two if-condition are used. Could we do that in one step making the code simpler?

    Thanks.


  • Moderators

    @tomy said in Measure the speed of a movement:

    But what you used is strange (for me) and very good too. It apparently checks that bool collision repeatedly just like onYChanged. Doesn't it? It was new for me.

    Well, that is JavaSkript, took me a while to get my head around as well.

    It basically boils down to this:
    You define a QPROPPERTY and bind ( ':' operator instead of '=') a JS-expression to it.
    Therefore whenever a variable inside that JS-expression is changed, the whole expression is reevaluated and the result asigned to your property.

    I think there isn't any built_in method to achieve the speed of the collision (V). Is there?

    not that I know of, but I haven't looked (very deeply) into it

    The second question is, as you see, the V is obtained by a two-step way, that is, two if-condition are used. Could we do that in one step making the code simpler?

    of course you can simply bind the finished evaluation to a property.
    Will it make the code simpler? Probably not.


Log in to reply