InTense:Color

//Resources:
//http://printingcode.runemadsen.com/examples/color/hsv_circle/index.html
//http://printingcode.runemadsen.com/examples/form/sincos/
//http://printingcode.runemadsen.com/lecture-color/

var r = new Rune({
  container: "#canvas",
  width: 600,
  height: 800,
  debug: false
});

//background rect
var width = r.width;
var height = r.height;
var y = 0;
var rectHeight = 20; 
var numRects = 20;
var yExpo = 1.5; //exponential change of rectHeight
var randomColor = Rune.random(0,360);
var wheel = 360;
var hue1 = wheel/12;
var hue2 = wheel/6;
var hue3 = wheel/4;
var hue4 = wheel/3;
var hue5 = (wheel/12)*5;
var hue6 = wheel/2;
var hue7 = (wheel/12)*7;
var hue8 = (wheel/12)*8;
var hue9 = (wheel/12)*9;
var hue10 = (wheel/12)*10;
var hue11 = (wheel/12)*11;
var hue12 = wheel;
//console.log (hue9);
// for keeping color analogous 
var analog = 3.5; //color change



//BACKGROUND & COLOR
console.log(randomColor);

if (randomColor <= hue1) {
  for (var i=0; i<numRects; i++) {
    r.rect (0, y, width, rectHeight)  
    .fill ('hsv', ((i*analog)+randomColor), 100, 100)
    .stroke (false)
     y= rectHeight;
    rectHeight = (rectHeight*yExpo)
} 
}else if (randomColor> hue1 && randomColor <= hue2) {
   for (var i=0; i<numRects; i++) {
    r.rect (0, y, width, rectHeight)  
    .fill ('hsv', ((i*analog)+randomColor), 100, 100)
    .stroke (false)
     y= rectHeight;
    rectHeight = (rectHeight*yExpo)
} 
  }else if (randomColor> hue2 && randomColor <= hue3) {
   for (var i=0; i<numRects; i++) {
    r.rect (0, y, width, rectHeight)  
    .fill ('hsv', ((i*analog)+randomColor), 100, 100)
    .stroke (false)
     y= rectHeight;
    rectHeight = (rectHeight*yExpo)
} 
  
}else if (randomColor> hue3 && randomColor <= hue4) {
   for (var i=0; i<numRects; i++) {
    r.rect (0, y, width, rectHeight)  
    .fill ('hsv', ((i*analog)+randomColor), 100, 100)
    .stroke (false)
     y= rectHeight;
    rectHeight = (rectHeight*yExpo)
} 
  }else if (randomColor> hue4 && randomColor <= hue5) {
   for (var i=0; i<numRects; i++) {
    r.rect (0, y, width, rectHeight)  
    .fill ('hsv', ((i*analog)+randomColor), 100, 100)
    .stroke (false)
     y= rectHeight;
    rectHeight = (rectHeight*yExpo)
} 
}else if (randomColor> hue5 && randomColor <= hue6) {
   for (var i=0; i<numRects; i++) {
    r.rect (0, y, width, rectHeight)  
    .fill ('hsv', ((i*analog)+randomColor), 100, 100)
    .stroke (false)
     y= rectHeight;
    rectHeight = (rectHeight*yExpo)
} 

  
}else if (randomColor> hue6 && randomColor <= hue7) {
   for (var i=0; i<numRects; i++) {
    r.rect (0, y, width, rectHeight)  
    .fill ('hsv', ((i*analog)+randomColor), 100, 100)
    .stroke (false)
     y= rectHeight;
    rectHeight = (rectHeight*yExpo)
} 
  }else if (randomColor> hue7 && randomColor <= hue8) {
   for (var i=0; i<numRects; i++) {
    r.rect (0, y, width, rectHeight)  
    .fill ('hsv', ((i*analog)+randomColor), 100, 100)
    .stroke (false)
     y= rectHeight;
    rectHeight = (rectHeight*yExpo)
} 
  }else if (randomColor>hue8 && randomColor <= hue9) {
   for (var i=0; i<numRects; i++) {
    r.rect (0, y, width, rectHeight)  
    .fill ('hsv', ((i*analog)+randomColor), 100, 100)
    .stroke (false)
     y= rectHeight;
    rectHeight = (rectHeight*yExpo)
} 
  }else if (randomColor> hue9 && randomColor <= hue10) {
   for (var i=0; i<numRects; i++) {
    r.rect (0, y, width, rectHeight)  
    .fill ('hsv', ((i*analog)+randomColor), 100, 100)
    .stroke (false)
     y= rectHeight;
    rectHeight = (rectHeight*yExpo)
} 
  }else if (randomColor> hue10 && randomColor <= hue11) {
   for (var i=0; i<numRects; i++) {
    r.rect (0, y, width, rectHeight)  
    .fill ('hsv', ((i*analog)+randomColor), 100, 100)
    .stroke (false)
     y= rectHeight;
    rectHeight = (rectHeight*yExpo)
} 
  
  }else if (randomColor>hue11 && randomColor <= hue12) {
   for (var i=0; i<numRects; i++) {
    r.rect (0, y, width, rectHeight)  
    .fill ('hsv', ((i*analog)+randomColor), 100, 100)
    .stroke (false)
     y= rectHeight;
    rectHeight = (rectHeight*yExpo)
} 
  

}


