Activity on apparent tactile motion: display ideal duration/SOA on value change

Author: ChristianFrisson

index.html

@@ -433,15 +433,19 @@ <h2>Study</h2>
 				<section>
 					<h2>Activity</h2>
 					<p>Explore the effects of parameters</p>
-					<div width="20Opx">
+
 				    <canvas nx="dial" id="intensity1" label="Intensity" min="0" max="1" height="100" width="100"></canvas>
 					<canvas nx="dial" id="duration1" label="Duration" min="0.01" max="1000" height="100" width="100"></canvas>
 					<canvas nx="dial" id="soa1" label="SOA" min="0" max="1000" height="100" width="100"></canvas>
 					<canvas nx="button" id="bang1" label="Trigger" height="100" width="100"></canvas>
-					<canvas nx="envelope" id="envelopeLeft1" label="Envelope (left)" height="100" width="100"></canvas>
-					<canvas nx="envelope" id="envelopeRight1" label="Envelope (right)" height="100" width="100"></canvas>
+					<br/>
+					<canvas nx="envelope" id="envelopeLeft1" label="Envelope (left)" height="100" width="200"></canvas>
+					<canvas nx="envelope" id="envelopeRight1" label="Envelope (right)" height="100" width="200"></canvas>
+					<br/>
+					<canvas nx="dial" id="idealDuration1" label="Ideal duration" min="0.01" max="1000" height="100" width="100"></canvas>
+					<canvas nx="dial" id="idealSoa1" label="Ideal SOA" min="0" max="1000"  height="100" width="100"></canvas>
 					<!--<canvas nx="toggle" id="svgToggle1" label="Toggle SVG"></canvas>-->
-					</div>
+
 					<div id="pdPatch1" class="pdPatch"></div>
 					<script>
 					Pd.start();

js/webaudiohaptics.js

@@ -65,6 +65,8 @@ function addActivity1(patchUrl, pdPatchId, suffix) {
 
 function addActivity(patchUrl, pdPatchId, suffix) {
 
+	console.log('addActivity', patchUrl, pdPatchId, suffix)
+
 	var defaultIntensity = 0.3;
 	var defaultDuration = 100;
 	var maxDuration = 2000;
@@ -79,6 +81,9 @@ function addActivity(patchUrl, pdPatchId, suffix) {
 		var envelopeLeft = nx.widgets['envelopeLeft' + suffix];
 		var envelopeRight = nx.widgets['envelopeRight' + suffix];
 		var svgToggle = nx.widgets['svgToggle' + suffix];
+		var idealDuration = nx.widgets['idealDuration' + suffix];
+		var idealSoa = nx.widgets['idealSoa' + suffix];
+		console.log(nx.widgets)
 
 		if (intensity) {
 			intensity.on('value', function(data) {
@@ -88,14 +93,29 @@ function addActivity(patchUrl, pdPatchId, suffix) {
 		}
 		if (duration) {
 			duration.on('value', function(data) {
-				//console.log('duration', data)
-				Pd.send('duration', [data])
+				Pd.send('duration', [data]);
+				if (idealSoa) {
+					// SOA = 0.28 * duration + 60.7
+					var idealSoaVal = 0.28 * data + 60.7
+					//console.log('idealSoa', idealSoaVal)
+					idealSoa.set({
+						value: idealSoaVal
+					})
+				}
 			})
 		}
 		if (soa) {
 			soa.on('value', function(data) {
 				//console.log('soa', data)
 				Pd.send('soa', [data])
+				if (idealDuration) {
+					// SOA = 0.28 * duration + 60.7
+					var idealDurationVal = (data - 60.7)/0.28;
+					//console.log('idealDuration', idealDurationVal)
+					idealDuration.set({
+						value: idealDurationVal
+					})
+				}
 			})
 		}
 		if (bang) {
@@ -203,6 +223,12 @@ function addActivity(patchUrl, pdPatchId, suffix) {
 		soa.set({
 			value: defaultSOA
 		})
+		idealDuration.set({
+			value: defaultDuration
+		})
+		idealSoa.set({
+			value: defaultSOA
+		})
 
 		envelopeLeft.set({
 			points: [{