Moving circles at different speed when scroll using Ani

unparadise

Hi everyone,

I am spending some time exploring how to use the Ani library for simple animation. One exercise I am doing is to move the different circles on the screen at different speed when the user scroll the mouse.

Below is the code I have. but for some reason nothing happens when I scroll the mouse. Can someone help please?

Thanks, Frank

Code starts below.

import de.looksgood.ani.*;
import de.looksgood.ani.easing.*;

int num = 20;
int[] x = new int[num];
int[] y = new int[num];
int[] r = new int[num];
int dist = 0;

void setup() {
  size(600, 900);
  background(50);

  noStroke();
  fill(190);

  for(int i = 0; i < num; i++) {
    x[i] = int(random(40, 560));
    y[i] = int(random(0, 900));
    r[i] = int(random(15, 50));
    println("( " + x[i] + ", " + y[i] + ", " + r[i] + " )");
    ellipse(x[i], y[i], r[i]*2, r[i]*2);
  }
  Ani.init(this);
}

void draw() {
  background(50);

  for(int i = 0; i < num; i++) {
    ellipse(x[i], y[i], r[i]*2, r[i]*2);
  }
}

void mouseWheel(MouseEvent event) {
  float e = event.getAmount();
  //println(e);
  for(int i = 0; i < num; i++) {
    int dist = int(random(1, 20) * e);
    Ani.to(this, 1.5, "y[i]", y[i] + dist);
  }
}

unparadise

Anybody could help?

akiersky

Hi Frank,

it seems to work when you make a class for your balls:

import de.looksgood.ani.*;
import de.looksgood.ani.easing.*;

int num = 20;
ball[] balls = new ball[num];

void setup() {
  size(600, 900);
  background(50);

  noStroke();
  fill(190);

  for(int i = 0; i < num; i++) {
    balls[i] = new ball(int(random(40, 560)), 
                        int(random(0, 900)), 
                        int(random(15, 50)));
  }
  Ani.init(this);
}

void draw() {
  background(50);

  for(int i = 0; i < num; i++) {
    balls[i].draw();
  }
}

void mouseWheel(MouseEvent event) {
  float e = event.getAmount();
  //println(e);
  for(int i = 0; i < num; i++) {
    int dist = int(random(1, 20) * e);
    balls[i].update(dist);
  }
}

class ball {
 public int x, y, r;
 ball (int x_, int y_, int r_){
  x = x_;
  y = y_;
  r = r_;

 }
  void draw() {
    ellipse(x, y, r, r);
  } 
  void update(int d) {
    Ani.to(this, 1.5, "y", y+d);
  }

}

I suppose Ani may have trouble accessing objects inside arrays? I'm not sure though.

hope this helps! ak

GoToLoop

I took the time to study this Ani library today. Here's my tweaked version based on my discoveries: o->

/**
 * Pulsating Animated Balls (v1.11)
 * (Ball Class Remix)
 *
 * by  Unparadise (2014/Apr)
 * mod Akiersky & GoToLoop
 *
 * forum.processing.org/two/discussion/4416/
 * moving-circles-at-different-speed-when-scroll-using-ani
 */

import de.looksgood.ani.Ani;

{
  Ani.init(this);

  Ani.autostart();
  Ani.overwrite();

  Ani.setDefaultEasing(Ani.EXPO_OUT);
  Ani.setDefaultTimeMode(Ani.FRAMES);
}

static final int NUM = 030, FPS = 60;
static final color BG = 0100;
final Ball[] balls = new Ball[NUM];

void setup() {
  size(600, 900, JAVA2D);
  frameRate(FPS);
  smooth(4);

  noStroke();
  fill(Ball.COLOUR);
  ellipseMode(CENTER);

  for ( int i = 0; i != NUM;
    balls[i++] = new Ball(
      (int) random(Ball.DIAM, width  - Ball.DIAM),
      (int) random(Ball.DIAM, height - Ball.DIAM),
      (int) random(Ball.DIAM>>2, Ball.DIAM>>1)) );

  println("# of animations: " + Ani.size());
}

void draw() {
  background(BG);
  for (Ball b: balls)  b.display();
}

void keyPressed() {
  final int k = keyCode;

  if      (k == 'W' | k == UP)    moveRndY(-Ball.MAX_SPD);
  else if (k == 'S' | k == DOWN)  moveRndY(Ball.MAX_SPD);
}

