Time for action – drawing a heartbeat

We will extend our component now and implement its main functionality–drawing a heartbeat-like diagram.

Add the following property declarations to canvas:

property int lineWidth: 2
property var points: []
property real arg: -Math.PI

Below, add a declaration for a timer that will drive the whole component:

Timer {
  interval: 10
  repeat: true
  running: true
  onTriggered: {
    arg += Math.PI/180
    while(arg >= Math.PI) arg -= 2*Math.PI
  }
}

Then, define the handler for when the value of arg is modified:

onArgChanged: {
  points.push(func(arg))
  points = points.slice(-canvas.width)
  canvas.requestPaint()
}

Then, implement func:

function func(argument) {
  var a=(2*Math.PI/10); var b=4*Math.PI/5
  return Math.sin(20*argument) * (
      Math.exp(-Math.pow(argument/a, 2)) +
      Math.exp(-Math.pow((argument-b)/a,2)) +
      Math.exp(-Math.pow((argument+b)/a,2))
  )
}

Finally, modify onPaint:

onPaint: {
  var ctx = canvas.getContext(&quot...