JSFiddle - React, Tailwind, and code Playground

by Eve Weinberg

HTML

<script src="https://raw.githubusercontent.com/jonobr1/two.js/master/build/two.js"></script>


    <title>Open vs Closed --- ToneJS</title>
    
    
    <script src="https://cdn.tonejs.org/latest/Tone.js"></script>
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
   
    
 

  </body>

CSS

body, html {
  height: 100%;
}

JavaScript

var gridDist = 30; //this will get smaller and smaller on each mouse click
var distortionAmt = 0;
var changereverb = 0;
var maskRad = 800;
var randNote = [];
var synths = [];
var rvgr = 0;
var timing = ["0:0", "0:1", "0:2", "0:3", "1:0", "1:1", "1:1", "1:2"]
var sampleURLArray = ["http://evejweinberg.github.io/samples/Hola.mp3",
    "http://evejweinberg.github.io/samples/Meow.wav",
    "http://evejweinberg.github.io/samples/Buzz.m4a"
]
var player;




// what is a chorus? what are these three parameters?
var chorus = new Tone.Chorus(4, 2.5, 0.5);
// how does connect work? what should i be chaining together and in what order?
//create one of Tone's built-in synthesizers and connect it to the master output
var synth = new Tone.SimpleSynth().toMaster().connect(chorus);
var reverb = new Tone.JCReverb(changereverb).connect(Tone.Master);


var dist = new Tone.Distortion(distortionAmt).toMaster(); //distortionAmt to get bigger on click
var fm = new Tone.SimpleFM().connect(dist);
//this sounds good on bass notes
// fm.triggerAttackRelease("A1", "8n");



//should I call this once first so the shapes show up?
// changeSize ();

//p5 draw loop
$(document).ready(function() {

    $("body").on('click', function() {
        //pick a random number
        var randNote = Math.floor((Math.random() * sampleURLArray.length) + 0);
        console.log(randNote)
        // make a player with that smaple
        player = new Tone.Player(sampleURLArray[randNote]).toMaster();
        //when loaded, play that sample
        Tone.Buffer.on("load", function() {
            player.start();
        });
      
        $('body').html('')
        rvgr = rvgr+.1;
        changeSize();
        gridDist = gridDist + 12;
        maskRad = maskRad - 20;
        changereverb = changereverb + .5;
            var reverbGrow = new Tone.Freeverb(rvgr,3000).toMaster();
reverbGrow.wet.value = 1;
player.connect(reverbGrow);

    })



});





var two;
var container;
var center;

function changeSize() {
   ...