topical media & game development
#javascript-processing-example-topic-gui-handles.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>Handles</h2>
<p>Click and drag the white boxes to change their position.</p>
<p><a href="http://processing.org/learning/topics/handles.html"><b>Original Processing.org Example:</b> Handles</a><br>
<script type="application/processing">
Handle[] handles;
int num;
void setup()
{
size(200, 200);
num = height/15;
handles = new Handle[num];
int hsize = 10;
for(int i=0; i<num; i++) {
handles[i] = new Handle(width/2, 10+i*15, 50-hsize/2, 10, handles);
}
}
void draw()
{
background(153);
for(int i=0; i<num; i++) {
handles[i].update();
handles[i].display();
}
fill(0);
rect(0, 0, width/2, height);
}
void mouseReleased()
{
for(int i=0; i<num; i++) {
handles[i].release();
}
}
class Handle
{
int x, y;
int boxx, boxy;
int length;
int size;
boolean isOver;
boolean isPress;
boolean locked = false;
boolean otherslocked = false;
Handle[] others;
Handle(int ix, int iy, int il, int is, Handle[] o)
{
x = ix;
y = iy;
length = il;
size = is;
boxx = x+length - size/2;
boxy = y - size/2;
others = o;
}
void update()
{
boxx = x+length;
boxy = y - size/2;
for(int i=0; i<others.length; i++) {
if(others[i].locked == true) {
otherslocked = true;
break;
} else {
otherslocked = false;
}
}
if(otherslocked == false) {
over();
press();
}
if(isPress) {
length = lock(mouseX-width/2-size/2, 0, width/2-size-1);
}
}
void over()
{
if(overRect(boxx, boxy, size, size)) {
isOver = true;
} else {
isOver = false;
}
}
void press()
{
if(isOver && mousePressed || locked) {
isPress = true;
locked = true;
} else {
isPress = false;
}
}
void release()
{
locked = false;
}
void display()
{
line(x, y, x+length, y);
fill(255);
stroke(0);
rect(boxx, boxy, size, size);
if(isOver || isPress) {
line(boxx, boxy, boxx+size, boxy+size);
line(boxx, boxy+size, boxx+size, boxy);
}
}
}
boolean overRect(int x, int y, int width, int height)
{
if (mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height) {
return true;
} else {
return false;
}
}
int lock(int val, int minv, int maxv)
{
return min(max(val, minv), maxv);
}
</script><canvas width="200" height="200"></canvas></p>
<div style="overflow: hidden; height: 0px; width: 0px;"></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>
Handle[] handles;
int num;
void setup()
{
size(200, 200);
num = height/15;
handles = new Handle[num];
int hsize = 10;
for(int i=0; i<num; i++) {
handles[i] = new Handle(width/2, 10+i*15, 50-hsize/2, 10, handles);
}
}
void draw()
{
background(153);
for(int i=0; i<num; i++) {
handles[i].update();
handles[i].display();
}
fill(0);
rect(0, 0, width/2, height);
}
void mouseReleased()
{
for(int i=0; i<num; i++) {
handles[i].release();
}
}
class Handle
{
int x, y;
int boxx, boxy;
int length;
int size;
boolean over;
boolean press;
boolean locked = false;
boolean otherslocked = false;
Handle[] others;
Handle(int ix, int iy, int il, int is, Handle[] o)
{
x = ix;
y = iy;
length = il;
size = is;
boxx = x+length - size/2;
boxy = y - size/2;
others = o;
}
void update()
{
boxx = x+length;
boxy = y - size/2;
for(int i=0; i<others.length; i++) {
if(others[i].locked == true) {
otherslocked = true;
break;
} else {
otherslocked = false;
}
}
if(otherslocked == false) {
over();
press();
}
if(press) {
length = lock(mouseX-width/2-size/2, 0, width/2-size-1);
}
}
void over()
{
if(overRect(boxx, boxy, size, size)) {
over = true;
} else {
over = false;
}
}
void press()
{
if(over && mousePressed || locked) {
press = true;
locked = true;
} else {
press = false;
}
}
void release()
{
locked = false;
}
void display()
{
line(x, y, x+length, y);
fill(255);
stroke(0);
rect(boxx, boxy, size, size);
if(over || press) {
line(boxx, boxy, boxx+size, boxy+size);
line(boxx, boxy+size, boxx+size, boxy);
}
}
}
boolean overRect(int x, int y, int width, int height)
{
if (mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height) {
return true;
} else {
return false;
}
}
int lock(int val, int minv, int maxv)
{
return min(max(val, minv), maxv);
}</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.
