controlP5 shading

johnnyUtah05

Hi, I'm new to controlP5 and am trying to figure out why my slider is only adjusting greyscale and not the color I have inputted. I assume I will have to use the color sliders for this implementation? Thanks

import controlP5.*;

ControlP5 cp5;

int sliderValue2 = 100;
color sliderValue = color(255, 0, 255);
Slider abc;

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

  cp5.addSlider("sliderValue2")
    .setPosition(width/2 - 100, 50)
    .setSize(200, 20)
    .setRange(0, 255)
    .setNumberOfTickMarks(5) 
    .setSliderMode(Slider.FLEXIBLE)
    ;

  cp5.addSlider("sliderValue")
    .setPosition(width/2 - 100, 150)
    .setSize(200, 20)
    .setRange(0, 255)
    .setNumberOfTickMarks(5) 
    .setSliderMode(Slider.FLEXIBLE)
    ;
}

void draw() {
  background(sliderValue);

  fill(sliderValue2);
  rect(0, 0, width, 100);

}

koogs

your background colour is a color but your slider is an int from 0-255. will that work?

add a line before 32,

println("DEBUG: " + sliderValue);

GoToLoop

In Processing, datatype color is merely syntactic sugar for the actual int primitive type:
https://Processing.org/reference/color_datatype.html

The initial value color(255, 0, 255) represents the color mask #FF00FF.
I presume you intend to control the green channel w/ your Slider, doesn't it?

You're also gonna need to left-shift << the 0-255 range w/ 8 bytes bits (1 byte or octet) in order to place itself at green channel: https://Processing.org/reference/leftshift.html

// forum.Processing.org/two/discussion/17285/controlp5-shading
// GoToLoop (2016-Jun-23)

import controlP5.ControlP5;
import static controlP5.Slider.FLEXIBLE;

static final short SLIDER_WIDTH = 200, SLIDER_HEIGHT = 20;
static final short TICKS = 8;

static final color SLIDER_MASK = #FF00FF;
color sliderGreen, sliderGray = 0200;

void setup() {
  size(700, 400);
  smooth(4);
  noStroke();

  final ControlP5 cp5 = new ControlP5(this);
  final int cx = width-SLIDER_WIDTH >> 1;

  cp5.addSlider("sliderGreen")
    .setPosition(cx, 150)
    .setSize(SLIDER_WIDTH, SLIDER_HEIGHT)
    .setRange(0, 0xff)
    .setNumberOfTickMarks(TICKS) 
    .setSliderMode(FLEXIBLE);

  cp5.addSlider("sliderGray")
    .setPosition(cx, 50)
    .setSize(SLIDER_WIDTH, SLIDER_HEIGHT)
    .setRange(0, 0xff)
    .setNumberOfTickMarks(TICKS) 
    .setSliderMode(FLEXIBLE);
}

void draw() {
  background(sliderGreen<<010 | SLIDER_MASK);
  fill(sliderGray);
  rect(0, 0, width, height>>2);
}

kfrajer

I believe @GoToLoop meant to say 8 bits.. not bytes <:-P

Kf

GoToLoop

Oops! Fixed now! X_X

johnnyUtah05

I appreciate the answer; however, I am having difficulty making sense of the concept of shifting in this application. I understand how the mask allows the color to be controlled; however, I am somewhat confused. I would think that since it is three integers the shifting should only be for 6 digits as opposed to 8. (head scratching). Its a cool method though and I appreciate it!

GoToLoop

Datatype color is 32 bits or 4 bytes. Besides RGB, there's the alpha too: aRGB.
Blue doesn't shift. While the alpha needs 24 bits to left. :-B

johnnyUtah05

Ok nice. Gracias. makes sense :)>-