I’ve added/changed a few things to the above code to hopefully get you to see how it works a bit better.
color[] colors = {
color(200, 0, 0),
color(200, 100, 50),
color(200, 200, 0),
color(0, 200, 0),
color(0, 200, 200),
color(0, 0, 200),
color(200, 0, 200),
color(200)
};
class UIBoxes {
boolean moving;
int startingIndex = colors.length - 2;
int offset = 0;
void onDraw() {
simulate();
render();
}
void simulate() {
if (offset > 0) {
offset-=5;
}
if ( offset < 0 ) {
offset+=5;
}
if ( offset == 0 ) {
moving = false;
}
}
void render() {
for ( int i = 0; i< 5; i++) {
do_box(i);
}
if (!moving) {
fill(128, 128);
rectMode(CORNER);
rect(0, 0, 50, height);
rect(width-50, 0, 50, height);
} else {
fill(255);
text( offset, 300, 20 );
}
}
void onClick() {
if ( moving ) {
return;
}
moving = true;
if ( mouseX < 50 ) {
if ( mouseButton == RIGHT ) offset = -200;
startingIndex--;
startingIndex += colors.length;
startingIndex %= colors.length;
} else if ( mouseX > width - 50 ) {
if ( mouseButton == RIGHT ) offset = 200;
startingIndex++;
startingIndex %= colors.length;
}
}
void do_box(int i) {
fill( colors[(startingIndex+i)%colors.length] );
noStroke();
rectMode(CENTER);
pushMatrix();
float x = -100 + offset+200*i;
translate(x, height/2);
//scale(.8);
scale( map(abs(width/2-x), 0, width/2, 1.5, 1));
rect(0, 0, 110, 110, 20);
fill(255);
rect(0, 0, 100, 100, 20);
fill(0);
text("box " + i, -30, -10);
fill(colors[(startingIndex+i)%colors.length]);
text("index " + (startingIndex+i)%colors.length, -30, 10);
popMatrix();
}
} // End class UIBoxes
// ---
UIBoxes my_uiboxes;
void setup() {
size(600, 400);
my_uiboxes = new UIBoxes();
textSize(20);
}
void draw() {
background(0);
my_uiboxes.onDraw();
}
void mousePressed() {
my_uiboxes.onClick();
}
First, notice that LEFT CLICK and RIGHT CLICK now do different things when you click the side buttons. Left clicking makes the boxes “jump” instantly. Right clicking also makes the boxes jump instantly, but it ALSO puts in the sneaky offset value that makes it look like the boxes HAVEN’T MOVED YET!
The offset value is now displayed when it is non-zero.
The boxes also have their box number on them (which ranges from 0 to 4), and their color index on them (which ranges from 0 to 7, since there are 8 colors!). Box #2 is the box in the middle. Notice that when they scroll nicely, it breifly becomes box 1 or 3 that is in the middle! Sneaky!
When boxes move instantly, only the startingAt
value changes, and thus the index changes. When they move instantly but also get an offset, the BOX NUMBER changes too! Box #2 is always trying to get to the middle…
Hopefully the index numbers let you see what is going on with the colors. You want startingAt
(the index of the color of the box off the left edge of the screen) to be a value between 0 and 7 (because, again, there are 8 colors). if it is 0 and you decrease it, you need to go back to 7. You could check for this specific case, or you could just add the array length and then mod by the array length - the effect is the same. If it gets to 8 then you need it to loop around to 0. Modding it here is all that’s needed.