I am currently working on a project for school and came across an issue. I am currently using Processing.exe for the project. The slider can't seem to snap. I tried following a similar question and its answer, but I still can't seem to make it work. The slider snaps to the value when I click the box where the arrow is placed, but if I press the arrow itself, it doesn't snap. It also seems that when it snaps, the slider isn't properly aligned with the guide. What am I doing wrong?
It's messy, but here is the code:
int x=75;
int lsW=17;
int lsH=50;
float bx =17;
float by = 25;
int boxSize = 50;
float xOffset = 0.0;
float yOffset = 0.0;
float sbx = 483;
float sby = 25;
int sboxSize = 50;
float sxOffset = 0.0;
float syOffset = 0.0;
void setup() {
size(550,300);
}
void mousePressed() {
if (mouseX > bx-boxSize && mouseX < bx+boxSize &&
mouseY > by-boxSize && mouseY < by+boxSize) {
if (x > 75) {
x = ((x+39 - 75) / 40) * 40 + 75;
x -= 40;
}
}
if (mouseX > sbx-sboxSize && mouseX < sbx+sboxSize &&
mouseY > sby-sboxSize && mouseY < sby+sboxSize) {
if (x < 475) {
x = ((x - 75) / 40) * 40 + 75;
x += 40;
}
}
}
void draw() {
background(50);
strokeWeight(0);
fill (200);
rect (75, 25, 400, 50);
stroke(0);
float value = map(x, 75, 475, 0, 100);
if(mousePressed) {
if (mouseX >75 && mouseX <= 475)
{x=mouseX;}
}
fill(0,255,255);
rect (x, 20, 9, 60);
fill (255);
// Left Button
fill (200);
rect (10, 25, 50, 50);
{
if (mousePressed == true) {
if (mouseX <= 50 && (mouseY >= 40 && mouseY <= 60)) {
fill(255);
if (x>100){
x-=20;
} else {
x=75;
}
} else {
fill(0);
}
}
if (mousePressed == false) {
fill (0);
}
triangle (50, 70, 50, 30, 15, 50);
}
// Right button
fill (200);
rect (490, 25, 50, 50);
{
if (mousePressed == true) {
if (mouseX >= 500 && (mouseY >= 40 && mouseY <= 60)) {
fill(255);
if (x<470){
x+=20;
}
else {
x=470;
}
} else {
fill(0);
}
}
if (mousePressed == false) {
fill (0);
}
triangle (500, 70, 500, 30, 535, 50);
}
println(x);
{
strokeWeight(2);
stroke(255, 0 , 0);
line (115, 60, 115, 85);
line (155, 60, 155, 85);
line (195, 60, 195, 85);
line (235, 60, 235, 85);
line (275, 60, 275, 85);
line (315, 60, 315, 85);
line (355, 60, 355, 85);
line (395, 60, 395, 85);
line (435, 60, 435, 85);
}
}
The following demo should be calibrated correctly; when the bar is centered over the tick marks, the values should be incremented by 10. It should show a value of zero when the left arrow is long pressed and show a value of 100 when the right arrow is long pressed. Clicks on the periphery of the arrows but still inside the bounding rect will move the bar in increments of 10. Redundant code was removed, and the tick mark code was changed to a 'for' loop for simplification.
int x = 75;
void setup() {
size(550, 300);
}
void draw() {
background(50);
// Box
stroke(0);
fill (200);
rect (75, 25, 400, 50);
float value = map(x, 75, 475, 0, 100);
if (mousePressed) {
if (mouseX >75 && mouseX <= 475) {
x = mouseX;
}
}
// Bar
fill(0, 255, 255);
rect (x-5, 20, 10, 60); // To center bar
fill (255);
// Left Arrow
fill (200);
rect (10, 25, 50, 50);
if (mousePressed == true) {
if (mouseX >= 10 && mouseX <= 60 && mouseY >= 40 && mouseY <= 60) {
fill(255);
if (x>100) {
x-=20;
} else {
x=75;
}
} else {
fill(0);
}
}
if (mousePressed == false) {
fill (0);
}
triangle (50, 70, 50, 30, 15, 50);
// Right Arrow
fill (200);
rect (490, 25, 50, 50);
if (mousePressed == true) {
if (mouseX >= 490 && mouseX <= 540 && mouseY >= 40 && mouseY <= 60) {
fill(255);
if (x<475) {
x+=20;
} else {
x=475;
}
} else {
fill(0);
}
}
if (mousePressed == false) {
fill (0);
}
triangle (500, 70, 500, 30, 535, 50);
println("x = ", x + " : " + "value = ", value);
// tick marks
strokeWeight(2);
stroke(255, 0, 0);
for (int x= 1; x < 10; x++) {
line(75 + 40*x, 60, 75 + 40*x, 85);
}
}
void mousePressed() {
if (mouseX >= 10 && mouseX <= 60 && mouseY >= 25 && mouseY <= 75) {
if (x > 75) {
x -= 40;
}
if(x < 75){
x = 75;
}
}
if (mouseX >= 490 && mouseX <= 540 && mouseY >= 25 && mouseY <= 75) {
if (x < 475) {
x += 40;
}
if(x > 475) {
x = 475;
}
}
}