I would like to know how to create 2 sliders, one for the thickness of stroke and the other one for opacity. I am planning to create 5 types of brushstrokes, I hope to make the program, so every time I select a brushstroke gives me the option to change the thickness and opacity on the side while drawing.
if this is possible to create let me know how!!
Thank you,
Hello,
There are lots of resources (references, tutorials, examples, etc.) here:
One example:
One library I am aware of:
There may be others…
:)
Alright Thank you, I will definitely look into it… well I don’t know anything about the library so hopefully it isn’t extremely hard.
When I first started programming, I made a color creator program with sliders
int w = 600;
int h = 600;
float r = 125; //red part
float g = 50; //green part
float b = 5; //blue part
float range = 500; //size of slider
float yrange = 25;
float min = 0;
float max = 255;
float xR = w / 2; //where is red slider
float xG = w / 2; //where is green slider
float xB = w / 2; //where is blue slider
float yR = w/3 * 2; //where is red slider
float yG = w/3 * 2.3; //where is green slider
float yB = w/3 * 2.6; //where is blue slider
int kw = 15; //kazauc width
int kh = 45; //kazauc height
void setup() {
size(600,600); //width = w, height = h;
rectMode(CENTER);
textAlign(CENTER);
}
void draw() {
if(r < min) { r = min; } else if(r > max) { r = max; }
if(g < min) { g = min; } else if(g > max) { g = max; }
if(b < min) { b = min; } else if(b > max) { b = max; }
background(r,g,b);
noStroke();
fill(100);
rect(width/2, h/3 * 2.5,width,w/5*2.5);
strokeWeight(8);
stroke(50);
noFill();
rect(w/2,h/2,w,h,8);
strokeWeight(4);
stroke(150);
fill(r,0,0);
rect(xR,yR,range,yrange,8);
fill(0,g,0);
rect(xG,yG,range,yrange,8);
fill(0,0,b);
rect(xB,yB,range,yrange,8);
fill(255);
float rX = map(r,min,max,xR - range/2, xR + range/2);
float gX = map(g,min,max,xG - range/2, xG + range/2);
float bX = map(b,min,max,xB - range/2, xB + range/2);
rect(rX,yR,kw,kh,6);
rect(gX,yG,kw,kh,6);
rect(bX,yB,kw,kh,6);
if(mousePressed) {
if(mouseX > xR - range/2 && mouseX < xR + range/2) { if(mouseY > yR - yrange/2 && mouseY < yR + yrange/2) { r = map(mouseX,w/2 - range/2,550,min,max); }}
if(mouseX > xG - range/2 && mouseX < xG + range/2) { if(mouseY > yG - yrange/2 && mouseY < yG + yrange/2) { g = map(mouseX,w/2 - range/2,550,min,max); }}
if(mouseX > xB - range/2 && mouseX < xB + range/2) { if(mouseY > yB - yrange/2 && mouseY < yB + yrange/2) { b = map(mouseX,w/2 - range/2,550,min,max); }}
}
textSize(30);
text("R = " + floor(r), 90, height - 25);
text("G = " + floor(g), w/2, height - 25);
text("B = " + floor(b), w - 90, height - 25);
println("[mouse X = " + mouseX + "] [mouse Y = " + mouseY +"]");
}
Alright Thanks, this will definitely help.
Regards,
I made a slider class. If you want here it is!
int sel = -1;
ArrayList<Slider> sliders = new ArrayList<Slider>();
void setup() {
size(600, 600);
rectMode(3);
//float id_, float sx_, float sy_, float w_, float h_, float w2_, float h2_, float v_, float min_, float max_, color start_, color end_, color selector_, color hover_, color pressed_, float round_, float round2_) {
sliders.add(new Slider(0, 300, 500, 500, 50, 20, 100, 50, 0, 255, color(255, 0, 0), color(0, 0, 255), color(255, 0, 0), color(0, 255, 0), color(0, 0, 255),10,5));
sliders.add(new Slider(1, 300,300,100,20,10,50,0,0,1,color(255,255,0),color(0,255,255),color(255),color(255),color(255),100,100) );
}
void draw() {
background(0);
for (int i = 0; i < sliders.size(); i++) sliders.get(i).display();
updateSliders();
}
void updateSliders() {
if (mousePressed) for (int i = 0; i < sliders.size(); i++) {
Slider temp = sliders.get(i);
if (sel == i) temp.v = constrain(map(mouseX, temp.sx-temp.w/2, temp.sx + temp.w/2, 0, 100), 0, 100);
sliders.set(i, temp);
}
}
void mousePressed() {
for (int i = 0; i < sliders.size(); i++) {
Slider temp = sliders.get(i);
if (touching(map(temp.v, 0, 100, temp.sx-temp.w/2, temp.sx+temp.w/2), temp.sy, temp.w2, temp.h2, mouseX, mouseY)) {
sel = i;
temp.v = constrain(map(mouseX, temp.sx-temp.w/2, temp.sx + temp.w/2, 0, 100), 0, 100);
}
sliders.set(i, temp);
}
if(sel == -1) {
sliders.add(new Slider(sliders.size(),mouseX,mouseY,random(50,300),random(15,50),random(100,10),random(20,50),random(100),0,100,rndClr(),rndClr(),rndClr(),rndClr(),rndClr(),random(0,15),random(0,5)));
}
}
void mouseReleased() {
sel = -1;
}
color rndClr() {
return(color(random(255),random(255),random(255)));
}
boolean touching(float x_, float y_, float w_, float h_, float px_, float py_) { //working only for rectMode(CENTER)
return(px_ > x_ - w_/2 && px_ < x_ + w_/2 && py_ > y_ - h_/2 && py_ < y_ + h_/2);
}
class Slider {
float id, sx, sy, w, h, w2, h2, v, min, max, round, round2;
color start, end, selector, hover, pressed;
boolean hoverOver = false;
Slider(float id_, float sx_, float sy_, float w_, float h_, float w2_, float h2_, float v_, float min_, float max_, color start_, color end_, color selector_, color hover_, color pressed_, float round_, float round2_) {
id = id_;
sx = sx_;
sy = sy_;
w = w_;
h = h_;
h2 = h2_;
w2 = w2_;
v = v_;
min = min_;
max = max_;
start = start_;
end = end_;
selector = selector_;
hover = hover_;
pressed = pressed_;
round = round_;
round2 = round2_;
}
void display() {
stroke(255);
float x_ = map(v, 0, 100, sx-w/2, sx+w/2);
hoverOver = touching(x_, sy, w2, h2, mouseX, mouseY);
fill( lerpColor(start, end, v/100));
rect(sx, sy, w, h,round);
fill( (((sel == id)? pressed : (((hoverOver)? hover : selector )))));
rect(x_, sy, w2, h2,round2);
}
float getValue() {
return(map(v, 0, 100, min, max));
}
}
Can you give me and brief understanding of that code and ideas on how I can tackle it to match my situation, this is really new to me. Can you tell me where I should begin Thanks.
Regards,
