Let me preface this with the fact that I have very little experience with coding or open processing. So thanks for your patience.
I'm trying to create a list of six beer homebrewing recipes. I would like to use a scrollbar to transition from a lighter color of beer to a darker color (lager to stout if you're a beer drinker). I would also like to include the recipe for the corresponding beers and colors. I have an array created with the colors I've chosen.
int[] beerrainbow = {#FDD207, #BF7E04, #FE7612, #611203, #1D0100, #1B100D};
And I'm pretty sure I can use the scrollbar class that I've found:
HScrollbar hs1, hs2; // Two scrollbars
PImage img1, img2; // Two images to load
void setup() {
size(640, 360);
noStroke();
hs1 = new HScrollbar(0, height/2-8, width, 16, 16);
hs2 = new HScrollbar(0, height/2+8, width, 16, 16);
// Load images
img1 = loadImage("seedTop.jpg");
img2 = loadImage("seedBottom.jpg");
}
void draw() {
background(255);
// Get the position of the img1 scrollbar
// and convert to a value to display the img1 image
float img1Pos = hs1.getPos()-width/2;
fill(255);
image(img1, width/2-img1.width/2 + img1Pos*1.5, 0);
// Get the position of the img2 scrollbar
// and convert to a value to display the img2 image
float img2Pos = hs2.getPos()-width/2;
fill(255);
image(img2, width/2-img2.width/2 + img2Pos*1.5, height/2);
hs1.update();
hs2.update();
hs1.display();
hs2.display();
stroke(0);
line(0, height/2, width, height/2);
}
class HScrollbar {
int swidth, sheight; // width and height of bar
float xpos, ypos; // x and y position of bar
float spos, newspos; // x position of slider
float sposMin, sposMax; // max and min values of slider
int loose; // how loose/heavy
boolean over; // is the mouse over the slider?
boolean locked;
float ratio;
HScrollbar (float xp, float yp, int sw, int sh, int l) {
swidth = sw;
sheight = sh;
int widthtoheight = sw - sh;
ratio = (float)sw / (float)widthtoheight;
xpos = xp;
ypos = yp-sheight/2;
spos = xpos + swidth/2 - sheight/2;
newspos = spos;
sposMin = xpos;
sposMax = xpos + swidth - sheight;
loose = l;
}
void update() {
if (overEvent()) {
over = true;
} else {
over = false;
}
if (mousePressed && over) {
locked = true;
}
if (!mousePressed) {
locked = false;
}
if (locked) {
newspos = constrain(mouseX-sheight/2, sposMin, sposMax);
}
if (abs(newspos - spos) > 1) {
spos = spos + (newspos-spos)/loose;
}
}
float constrain(float val, float minv, float maxv) {
return min(max(val, minv), maxv);
}
boolean overEvent() {
if (mouseX > xpos && mouseX < xpos+swidth &&
mouseY > ypos && mouseY < ypos+sheight) {
return true;
} else {
return false;
}
}
void display() {
noStroke();
fill(204);
rect(xpos, ypos, swidth, sheight);
if (over || locked) {
fill(0, 0, 0);
} else {
fill(102, 102, 102);
}
rect(spos, ypos, sheight, sheight);
}
float getPos() {
// Convert spos to be values between
// 0 and the total width of the scrollbar
return spos * ratio;
}
}
Now I'm kind of at a loss as to where to go from here. Can I include the text of the recipe with the background color or do I have to create an image to upload?
If anyone can help me I'd very much appreciate it.
Thanks
1
