animation logic problem

Programming Questions

il.nicker

in Programming Questions • 6 months ago

Hi i've some logical problem.

I want to create an animation with n numbers of button, and when i hit Right or left the button will move according to the direction.

My problem is that, lets say i hit left and the button starts to move left and after it dissappear from the screen i want it to come back from the right into the screen.

currently i use circle to represent my button;

main

circle[] c = new circle[5];
float spacing, dia;
boolean moveLeft = false, moveRight = false;
int[] checkPos = new int[5];
int checkLast, checkFirst;
void setup() {
size(screen.width, screen.height);
dia = 200;
spacing = (width/2 + dia/2 - dia*2)/2;
println(width + dia/2);
for (int i = 0; i!= c.length; i++) {
if ( i == c.length -1 ) {
checkPos[i] = -1;
c[i] = new circle(width/2 - spacing - dia, 500, dia, dia,""+i);
}
else {
checkPos[i] = i;
c[i] = new circle(width/2 + i*spacing + i*dia, 500, dia, dia,""+i);
}
println(c[i].pos.x);
}
checkFirst = checkPos[0];
checkLast = checkPos[checkPos.length-1];
}
void draw() {
background(255);
for (int i = 0; i!= c.length; i++) {
c[i].display();
}
if (moveLeft) {
for (int i = 0; i!= c.length; i++) {
c[i].easing(c[i].realPos.x-spacing-dia);
}
}
if (moveRight) {
for (int i = 0; i!= c.length; i++) {
c[i].easing(c[i].realPos.x+spacing+dia);
}
}
for (int i = 0; i!= c.length; i++) {
if ( checkPos[i] == 0){
c[i].easeSize(c[i].actualDia.x * 1.3);
}
else{
c[i].easeSize(c[i].actualDia.x);
}
}
}

circle

class circle {
PVector pos;
PVector realPos;
PVector dia;
PVector actualDia;
String n;
circle(float x, float y, float dx, float dy, String v) {
pos = new PVector(x, y);
realPos = new PVector(x, y);
dia = new PVector(dx, dy);
actualDia = new PVector(dx, dy);
n = v;
}
void display() {
ellipse(pos.x, pos.y, dia.x, dia.y);
fill(0);
text(n,pos.x, pos.y);
fill(255);
}
void easing(float x) {
boolean reached = round(x-pos.x) == 0;
if (reached) {
pos.x = x;
realPos.x = x;
moveLeft = false;
moveRight = false;
}
else {
pos.x += (x - pos.x) * 0.2;
}
}
void easeSize(float diameter_size) {
boolean reached = round(diameter_size - dia.x) == 0 && round(diameter_size - dia.y) == 0;
if (reached) {
dia.x = diameter_size;
dia.y = diameter_size;
}
else {
dia.x += (diameter_size - dia.x) * 0.2;
dia.y += (diameter_size - dia.y) * 0.2;
}
}
}

Controller

void keyReleased() {
if (!moveRight && !moveLeft) {
if (keyCode == LEFT) {
for (int i = 0; i!= c.length; i++) {
if (c[i].pos.x < 0) {
c[i].pos.x = width/2 + checkPos[i]*spacing + checkPos[i]*dia;
c[i].realPos.x = width/2 + checkPos[i]*spacing + checkPos[i]*dia;
}
}
for (int i = checkPos.length-1 ; i != -1; i --) {
if ( i != 0 ) {
checkPos[i] = checkPos[i-1];
}
else {
checkPos[i] = checkLast;
checkLast = checkPos[checkPos.length-1];
}
}
checkFirst = checkPos[0];
moveLeft = true;
}
if (keyCode == RIGHT) {
for (int i = 0; i!= c.length; i++) {
if (c[i].pos.x > width) {
c[i].pos.x = width/2 - checkPos[i]*spacing - checkPos[i]*dia;
c[i].realPos.x = width/2 - checkPos[i]*spacing - checkPos[i]*dia;
}
}
for (int i = 0 ; i != checkPos.length-1; i ++) {
if ( i != checkPos.length-1 ) {
checkPos[i] = checkPos[i+1];
}
else {
checkPos[i] = checkFirst;
checkFirst = checkPos[0];
}
}
checkLast = checkPos[checkPos.length-1];
moveRight = true;
}
}
//println(checkPos);
//println("");
}