void mouseWheel(MouseEvent e) {
  moveRndY(e.getCount()*Ball.MAX_SPD);
}

void moveRndY(int spd) {
  for (Ball b: balls)  b.targetHeight((int) random(spd));
}

class Ball {
  static final int MAX_SPD = 0150, DIAM = 0100;
  static final color COLOUR = 0300;

  int x, y, d;

  final Ani heightAni = Ani.to(this, FPS*1.5, "y", 0);

  {
    final Ani diamAni = Ani.to(this, FPS/1.5, random(FPS>>4), 
    "d", DIAM, Ani.SINE_IN_OUT);

    diamAni.setPlayMode(Ani.YOYO);
    diamAni.repeat();
  }

  Ball(int xx, int yy, int dd) {
    x = xx;
    y = yy;
    d = dd;

    targetHeight(0);
  }

  void display() {
    ellipse(x, y, d, d);
  }

  void targetHeight(int step) {
    if      (y < -DIAM)  y = height + DIAM;
    else if (y > height + DIAM)  y = -DIAM;

    heightAni.setBegin(y);
    heightAni.setEnd(y + step);
    heightAni.start();
  }
}

GoToLoop

And now another mix based on PVector[] & Ani[] arrays instead of Ball[]: >:/

/**
 * Pulsating Animated Balls II (v1.13)
 * (PVector Array Remix)
 *
 * by  Unparadise (2014/Apr)
 * mod GoToLoop
 *
 * forum.processing.org/two/discussion/4416/
 * moving-circles-at-different-speed-when-scroll-using-ani
 */

import de.looksgood.ani.Ani;

{
  Ani.init(this);

  Ani.autostart();
  Ani.noOverwrite(); // or Ani.overwrite();

  Ani.setDefaultEasing(Ani.EXPO_OUT);
  Ani.setDefaultTimeMode(Ani.FRAMES); // or Ani.SECONDS
}

static final short NUM = 030, DIAM = 0100;
static final short MAX_SPD = 0150, FPS = 60;
static final color FG = 0300, BG = 0100;

final PVector[] balls = new PVector[NUM];
final Ani[] heightAnims = new Ani[NUM];

void setup() {
  size(600, 900, JAVA2D);
  frameRate(FPS);
  smooth(4);

  noStroke();
  fill(FG);
  ellipseMode(CENTER);

  for (int i = 0; i != NUM; i++) {
    PVector b = balls[i] = new PVector(
    (int) random(DIAM, width  - DIAM), 
    (int) random(DIAM, height - DIAM), 
    (int) random(DIAM>>2, DIAM>>1));

    heightAnims[i] = Ani.to(b, FPS*1.5, "y", b.y);

    Ani diamAni = Ani.to(b, FPS/1.5, random(FPS>>4), "z", DIAM, Ani.SINE_IN_OUT);
    diamAni.setPlayMode(Ani.YOYO);
    diamAni.repeat();
  }

  println("# of animations: " + Ani.size());
}

void draw() {
  background(BG);
  for (PVector b : balls)  ellipse(b.x, b.y, b.z, b.z);
}

void keyPressed() {
  int k = keyCode;

  if      (k == 'W' | k == UP)    moveRndY(-MAX_SPD);
  else if (k == 'S' | k == DOWN)  moveRndY(MAX_SPD);
}

void mouseWheel(MouseEvent e) {
  moveRndY(e.getCount()*MAX_SPD);
}

void moveRndY(int spd) {
  for (Ani a : heightAnims) {
    float y = a.getPosition();

    if      (y < -DIAM)  y = height + DIAM;
    else if (y > height + DIAM)  y = -DIAM;

    a.setBegin(y);
    a.setEnd(y + random(spd));
    a.start();
  }
}

GoToLoop

I suppose Ani may have trouble accessing objects inside arrays?

AFAIK currently, the String parameter must be a field name from the Object parameter. (~~)
However, a Java's array object only got a public length field! [..]

unparadise

Hi akiersky and GoToLoop, thank you for your reply. I didn't realize that the new forum does not have email notification as more and didn't realized your reply until today.

Yes, Ak, your version totally works. And I am studying GoToLoop's tweaks too. Thank you so much for your time to help!

-Frank