<div id = "sliderPanel"></div>
  <div id = "sliderPanelToo"></div>
  <div id = labels>

<p>color of the orbiting circles</p>
<p>path of the orbiting circles</p>
<p>path of the pink oval</p>
<p>color of the rectangle</p>
<br>
<br>
<br>
<h1 style = "text-align: center"> Coming Soon!</h1>


  </div>

html, body {
  margin: 0;
  padding: 0;
}

#sliderPanel{
	position:absolute;
top: 550px;
	left:0px;
	width: 1000px;
  height:300px;
	
}

#sliderPanelToo{
	position:absolute;
top: 1000px;
	left:0px;
	width: 600px;
  height:300px;
	
}

#labels{
	position:absolute;
top: 850px;
background-color: rgba(14, 40, 63, .8);
width:1000px;

}


#labels p {

	margin-right: 40px;

	
float:right;
font-family: 'Anton', sans-serif;
font-size: 13px;
color: #F9DA78;
text-transform: uppercase;

}

//interface js setup

 panel = new Interface.Panel({ 
  // useRelativeSizesAndPositions:true

 container:document.querySelector("#sliderPanel") 
   }) // panel fills page by default, alternatively you can specify boundaries


 hbox = new Interface.HBox({ 
  bounds:[0,0,1,1]
})

 b = new Interface.Crossfader();
 // c = new Interface.Button();
 d = new Interface.Slider();

b.background = '#F9DA78';
b.fill = '#891512';
b.stroke = 'rgba(12, 56, 95, 1)';


  //and the second
//darkBase.background('rgba(19, 16, 95, .1)');
d.background = '#F9DA78';
// d.background = '#E31F1B';
d.fill = '#891512';
// d.fill = '#891512';
d.stroke = 'rgba(12, 56, 95, 1)';

//rotation gestures
var k1 = new Interface.Knob({ 
  bounds:[.05,0,.25],
  value:.25,
  usesRotation:true,
  centerZero: true,
});
var k2 = new Interface.Knob({ 
  bounds:[.35,0,.25],
  value:.75,
  usesRotation:true,
  centerZero: false,
});
var m = new Interface.Label({ 
  bounds:[.7,.2,.25,.5],
  value:"uses rotation gesture",
  vAlign:'bottom',
});



k1.background = 'rgba(12, 56, 95, .8)';
k1.fill = '#891512';
k1.stroke = 'rgba(12, 56, 95, .8)';

k2.background = 'rgba(12, 56, 95, .8)';
k2.fill = '#891512';
k2.stroke = 'rgba(12, 56, 95, .8)';

 panelToo = new Interface.Panel({ 
  // useRelativeSizesAndPositions:true

 container:document.querySelector("#sliderPanelToo") 
   }) // panel fills page by default, alternatively you can specify boundaries


  
var xy = new Interface.XY({
  childWidth: 25,
  numChildren: 6,
  background:"#111",
  fill: "rgba(127,127,127,.2)",
  bounds:[.3,0,.8,1],
  oninit: function() { this.rainbow(),
console.log(xy.children[0].x)
   },  
});
panel.add( hbox );

// xy.background = "#0C385F";
xy.background = '#06375F';
xy.fill = '#F9DA78';
xy.stroke = '#06375F';

hbox.add(b,d, k1, k2 )
panelToo.add(xy);
panel.background = '#FFE47D';  
// panelToo.background = '#FFE47D';  


//creating variables for the graphic blocks
var lightBase;
var darkBase;

//set up for physics environment
var constellations = [];

var movers = [];

// the physics environment determinating seeds
var startOffset=0;
var xpos = 30;
var dir = 1;
var speed = 2;

//the trigonometry pattern making magic stuff
var angle= 0;
var angle2= 0.1;
var rotater = 0;
var avel = 0.1;
var aacc = 0.001;
var rotaterToo = 0;
var rotaterToo = 0;


var my_rect;

