Processing Forum

Screen name:
ringo177

ringo177's Profile

2 Posts

3 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Using a scrollbar to transition background color that corresponds with text of beer recipes

[1 Reply]
- 22-Apr-2013 05:00 PM
- Forum: Programming Questions
I know this has to be simple and I'm just not getting it. I was given some code to try to accomplish this but I can't seem to adjust it to my needs. Plus the code I was given transitions using a HSB colorMode and I can't figure out how to use a color array that I've specified.

color[] beerrainbow = {#FDD207, #BF7E04, #FE7612, #611203, #1D0100, #1B100D};

My goal is for a display of beer recipes that correspond with the colors that can be scrolled through using the scroll bar.

These are the recipes:

//blonde ale (#FDD207)

Blonde Ale

Malt:

6.00 lb Extra Light Dry Malt Extract

Specialty Grains:

0.50 lb CaraPils

0.50 lb Crystal 10L

Hops:

0.75 oz Willamette - 60 min

0.75 oz Willamette - 20 min

0.50 oz Willamette - 1 min

Yeast:

Addittional:

1 unit, Whirfloc - 20 min

//ipa (#BF7E04)

Historic English IPA

Malt:

9.45 lbs Gold Malt syrup - 60 min

Specialty Grains:

NA

Hops:

4 oz UK Kent Goldings - 60 min

3 oz UK Kent Goldings - 15 min

7 oz UK Fuggle - 15 min

Yeast:

Wyeast 1098 British Ale - Liquid

Addittional:

1 lbs Clear Candi Sugar - 60 min

//pale ale (#FE7612)

Pale Ale

Malt:

6 lbs Pilsen Malt Syrup

Specialty Grains:

1 lb Bairds Light Carastan

Hops:

1 oz Palisade - 60 min

0.5 oz Centennial - 10 min

0.5 oz Columbus - 10 min

0.5 oz Centennial - 0 min

0.5 oz Columbus - 0 min

Yeast:

Safale US-05 Ale Yeast - Dry

Wyeast 1056 American Ale - Liquid

Addittional:

NA

//amber ale (#611203)

American Amber Ale

Malt:

- 3.15 lbs Amber malt syrup

- 3.15 lbs Amber malt syrup late addition - 15 min

Specialty Grains:

1 lb Briess Caramel 20

Hops:

- 2 oz Cascade - 60 min

- 1 oz Cascade - 1 min

Yeast:

Wyeast 1056 American Ale - Liquid

Safale US-05 Ale Yeast - Dry

Addittional:

//porter (#1D0100)

Bourbon Barrel Porter

Malt:

2 lbs Wheat malt dried malt extract - 60 min

6.3 lbs Dark malt extract syrup late addition - 15 min

Specialty Grains:

1.0 lbs English Chocolate Malt

0.5 lbs English Dark Crystal

0.5 lbs English Black Malt

Hops:

1 oz Chinook - 60 min

0.5 oz US Goldings - 15 min

0.5 oz US Goldings - 5 min

Yeast:

Danstar Windsor Ale Yeast - Dry

Wyeast 1728 Scottish Ale Yeast - Liquid

Addittional:

2 oz US Medium Plus Oak Cubes - add to secondary

16 oz bourbon - add to secondary

//stout (#1B100D)

Brunch Stout

Malt:

6 lbs Maris Otter Malt Syrup

2 lbs Golden Light dry malt extract

1 lb D-180 Candi Syrup - add at end of boil

Specialty Grains:

1.25 lbs English Roasted Barley

1 lbs English Dark Crystal

0.4 lbs Franco-Belges Kiln Coffee Malt

0.35 lbs English Chocolate Malt

Hops:

2 oz Nugget - 60 min

Yeast:

Safale S-04 Ale Yeast - Dry

Wyeast 1028 London Ale - Liquid

Addittional:

4 oz Peace Coffee Organic French Roast - 0 min

*Crush coarsely*

And this is the code I've been given:

int wide = 1000; // Width of window

int high = 300; // Height of window

int x1 = wide * 1/10; // Starting point of slider

int x2 = wide * 9/10; // Ending point of slider

int sw = x2 - x1; // Width of slider

int y = high*2; // Y coordinate for slider

int d = 20; // Diameter for button

float sliderX = x1; // X coordinate for button

//float hue; // Hue of background color

//color c; // Color variable for background

color[] beerrainbow = {#FDD207, #BF7E04, #FE7612, #611203, #1D0100, #1B100D};

void setup() {

size(1000, 650); // Set size of window

smooth(); // Use anti-aliasing

// colorMode(HSB, 360, 100, 100); // Use HSB color system for background color

}

void draw() {

// hue = map(sliderX, x1, x2, 0, 360); // Maps hue (0-360) to slider position

background(beerrainbow[0]); // Uses hue for background color

// Line for slider)

stroke(255); // White line

strokeCap(SQUARE); // Square ends for slider line

strokeWeight(5); // 5 pixels thick

line(x1, y, x2, y); // Positions slider using variables from top

// Slider button

noStroke(); // Turns off outline

fill(180); // Light gray for button

// Checks if mouse is above button and clicked

if ((dist(mouseX, mouseY, sliderX, y) < d) && mousePressed) {

sliderX = mouseX; // If so, button follows mouse on X

sliderX = constrain(sliderX, x1, x2); // But don't go off ends

}

ellipse(sliderX, y, d, d); // Draws the button

}

Any advice or help is greatly appreciated

using a scrollbar to transition from one image to another

[4 Replies]
- 21-Apr-2013 11:41 PM
- Forum: Programming Questions
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

«Prev
Next »