//top part
var curtainGroup = r.group(width/2, 0);

r.triangle (0,0, width, 0, width, height/.80, curtainGroup)
.fill (0,0,0)
.stroke (false)

r.triangle (0,0, width*(-1), 0, width*(-1), height/.80, curtainGroup)
.fill (0,0,0)
.stroke(false)





//////////MICROPHONE////////////////
var micGroup = r.group (width/2, height*.535);


//bulb
var radius = width/10; //
var numCirc0 = 30;
var numCirc = 24;
var numCirc2 = 20;
var numCirc3 = 12;
var numCirc4 = 6;
var angle0 = 360/numCirc0;
var angle = 360/numCirc; //18
var angle2 = 360/numCirc2;
var angle3 = 360/numCirc3;
var angle4 = 360/numCirc4;

//grip
 var x = Math.cos (Rune.radians(180)* radius);
 var y = Math.sin (Rune.radians(180)* radius);
r.path (x-(radius+30),y, micGroup)
.lineTo (x-(2.5*radius),y+2.5*radius)
.curveTo (x-(.27*width),y+3.6*radius,x-(1.5*radius),y+3.75*radius )
.lineTo (1.75*radius,30+radius)
.curveTo (x-5,1.5*radius , x,y)
.fill (0,0,0)

//stand
//r.rect (-2*(radius),radius*1.5, radius/4, height*.33, micGroup)
r.rect (-2*(radius),radius*2, radius/4, height*.33, micGroup)

.fill (0,0,0)


for (var h = 0; h<numCirc0; h++) {
  var curAngle = h * angle0;
  var x = Math.cos (Rune.radians(curAngle))* (radius+(1.25*angle0));
 var y = Math.sin (Rune.radians(curAngle))* (radius+(1.255* angle0));
  
  r.circle (x, y, 6, micGroup)
 .fill(0,0,0)
 .strokeWidth(1.5)
 .stroke('hsv', randomColor)

}

for (var j =0; j<numCirc; j++) {
 var curAngle = j * angle;
 var x = Math.cos (Rune.radians(curAngle))* radius;
 var y = Math.sin (Rune.radians(curAngle))* radius;

 r.circle(x,y,6, micGroup)
 .fill(0,0,0)
 .strokeWidth(1.5)
 .stroke('hsv', randomColor)
 

}


for (var k = 0; k<numCirc2; k++) {
  var curAngle = k * angle2;
  var x = Math.cos (Rune.radians(curAngle))* (radius-angle);
 var y = Math.sin (Rune.radians(curAngle))* (radius-angle);
  
  r.circle (x, y, 6, micGroup)
 .fill(0,0,0)
 .strokeWidth(1.5)
 .stroke('hsv', randomColor)

}

for (var l = 0; l<numCirc3; l++) {
  var curAngle = l * angle3;
  var x = Math.cos (Rune.radians(curAngle))* (radius-(2*angle));
 var y = Math.sin (Rune.radians(curAngle))* (radius-(2*angle));
  
  r.circle (x, y, 6, micGroup)
 .fill(0,0,0)
 .strokeWidth(1.5)
 .stroke('hsv', randomColor)

}

for (var m = 0; m<numCirc4; m++) {
  var curAngle = m * angle4;
  var x = Math.cos (Rune.radians(curAngle))* (radius-(3*angle));
 var y = Math.sin (Rune.radians(curAngle))* (radius-(3*angle));
  
  r.circle (x, y, 6, micGroup)
 .fill(0,0,0)
 .strokeWidth(1.5)
 .stroke('hsv', randomColor)

}

r.circle (0,0, 6, micGroup)
  .fill(0,0,0)
 .strokeWidth(1.5)
 .stroke('hsv', randomColor)


r.draw();