Piano Pads

by Eve Weinberg

HTML

<script src="https://tonejs.github.io/CDN/r6/Tone.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <div class="body">
    <div id="wrapper"></div>
  </div>

CSS

.body{
  width: 500px;
}



.boxes {
  background-color: #FFA0DB;
  border: 2px;
  border-radius: 10px;
  margin: 1%;
  width: 27%;
  height: 40%;
  position: relative;
  display: inline-block;
  float: left;
  overflow: hidden; }

.boxes:hover {
  background-color: #FF4FD0; }

p {
  color: #1CA1C1; }

#wrapper {
  background: black;
  left: 0px;
  top: 0px;
  position: absolute; }

/*# sourceMappingURL=style.css.map */

JavaScript

var rows = 5;
var colNum = 3;
var totalNotes = 12;
var musicScale = ["A","B","C","D","E","F","G"]
var octave = 4;

$(document).ready(function () {

    var synth = new Tone.SimpleSynth({
            "oscillator" : {
                "type" : "square"
            },
            "envelope" : {
                "attack" : 0.01,
                "decay" : 0.2,
                "sustain" : 0.2,
                "release" : 0.2,
            }
        }).toMaster();




/////////draw all the boxes with their notes///////////////
 for (i = 0; i < totalNotes; i++) {

        allBoxes(i);
    }

 ////////////////   


function allBoxes(i) {
    
    // var radius = 100;
    var imageObject = $("<div class='boxes'></div>")

    imageObject.attr('id', 'layer' + i);

    imageObject.mousedown(function (evt) {
    console.log('clicked', imageObject)
       console.log("\""+musicScale[i%musicScale.length]+octave+"\"")
       synth.triggerAttack("\""+musicScale[i%musicScale.length]+"\"");
    })

    imageObject.mouseup(function (evt) {
        console.log('up')
         synth.triggerRelease();
     })
  
    $('body').append(imageObject);
}







});