function setup() { 
   colorMode(HSB);
createCanvas(1000, 550);
//create slider which we will use later to let the user take control
   //background('rgba(12, 56, 95, 1)');

  //create the first graphic layer
lightBase = createGraphics (800,300)

  //and the second. Initially at the same place to see how blending is. handled by p5
darkBase = createGraphics (800,300)
  
  //set the transparent bg of first graphic layer
lightBase.background('rgba(12, 56, 95, .1)');
  //and the second
darkBase.background('rgba(19, 16, 95, .1)');





    fill('#EF6E73');

  //creating the particles
  for (var i = 0; i < 2; i++) {
    // fill('rgba(239, 110, 115, 1)');
   
    movers[i] = new Mover(random(0.1, 5), 0, 0);
    // constellations[i] = new Constellation(random(0.1, 5), 0, 0);
  }

} 

function draw() { 
   // background('rgba(227, 31, 27, .009)');
   // background('rgba(29, 29, 29, .01)');
   // background('rgba(137, 21, 18, .001)');
  background('rgba(18, 39, 66,.1)');
  var val = d.value*100;
    //graphics
      for(var i =0; i<9; i++){
        
  // draw the graphic to the canvas as an image(?) at location 0,0
    // image(lightBase, 0, 5*(i*TWO_PI))

  // and draw the secosnd-slightly off
    // image(darkBase, 0, i+5*TWO_PI)
  }

  // console.log(crossVal);
circleMaker()
ballMaker();
rectangleMaker()

}

function ballMaker (){

    //this is the arcing balls brush

   for (var i = 0; i < movers.length; i++) {
     
    var wind = createVector(0.01, 0);
    var gravity = createVector(0, 0.1);
    movers[i].applyForce(wind);
    movers[i].applyForce(gravity);
    movers[i].update();
    movers[i].display();
    movers[i].checkEdges();
  }
}

function circleMaker (){
    var slideVal = d.value*100;

   translate(width/2, height/2)

  
   // background('rgba(18, 39, 66,.1)');
   // background('rgba(204, 31, 51,.005)');
  
      // for(var i =0; i<9; i++){
        
  //draw the graphic to the canvas as an image(?) at location 0,0
    // image(lightBase, 0, 5*(i*TWO_PI))

  //and draw the second-slightly off
    // image(darkBase, 0, i+5*TWO_PI)
  // }
  //the rectangle brush
    
  fill('rgba(252, 248, 248, .0001)')
  

  
  // stroke('rgba(12, 248, 248, 1)');
  // stroke(slideVal, 40, 120, .8);
  stroke(14, 40, 120, .8);


 ellipseMode(CORNER);  // Set ellipseMode to CORNER seems default?
      // ellipseMode(CORNERS);  // Set ellipseMode to CORNERS-seems smaller
  //rotates the circle by a certain amount each time which is what makes it looping I think? 
  rotate(rotater)
    
// ellipse(50, 50, 30, 30);  // Draw ellipse-rotated each canvas draw?

  //userInteraction!  #1 askew the ellipse-changing the height of the ellipse being drawn to change the shape
  //changing the height property by setting it also to the rotator changes the oval shape lightly askewed and bebautiful
  
  // ellipse(150, 150, 30, rotater*PI);  // Draw gray ellipse using CENT
  
  //userInteraction!  #2 WARP the ellipse-changing the width of the ellipse being drawn to change the shape (roatoer *30 is too much)
  
  // ellipse(150, 150, TWO_PI*rotater, 30);  // Draw gray ellipse using CENT
  
  
  ellipse(slideVal, 150, 30, 60);  // Draw gray ellipse using CENT
  // ellipse(150, 150, 30, 60);  // Draw gray ellipse using CENT
  // ellipse(mouseX, 150, 30, 60);  // Draw gray ellipse using CENT
    rotater+= 0.01;
  avel += aacc;
  }



  

  //drawing the fft?
  // beginShape();
  //  //draw out the fft spectrum as visualization
  //  for (i = 0; i<spectrum.length; i++) {
  //    //maping spectrum i from a value between 0 and 225 to a value between height and 0
  //    //where is the height value coming from
  //   vertex(i, map(spectrum[i], 0, 255, height, 0) );
  //  }
  //  endShape();

  function rectangleMaker (){

  var crossVal = b.value*100;
   // translate(width/2, height/2)
   // background('rgba(14, 31, 51,.05)');
   // background('rgba(239, 110, 115, .1)');
  

//one gear that effects the fill and stroke opacity and maybe color? and what else all at once?
    
  //the rectangle  PI SIN brush
      fill('rgba(252, 248, 248, .0001)')
  

  
  // stroke('rgba(12, 248, 248, .1)');
  stroke(crossVal, 40, 120, .8);
  //fill('rgba(252, 248, 248, .0001)')
  
  
  //stroke(crossVal, 100, 100, 1);
  // strokeWeight(1)
  rectMode(CENTER);
   rotate(rotaterToo)
    for(var i =0; i<9; i++){
  // var my_rect =
   rect(0,50,130,80)
 // console.log(my_rect.fill);
    
  // aacc = slider.value();
  
  rotaterToo+= 0.01;
    }
  avel += aacc;
  
  
  }
  

  function circleMakerToo(){
  //This is for the sin wave ball and magic tails style following point

//Option 1- using the map function to work with cos/sin
  // var x = map(sin(angle), -1, 1, 0, 400)
  // var y = map(cos(angle), -1, 1, 0, 400)
  
  // for(var x = 0; x< width; x++){
  //Option 2- using map function to set radius
  var r = map(sin(angle*10), -1, 1, 50, 150);
    var x = (sin(angle)*r);
    var y = (cos(angle)*r)+300;
       // rotate(rotaterToo)
    // var y = map(sin(x), -1, 1, 150, 250);
  // var y = map(cos(angle), -1, 1, 0, 400)
  
  //perlin noise gives the physics of motion some 'tension'
  // var x = map(noise(angle), -1, 1, 0, 400);
  // var x2 = map(noise(angle2), -1, 1, 0, 400);
  ellipse(0, 55, 20, 20);
//   stroke('rgba(239, 110, 115, 1)');
//   strokeWeight(1)
//     fill('rgba(112, 0, 112, .05)');
  ellipse(x, y, 20, 20);

  // point(x*PI, y*PI)
//   angle += 0.005;
  // rotaterToo+= 0.1;
//   startOffset += 0.01;
  //trying to put it all in a for loop to see what it can do

}

