var d = SVG().addTo('#drawing').size(200, 400);

var svgRect = d.rect(200, 400).fill('#FFF')

d.add(svgRect);

var group = d.group();

fetch('test.svg')

  .then(response => response.text())

  .then((svgData) => {

    group.svg(svgData).move(50, 50);

  })

​

​

//create Csound and compile orc

const orcCode = `

; Initialize the global variables. 

; Initialize the global variables. 

ksmps = 32

nchnls = 2

0dbfs = 1

​

​

instr 1

kAmp = tonek(chnget:k("gain"), 10);

kFreq = tonek(chnget:k("freq"), 10);

a1 oscil kAmp, kFreq

outs a1, a1

endin

`;

​

let csound;

let isPlaying = false;

​

function startCsound() {

  console.log("loading... loaded!");

  csound = new CsoundObj();

  csound.setOption('-m0d');

  csound.compileOrc(orcCode);

  csound.start();

​

}

​

CsoundObj.initialize().then(() => {

  startCsound();

});

​

​

//p5js layer...

let freq, amp;

​

function setup() {

  var myCanvas = createCanvas(200, 400);

  myCanvas.parent("p5Sketch");

​

  amp = new NumberBox(50, 30, 50, 30, "gain", 0, 1, 0.5);

  freq = new NumberBox(120, 30, 50, 30, "freq", 0, 5000, 440, 10);

}

​

function draw() {

  background(0, 0, 0, 0);

  amp.show();

  freq.show();

}

​

function mousePressed() {

  if (csound && isPlaying === false) {

    csound.audioContext.resume();

    print("Starting");

    csound.setControlChannel(freq.channel, freq.value);

    csound.setControlChannel(amp.channel, amp.value);

    csound.readScore('i1 0 3600');

    isPlaying = true;

  }

​

  freq.mousePressed();

  amp.mousePressed(); 

}

​

​

​

function mouseReleased(){

  freq.mouseReleased();

  amp.mouseReleased();  

}

​

​

function mouseDragged() {

  freq.mouseDragged();

  amp.mouseDragged();

}

​

class NumberBox {

  constructor(x, y, w, h, channel, min, max, value, incr) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.value = value;

    this.minValue = min;

    this.maxValue = max;

    this.channel = channel;

    this.dragVector = createVector(0, 0);

    this.increment = (typeof incr === 'undefined' ? 0.05 : incr);

    this.pressed = false;

  }

​

  show() {

    fill(255);

    strokeWeight(2);

    stroke(0);

    textAlign(CENTER, CENTER);

    rect(this.x, this.y, this.w, this.h, this.h * 0.2);

    noStroke();

    fill(0);

    text(this.value.toFixed(2), this.x, this.y, this.w, this.h)

  }

​

  mousePressed() {

    if (mouseX > this.x && mouseX < this.x + this.w &&

      mouseY > this.y && mouseY < this.y + this.h) 

      this.pressed = true;

    else

      this.pressed = false;  

    print(this.pressed);

  }

  mouseReleased(){

    this.pressed = false;

  }

  mouseDragged() {

    if(this.pressed == true){

      var mousePos = createVector(mouseX, mouseY);

      this.dragVector = this.dragVector.sub(mousePos);

      if (this.dragVector.heading() < 0) {

        this.value = constrain(this.value -= this.increment, this.minValue, this.maxValue);

      } else {

        this.value = constrain(this.value += this.increment, this.minValue, this.maxValue);

      }

      this.dragVector = mousePos;

      csound.setControlChannel(this.channel, this.value);

    }

  }

}