How to make the ellipse change color apposed to black and white

lucylee

At the moment when using the slider the ellipse goes from black - white, however I'd like it to go from the colors in my code (maroon - green) any help would be greatly appreciated!

import controlP5.*; ControlP5 cp5;

color maroon = color(125, 18, 38); color purple = color(153, 27, 79); color red = color(237,32,36); color orange = color(245,126,32); color yellow = color(237,233,55); color green = color(197,218,64);

public int sliderValue = 100;

void setup() { size(700, 400);
background(255); cp5 = new ControlP5(this);

cp5.addSlider("sliderValue") .setRange(0, 300) .setPosition(40, 40) .setSize(200, 29) ;

}

void draw() { ellipse(350,200,200,200); fill(sliderValue); noStroke(); smooth();

}

_vk

Please format the code properly

Anyway, I thought in a way of doing so. Don't know if its a clever one, but works...

import controlP5.*; 
ControlP5 cp5;

color[] palete;
int index = 0;

public int sliderValue = 100;


void setup() { 
  size(700, 400);
  background(255); 
  palete = new color[6];

  palete[0] = color(125, 18, 38); 
  palete[1] = color(153, 27, 79); 
  palete[2] = color(237, 32, 36); 
  palete[3] = color(245, 126, 32); 
  palete[4] = color(237, 233, 55); 
  palete[5] = color(197, 218, 64);

  cp5 = new ControlP5(this);

  cp5.addSlider("sliderValue") .setRange(0, (palete.length -1) * 100) .setPosition(40, 40) .setSize(width-50, 29) ;
  noStroke(); 
  smooth();
}

void draw() { 
  background (255);

  // see the colors...
  for (int i = 0; i < palete.length;i++) {
    fill(palete[i]);
    int x = (i+1)* 40;
    ellipse( x, 10, 20, 20);
  }

  // uncomment those to see from and to colors
  fill(palete[index]);
  //ellipse(225, 200, 50, 50);

  fill(palete[(index+1)%6]);
  //ellipse(475, 200, 50, 50);


  index = getIndexFromSliderValue(sliderValue);
  fill(lerpedColor(sliderValue)); 

  ellipse(350, 200, 200, 200);
}



// advance trough palete at right moment based on slider value
int getIndexFromSliderValue(float val) {
  for (int i = 0; i < palete.length; i++) {
    int v = i*100;
    if (val >= v && val < v+100) {
      index = i;
    }
  }
  return index;
}

color lerpedColor(float val) {
  color from = color(0, 0);
  color to   = color(0, 0);


  // if last, hard set from and to
  if (index == palete.length-1) {
    from = palete[palete.length-2];
    to   =  palete[palete.length-1];
  }
  else {
    // or just pick this and next color
    from = palete[index];
    to   = palete[index+1];
  }
  // hack to keep last color lerp amt 1 (hummm :- ( ugly)
  // and get a 0. to 1. range out of slider
  float amt = val == 500? 1.0:(val%100)/100;

  //lerp it
  return lerpColor(from, to, amt);
}    

lucylee

Thank you, that's wonderful!