// The Nature of Code
// Daniel Shiffman
// http://natureofcode.com
var f;
var Mover = function(m, x, y) {
  this.mass = m;
  this.position = createVector(x, y);
  this.velocity = createVector(0, 0);
  this.acceleration = createVector(0, 0);

  this.applyForce = function(force) {
    var f = p5.Vector.div(force, this.mass);
    this.acceleration.add(f);
  };
    
  this.update = function() {
    this.velocity.add(this.acceleration);
    this.position.add(this.velocity);
    this.acceleration.mult(0);
  };

  this.display = function() {

     crazyValue = k1.value*100
     crazyValueToo = k2.value *150
        console.log(crazyValue)
        console.log(crazyValueToo)
   // console.log(k1.value)
    
    //i am going to try and use one of the random generators we made in week 1 to create radnom changes in color of the circle fill or stroke
    // console.log(this.velocity);
      var h = noise(startOffset)*60;
    stroke('rgba(12, h*HALF_PI, 95, .9)');
    strokeWeight(1);
    // fill(255, 127);
     // fill('#EF6E73');

     // fill('rgba(249, 218, 120, .1)');
     // fill(' rgba(255, 36, 31, 1)');
     // fill(255, crazyValueToo,   55);
     fill(crazyValueToo, 243, 174, .1);
 startOffset += 0.01;
    // ellipse(this.position.x, this.position.y, this.mass*6, this.mass*6);
    ellipse(crazyValue, crazyValue/PI, this.mass*6, this.mass*6);
  };

  this.checkEdges = function() {
    if (this.position.x > width) {
      this.position.x = width;
      this.velocity.x *= -1;
    } else if (this.position.x < 0) {
      this.velocity.x *= -1;
      this.position.x = 0;
    }
    if (this.position.y > height) {
      this.velocity.y *= -1;
      this.position.y = height;
    }
  };

};