topical media & game development
#javascript-processing-example-topic-gui-scrollbar.htm / htm
<!DOCTYPE html>
<html><head>
<script src="javascript-processing-example-processing.js"></script>
<script src="javascript-processing-example-init.js"></script>
<link rel="stylesheet" href="javascript-processing-example-style.css">
</head><body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
<h2>Scrollbar</h2>
<p>Move the scrollbars left and right to change the positions of the images.</p>
<p><a href="http://processing.org/learning/topics/scrollbar.html"><b>Original Processing.org Example:</b> Scrollbar</a><br>
<script type="application/processing">
HScrollbar hs1, hs2;
PImage top, bottom; // Two image to load
int topWidth, bottomWidth; // The width of the top and bottom images
void setup()
{
size(200, 200);
noStroke();
hs1 = new HScrollbar(0, 20, width, 10, 3*5+1);
hs2 = new HScrollbar(0, height-20, width, 10, 3*5+1);
top = loadImage("seedTop.jpg");
topWidth = top.width;
bottom = loadImage("seedBottom.jpg");
bottomWidth = bottom.width;
}
void draw()
{
background(255);
// Get the position of the top scrollbar
// and convert to a value to display the top image
float topPos = hs1.getPos()-width/2;
fill(255);
image(top, width/2-topWidth/2 + topPos*2, 0);
// Get the position of the bottom scrollbar
// and convert to a value to display the bottom image
float bottomPos = hs2.getPos()-width/2;
fill(255);
image(bottom, width/2-bottomWidth/2 + bottomPos*2, height/2);
hs1.update();
hs2.update();
hs1.display();
hs2.display();
}
class HScrollbar
{
int swidth, sheight; // width and height of bar
int xpos, ypos; // x and y position of bar
float spos, newspos; // x position of slider
int sposMin, sposMax; // max and min values of slider
int loose; // how loose/heavy
boolean isOver; // is the mouse over the slider?
boolean locked;
float ratio;
HScrollbar (int xp, int 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(over()) {
isOver = true;
} else {
isOver = false;
}
if(mousePressed && isOver) {
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;
}
}
int constrain(int val, int minv, int maxv) {
return min(max(val, minv), maxv);
}
boolean over() {
if(mouseX > xpos && mouseX < xpos+swidth &&
mouseY > ypos && mouseY < ypos+sheight) {
return true;
} else {
return false;
}
}
void display() {
fill(255);
rect(xpos, ypos, swidth, sheight);
if(isOver || locked) {
fill(153, 102, 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;
}
}
</script><canvas width="200" height="200"></canvas></p>
<div style="overflow: hidden; height: 0px; width: 0px;"><img src="javascript-processing-example-seedBottom.jpg" id="seedBottom.jpg"><img src="javascript-processing-example-seedTop.jpg" id="seedTop.jpg"></div>
<pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
// unless otherwise stated.</b>
HScrollbar hs1, hs2;
PImage top, bottom; // Two image to load
int topWidth, bottomWidth; // The width of the top and bottom images
void setup()
{
size(200, 200);
noStroke();
hs1 = new HScrollbar(0, 20, width, 10, 3*5+1);
hs2 = new HScrollbar(0, height-20, width, 10, 3*5+1);
top = loadImage("seedTop.jpg");
topWidth = top.width;
bottom = loadImage("seedBottom.jpg");
bottomWidth = bottom.width;
}
void draw()
{
background(255);
// Get the position of the top scrollbar
// and convert to a value to display the top image
float topPos = hs1.getPos()-width/2;
fill(255);
image(top, width/2-topWidth/2 + topPos*2, 0);
// Get the position of the bottom scrollbar
// and convert to a value to display the bottom image
float bottomPos = hs2.getPos()-width/2;
fill(255);
image(bottom, width/2-bottomWidth/2 + bottomPos*2, height/2);
hs1.update();
hs2.update();
hs1.display();
hs2.display();
}
class HScrollbar
{
int swidth, sheight; // width and height of bar
int xpos, ypos; // x and y position of bar
float spos, newspos; // x position of slider
int 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 (int xp, int 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(over()) {
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;
}
}
int constrain(int val, int minv, int maxv) {
return min(max(val, minv), maxv);
}
boolean over() {
if(mouseX > xpos && mouseX < xpos+swidth &&
mouseY > ypos && mouseY < ypos+sheight) {
return true;
} else {
return false;
}
}
void display() {
fill(255);
rect(xpos, ypos, swidth, sheight);
if(over || locked) {
fill(153, 102, 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;
}
}</pre>
</body></html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
