​

let zString;

let xString;

let cString;

let vString;

​

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  r = random(255);

  g = random(255);

  b = random(255);

  strokeWeight(10);

  zString = new Wire(width*0.2);

  xString = new Wire(width*0.4);

  cString = new Wire(width*0.6);

  vString = new Wire(width*0.8);

​

}

​

function draw() {

  background(0);

        for (var q = 0; q < height; q += height / 5) {

            stroke(100);

            strokeWeight(1);

            line(0, q, width, q);

      }

  strokeWeight(10);

  zString.show();

  xString.show();

  cString.show();

  vString.show();

​

fc = frameCount*0.01

}

​

function keyTyped(){

  if(key === "z"){

    zString.play(color(r,g,0),10);

  }else   

  if(key === "x"){

    xString.play(color(r,0,b),45);

  }else

  if(key === "c"){

    cString.play(color(0,g,b),20);

  }else

​

  if(key === "v"){

    vString.play(color(r,g,b),30);

  }

  if(key === "v"){

​

  }

  return false;

}

​

function keyReleased(){

  // setting colour back to white when key is released

  if(key === "z"){

    zString.play(color(240,240,240),0);

  }else   

  if(key === "x"){

    xString.play(color(240,240,240),0);

  }else

  if(key === "c"){

    cString.play(color(240,240,240),0);

  }else

  if(key === "v"){

    vString.play(color(240,240,240),0);

  }

  return false;

}

​

​

// Can't use "string" as a name in JavaScript. 

// Used "wire" instead.

​

function Wire(X){

  fc = frameCount;

  this.x = X;

  this.colour = color(240,240,240);

  this.amp = 0;

​

​

  this.show = function( ){      

    stroke(this.colour);

    for(let i=0; i<height; i++){

    let y = i;

    let x = this.x+sin(i*0.02+fc*10)*this.amp;

    point(x,y);}

  }

​

​

this.play = function(COL,AMP){

    // this.colour gets reassigned when "play" is called

    this.colour = COL;

    this.amp = AMP;

    }

​

}

​

​