​

let DELAY = 30;

​

let rainbow = [];

let bgColour;

let decimal = 0;

let input, slider, btn;

let btn_pressed = false;

let dir;

​

function setup() {

  createCanvas(800, 400);

  textAlign(CENTER,TOP)

  textSize(60)

  let colours = [color(255,0,0), color(255,127,0),color(255,255,0),color(0,255,0),color(0,0,255),color(75,0,130),color(148,0,211)

                 ]

  for(let i=6; i>=0; i--){

      rainbow.push(new Arch(colours[6-i], i+1));  

  }

  slider = createSlider(0,127,decimal)

  slider.size(128*2);

  slider.changed(sliderChanged)

  input = createInput(decimal)

  input.changed(inputChanged)

  input.size(40);

  btn = createButton("Play");

  btn.mousePressed(buttonPressed);

}//setup

​

​

function buttonPressed(){

  btn_pressed = !btn_pressed;

  if(btn_pressed){

   btn.elt.innerText = "Stop";

  }

    else{

   btn.elt.innerText = "Play";

  }

  dir = 1;

}

​

function inputChanged(){

 //console.log("Input changed.");

  updateDecimal(input.value())

  decimalToRainbow(decimal);

}

​

function sliderChanged(){

  //console.log("Slider changed.");

  updateDecimal(slider.value())

  decimalToRainbow(decimal);

}

​

function decimalToRainbow(dec){

  for(let arch of rainbow){

    arch.on = (dec % 2 == 1)

    dec = (dec - dec%2) / 2;

  }

}

​

function updateDecimal(dec){

  decimal = constrain(dec, 0, 127);

  input.value(decimal);

  slider.value(decimal); 

}

​

function rainbowToDecimal(){

  let i = 1;

  let dec = 0;

  for(let arch of rainbow){

    if(arch.on){

     dec += i; 

    }

    i *= 2;

  } 

  return dec

}

​

​

​

​

function mousePressed(){

  if(mouseX < 0 || mouseX > width || mouseY < 0 || mouseY > height){

    return;

  }

  for(let arch of rainbow){

    if(arch.isPressed(mouseX,mouseY)){

      arch.on = !arch.on;

  updateDecimal(rainbowToDecimal());

      return;

    }

  } 

}//mPressed

​

​

​

function draw() {

  if(btn_pressed & frameCount % DELAY == 0){

    if(decimal == 127){

     dir = -1

    }

    else if(decimal == 0){

      dir = 1

    }

​

    updateDecimal(decimal + dir)

      decimalToRainbow(decimal);

  }

​

    let r = 0

  let g = 0

  let b = 0

  let count = 0

​

  for(let arch of rainbow){

    if(arch.on){

      count += 1;

      r += red(arch.colour);

      g += green(arch.colour);

      b += blue(arch.colour)

    }

  }

  if(count!=0){

  r /= count;

  g /= count;

  b /= count;

  }

  background(r,g,b);

    for(let arch of rainbow){

    arch.show();

  }

  fill(r,g,b)

  ellipse(width/2, height, 80)

  fill(0)

  text(str(decimal), width/2, 0)

}