Various Vector Graphics By Vecteezy.
https://en.wikipedia.org/wiki/Physical_computing
1. Create a package.json manifest
{
"name": "water-tones",
"main": "index.html",
"window": {
"width": 960,
"height": 600
}
}
2. Install Johnny-Five (Node Module)
npm install johnny-five --save
{
"name": "water-tones",
"main": "index.html",
"window": {
"width": 960,
"height": 600
},
"dependencies": {
"johnny-five": "^0.9.34"
}
}
3. Install nwjs-j5-fix module
npm install nwjs-j5-fix --save
{
"name": "water-tones",
"main": "index.html",
"window": {
"width": 960,
"height": 600
},
"dependencies": {
"johnny-five": "^0.9.34",
"nwjs-j5-fix": "^1.0.3"
}
}
4. Create the index.html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Water Tones</title>
<script src="libs/Tone.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="G3"></div>
<div id="A3"></div>
<div id="F3"></div>
<div id="F2"></div>
<div id="C3"></div>
</body>
</html>
5. Add The JavaScript Code
nw.require("nwjs-j5-fix").abracadabra();
var five = nw.require("johnny-five");
var board = new five.Board();
board.on("ready", function() {
var synth = new Tone.PolySynth().toMaster();
var notes = ["G3", "A3", "F3", "F2", "C3"];
var keypad = new five.Keypad({controller: "MPR121_SHIELD"});
keypad.on("press", function(data) {
data.which.forEach(function(index) {
if (index < notes.length) {
synth.triggerAttack(notes[index]);
document.getElementById(notes[index]).classList.add("active");
}
});
});
keypad.on("release", function(data) {
// similar to above...
});
});