There's no problem with moving left, but moving right i have some problem and it have to do with the highlighted part, but i don't know how to solve it.

currently i use checkPos(array) to set the location of the circle. the center button is always 0 in the checkpos.

For example;

[0] [1] [2] [3] [4] (Button)

0 1 2 3 -1 (Position)

1 2 3 -1 0 (Position after right click)

Position for 0 means center, -1 left from the center button, 1 right to the center button

so on my 1st right click, button of position more than width, needs to be set to a new position, so button 3 and 2 are > width, thus 3 have to be set to width/2 - 2*spacing - 2*dia; before it will move to the right, but now for button 3 it's set to width/2 - checkPos[i]*spacing - checkPos[i]*dia; checkPos[i] = 3 while for button it's 2 while it suppose to be 3.

Hope you guys could help.

Thanks.

Replies(2)

tfguy44

Re: animation logic problem

6 months ago

Maybe this example will help. It's how I'd do it.

color[] colors = {
color(255, 0, 0), color(255, 255, 0), color(0, 255, 0), color(0, 0, 255), color(255, 0, 255)
};
int offset = 0;
int at = 0;
void setup() {
size(220, 220);
ellipseMode(CENTER);
noStroke();
smooth();
}
void draw() {
background(0);
translate(width/2, height/2);
offset+=(offset>0?-1:0)+(offset<0?1:0);
for( int i = 0 ; i < 5; i++ ){
fill( colors[(at+i)%5] );
int t = -120+(60*i)-offset;
float s = map( abs(t), 0, 120, 60, 20 );
ellipse(t, 0, s, s);
}
}
void keyPressed() {
if ( offset == 0 && key == CODED ) {
if ( keyCode == LEFT ) {
offset = -60;
at++;
}
if ( keyCode == RIGHT ) {
offset = 60;
at--;
at+=5;
}
}
}

il.nicker

Re: animation logic problem

6 months ago

Thanks tfguy44!

Interesting idea, however as i create a class and i want different circle to move to the center when i press left or right, for instance circle[0] is at center now and circle[1] is right to circle[0], when i press Left, circle[0] should move left from center while circle[1] should move left to center.

However your code doesn't do that, it's just re-moving circle[2] from right to left(back to center), thus circle[2] is always at the center.

here's the code edited from your code.

Main

int offset = 0;
circle[] c = new circle[5];
float spacing = 250;
float startingPos = (c.length - 1)/2 * spacing;
void setup() {
size(screen.width, screen.height);
ellipseMode(CENTER);
noStroke();
smooth();
for (int i = 0; i != c.length; i++){
int t = int(-startingPos) +(int(spacing)*i)-offset;
float s = map( abs(t), 0, startingPos, spacing, spacing/2 );
c[i] = new circle(float(width/2 + t), float(height/2), s, s, ""+i);
}
}
void draw() {
background(0);
offset+=(offset>0?-5:0)+(offset<0?5:0);
for (int i = 0; i != c.length; i++){
int t = int(-startingPos) +(int(spacing)*i)-offset;
float s = map( abs(t), 0, startingPos, spacing, spacing/2 );
c[i].pos.x = float(width/2 + t);
c[i].dia.x = s;
c[i].dia.y = s;
c[i].display();
}
}
void keyPressed() {
if ( offset == 0 && key == CODED ) {
if ( keyCode == LEFT ) {
offset = -int(spacing);
}
if ( keyCode == RIGHT ) {
offset = int(spacing);
}
}
}

circle

class circle {
PVector pos;
PVector realPos;
PVector dia;
PVector actualDia;
String n;
circle(float x, float y, float dx, float dy, String v) {
pos = new PVector(x, y);
realPos = new PVector(x, y);
dia = new PVector(dx, dy);
actualDia = new PVector(dx, dy);
n = v;
}
void display() {
ellipse(round(pos.x), pos.y, dia.x, dia.y);
fill(0);
text(n,pos.x, pos.y);
fill(255);
}
}

Top Reply