# 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;
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?

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

• Try. It should work.

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

• 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`!

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

• 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`.

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

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

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

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