Tunnel Effect

Hello, how is it going?

Im working on a tunnel effect to follow my mouse, im using vector math and attraction based on the one Daniel Shiffman uses on Chapter 2 - Forces of Nature of Code book to make them come after the mouse but still isnt working how i want. What i want is for the rectangles to always finish where the mouse is at that moment. Any toughts? Even when my mouse is not moving some of the rectangles behave strange.. no idea what that could be

Here`s the code

thanks in advance

** main tab**

int x, y;
int k = 0;
int velocidade = 3;
int limite = 999;
Retangulo[] retangulos = new Retangulo[limite];
Atrator a;

void setup() {
  size(800, 800);
  x = width;
  y = height;
  for (int i = 0; i < limite; i++) {
    retangulos[i] = new Retangulo(i);
    retangulos[i].ligado = false;
  a = new Atrator();

void draw() {

  //get mouseX and mouseY position and make it the point of attraction

  //turn rectangles boolean on according to framecount
  if (frameCount % 20 == 0) {
    retangulos[k].ligado = true;

  //restart (if needed) procces of counting of how many rectangles were drawn
  if (k >= limite) k = 0;

  //check rectangles boolean and draw if theyre on
  for (int i = 0; i < limite; i++) {
    PVector forca = a.atrair(retangulos[i]);
    if (retangulos[i].ligado) {

Rectangle Class

class Retangulo {

  PVector location, tamanho, aceleracao, velocidade;
  int velocidadeDiminui, mass, tag;
  boolean ligado;

  Retangulo(int tag_) {
    tag = tag_;
    ligado = false;
    location = new PVector(width/2, height/2);
    tamanho = new PVector(width, height);
    velocidadeDiminui = 5;
    mass = 1;
    velocidade = new PVector(0, 0);
    aceleracao = new PVector(0, 0);

  void update() {

  void desenha() {
    //control size when its too small
    if ((tamanho.x < 10) || (tamanho.y < 10)) {
      ligado = false;
      location = new PVector(width/2, height/2);
      tamanho = new PVector(width, height);
    //draw if on and make it smaller over time
    if (ligado) {
      rect(location.x, location.y, tamanho.x, tamanho.y);
      tamanho.x -= velocidadeDiminui;
      tamanho.y -= velocidadeDiminui;

  void aplicaForca(PVector force) {
    //make it not be affected by force when its close to disappear, made it look better
    if ((tamanho.x > 50) && (tamanho.y > 50)) {
      PVector f = PVector.div(force, mass); 

Attractor class

// Attraction
// Daniel Shiffman <http://www.shiffman.net>;

// A class for a draggable attractive body in our world

class Atrator {
  float mass;    // Mass, tied to size
  float G;       // Gravitational Constant
  PVector location;   // Location
  int controleDistancia;

  Atrator() {
    location = new PVector(0, 0);
    mass = 20;
    G = 1;
    controleDistancia = 50;

  PVector atrair(Retangulo r) {
    PVector force = PVector.sub(location, r.location);   // Calculate direction of force
    float d = force.mag();                              // Distance between objects
    d = constrain(d, 5.0, 25.0);                          // Limiting the distance to eliminate "extreme" results for very close or very far objects
    force.normalize();                                  // Normalize vector (distance doesn't matter here, we just want this vector for direction)
    float strength = (G * mass * r.mass) / (d * d);     // Calculate gravitional force magnitude
    force.mult(strength);                               // Get force vector --> magnitude * direction
    PVector locationMouse = new PVector (mouseX, mouseY);
    PVector locationRetangulo = new PVector (r.location.x, r.location.y);
    return force;

    //trying to apply more attraction when they are close to make it disapear where the mouse is, didnt work
    //if (locationMouse.x < controleDistancia*2 || locationMouse.y < controleDistancia*2) return force.mult(1.02); 
    //else if (locationMouse.x < controleDistancia || locationMouse.y < controleDistancia) return force.mult(1.06); 
    //else return force;

  void atualizaPosicao() {
    location.x = mouseX;
    location.y = mouseY;


  • Answer ✓

    It looks like each individual rectangle is following the mouse. Which means that if one of the outer rects are closer to the new mouse position it will arrive before the inner most rect. Which doesn't make any sense if it is a tunnel. (Cool tunnel effect btw).

    Wait, are we going forwards into the tunnel? If so, wouldn't the tunnel be coming towards us instead of away from us? Sorry, just a thought.

    Anyways, if you can manage to make each rect move towards the rect in front of it, and only have the inner most rect move towards the mouse, I think it would look less funky.

Sign In or Register to comment.