Velocity Sensitivity on Drums Pads

Community Usage questions
1

Hi Guys,

I'm working on making a Drums Pads, but I'm struggling with the velocity sensitivity, the velocity should depends on how hard or soft I touch the screen, maybe its not possible with the Matrix.

Please see the below project and let me know your thoughts, also I’m welcoming any cool ideas to improve this drums pads.

Drums Pads.json (42.5 KB)

2

The button widget doesn't expose enough information to do what you want, but using a canvas instead would do, set widgetType to canvas and props to

JS{
const labels = ["1"]
const preArgs = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
const props = {
    
    "colorWidget": "limegreen", 
    "colorFill": 'rgba(99,121,142,0.5)',
    /* The underscore allows passing the #{} and @{} blocks to the child widget, 
      this way the matrix' props is not reevaluated whenever a button is pressed  */
    "css": "border-radius:10px; transform: scaleX(-1);", // scaleX(-1) ??
    "alphaFillOff": 0.3,
    "alphaFillOn": 1,
    "lineWidth": 0,
    "address": "/note",
    "preArgs": [1, @{Pitch} + preArgs[$]],
    "target" : "midi:cubase",
    "valueLength": 1
  }
  
  
props.onTouch = `
// compute value based on touch infos
if (event.type === 'start') {
  locals.touched = 1
  locals.velocity = event.force || (100/127) // velocity 100 if no touch force is provided 
} else if (event.type === 'stop') {
  locals.touched = 0
} else {
  return
}
set(this, locals.touched * locals.velocity * 127)
`
props.onDraw = `
// fill the canvas depending on velocity
ctx.rect(0,0,width, height)
ctx.fillStyle = cssVars.colorWidget
ctx.globalAlpha = value / 127
ctx.fill()
`
props.onValue = `
// make sure incoming value is a number
set(this, parseFloat(value) || 0, {sync: false, send: false})
`
return props
}
1 Like
3

Thank you @jean-emmanuel , I get velocity = 100, is that because Im using Apple iPad, or there is something I've missed?

Drums Pads-Canvas.json (43.1 KB)

4

add

console.log('force: ' + event.force)

in the onTouch, if it only prints zeros, then there's a problem with the Touch force API (AFAIK it's supported on iOS though).

5

@jean-emmanuel , yes it gives me zero. I noticed something, the below printing line is not printing when I press the canvas from the ipad , but it prints when I click on it from the computer by the mouse, its printing the value zero.

console.log('force: ' + event.force)
6

Nothing being printed is very strange, you should at the very least see the "force: " part, are you reading the messages in the ipad's console (not in the computer's) ?

7

I'm reading it form the computer console not from the iPad.

one more update, I tried now using my Samsung phone, the Canvas is working fine, I get different velocities based on how I touch the screen, it seems like it's an ios issue.

8

Client consoles are independent from each other, you need to display the console on the iPad to check what's printed by console.log when using the iPad.

one more update, I tried now using my Samsung phone, the Canvas is working fine, I get different velocities based on how I touch the screen, it seems like it's an ios issue.

Ok good to know !