var wav2;

​

var waves = [];

var waves2 = [];

​

var canvas;

​

function windowResized() {

  //console.log('resized');

  resizeCanvas(windowWidth, windowHeight);

}

​

// var xspacing = 16;    // Distance between each horizontal location

// var w;                // Width of entire wave

// var theta = 0.0;      // Start angle at 0

// var amplitude = 75.0; // Height of wave

// var period = 500.0;   // How many pixels before the wave repeats

// var dx;               // Value for incrementing x

// var yvalues;  // Using an array to store height values for the wave

​

var masterMod = 0;

var modMax = 200;

var modMin = 0;

var modInc = 1;

​

function setup() {

 canvas = createCanvas(windowWidth, windowHeight);

 canvas.position(0, 0);

 //canvas.style('z-index', '-1'); 

 colorMode(HSB);

 // createCanvas(1000,800);

 var myC = color(255);

 var cUp = color(170, 0, 0);

 var hUp = 0;

 var hUp2 = 0;

 var sUp = 20;

 var bUp = 20;

 var cUp2 = color(0,20,30);

 //hue 230 -170

 var lenUp = -150;

 var lenUp2 = 0;

 for (var i = 0; i < 15; i++) {

  cUp = color(170 + hUp, sUp, bUp);

  waves.push(new Wave(100, lenUp, 6, cUp, 16, 50.0, .03, 800.0));

  lenUp += 15;

  hUp += 6;

  sUp += 36

  bUp += 36;

​

​

 }

  for (var i = 0; i < 8; i++) {

  cUp2 = color(hUp2, 20 + sUp, 20 + bUp);

  waves2.push(new Wave(100, lenUp2, 6, cUp2, 16, 50.0, .03, 800.0));

  lenUp2 += 15;

  hUp2 += 6;

  sUp += 36

  bUp += 36;

​

​

 }

​

//wav1 = new Wave();

​

​

​

}

​

function draw() {

 //Using a transparent background

 colorMode(RGB)

 //fill(255,255,255,30);

 //rect(0,0,width,height);

  colorMode(HSB);

  background(360);

​

​

//WAVE1 calc and render - BLUE

//

//

//

//

​

 for (var i = 0; i<waves.length; i++){

  waves[i].calcWave();

  waves[i].renderWave();

 }

//WAVE 2 calc and render - red

//

//

//

//

  for (var i = 0; i<waves2.length; i++){

  //waves2[i].calcWave();

  //waves2[i].renderWave();

 }

 //WAVE 1 params BLUE

  for (var j = 0; j<waves.length; j++){

  waves[j].size = map(masterMod,modMin, modMax,6,6);//(masterMod/500);

  waves[j].period = 50.0;

  waves[j].angVel = map(mouseX,0,width,.001,.1);

  waves[j].xspacing = map(mouseX,0,width,9,15);

  waves[j].amplitude = map(mouseY,0,height,7,100);

  // waves[j].angVel = (map(masterMod,modMin,modMax,.001,.5));

  // waves[j].xspacing = map(masterMod,modMin,modMax,17,21);

  // waves[j].amplitude = map(masterMod,modMin,modMax,10,150);

  //waves2[j].Yoff += map(masterMod,modMin, modMax,.5,-.5);

  // waves[j].c = color(waves[j].hue,waves[j].saturation,waves[j].brightness);

  //waves[j].c = ( hue(waves[j].c), saturation(waves[j].c), brightness(waves[j].c));

  //print(waves[j].c);

 }

 //WAVE 2 params RED

  for (var j = 0; j<waves2.length; j++){

  waves2[j].size = map(masterMod,modMin, modMax,7,60);//(masterMod/500);

  waves2[j].period = 50.0;

  waves2[j].angVel = map(mouseX,0,width,.001,1);

  waves2[j].xspacing = map(mouseX,0,width,25,12);

  waves2[j].amplitude = map(mouseY,0,height,5,150);

  //waves2[j].Yoff += map(masterMod,modMin, modMax,-.5,.5);

  // waves[j].angVel = (map(masterMod,modMin,modMax,.001,.5));

  // waves[j].xspacing = map(masterMod,modMin,modMax,17,21);

  // waves[j].amplitude = map(masterMod,modMin,modMax,10,150);

 }

​

​

  masterMod += modInc;

 if (masterMod > modMax || masterMod < modMin) {

  modInc *= -1;

 }

 fill(255);

 rect(width-100,0,width,height);

​

}

​

//////////

//////////

//////////

//////////

//////////

//////////

//WAVE CLASS

//////////

//////////

//////////

//////////

//////////

//////////

​

​

​

​

function Wave(tempXoff, tempYoff, tempSize, tempC, tempSpace, tempAmp, tempVel, tempPeriod) {

​

 this.Xoff = tempXoff;

 this.Yoff = tempYoff;

 this.size = tempSize;

 this.c = color(tempC);

 this.xspacing = tempSpace;

 this.amplitude = tempAmp;

 this.angVel = tempVel;

 this.period = tempPeriod

​

​

 this.w = width *3 // Width of entire wave

 this.theta = 0.1; // Start angle at 0

 this.dx = (TWO_PI / this.period) * this.xspacing; // Value for incrementing x

 this.yvalues = new Array(floor(this.w / this.xspacing));; // Using an array to store height values for the wave

​

 this.wavSet = function() {

​

  this.w = width + 16

  this.dx = (TWO_PI / this.period) * this.xspacing;

  this.yvalues = new Array(floor(this.w / this.xspacing));

​

​

 }

​

​

 this.calcWave = function() {

  // Increment theta (try different values for 

  // 'angular velocity' here)

  this.theta += this.angVel;

​

  // For every x value, calculate a y value with sine function

  this.x = this.theta;

  for (var i = 0; i < this.yvalues.length; i++) {

   this.yvalues[i] = sin(this.x) * this.amplitude;

   this.x += this.dx;

  }

 }

​

 this.renderWave = function() {

​

  noStroke();

  colorMode(HSB);

  //this.c = color(  hue(this.c)+3,  saturation(this.c) ,   brightness(this.c)   );

  fill(this.c)

  // A simple way to draw the wave with an ellipse at each location

  for (var x = 0; x < this.yvalues.length; x++) {

   ellipse((x * this.xspacing) + this.Xoff, (height / 2 + this.yvalues[x]) + this.Yoff, this.size, this.size);

   //ellipse(x * this.xspacing, height / 2 + this.yvalues[x], 16, 16);

​

  }

​

 }

​

}