Measure the speed of a movement

tomy

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.

dheerendra

Two options to measure time

console.time and console.timeend
JavaScript Date

tomy

@dheerendra

Two options to measure time

console.time and console.timeend

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?

dheerendra

Try. It should work.

ODБOï

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

tomy

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

ODБOï

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


}

tomy

@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!

dheerendra

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

tomy

@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?

dheerendra

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.

tomy

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

ODБOï

@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"
        }

tomy

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

ODБOï

@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

tomy

@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?

J.Hilk

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

tomy

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

J.Hilk

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