Particle momentum controlled by cursor position

aislingskye

Hey, I'm new to Processing and know some very basic javascript but it's definitely not advanced enough to help me with what I need to do, so I was wondering if someone on here could help!

There's something very specific that I'm trying to achieve: I would like to create a particle system where the speed of the particles increase and decrease in speed and movement becomes more random depending on the cursor's proximity to a specific xy co-ordinate on the screen, so that when the cursor moves towards the co-ordinate the particles slow down enough to reveal an image or shape. I have uploaded a gif to illustrate what I mean: http://i93.photobucket.com/albums/l80/aislingskyec/OBSERVED-PARTICLE-WALKTHROUGH_zpsd692c819.gif

I guess what I'm trying to make is essentially the reverse of this Google doodle: http://rawkes.com/lab/google-balls-logo/ but in Processing rather than with HTML5.

Can anybody point me in the right direction? Would be very much appreciated!

Thanks!

GoToLoop

Perhaps lerp()? http://processing.org/reference/lerp_.html
There's also a PVector method: http://processing.org/reference/PVector_lerp_.html

aislingskye

Thanks for the reply! The links you've sent seem to address the problem of potentially animating the particles but the main problem I'm having is linking the movement of the particles to the movement of the cursor. Although like I said my current level of Processing is very basic so the links you've sent may have perfectly answered my question and it's just gone straight over my head!

GoToLoop

... to the movement of the cursor.

In case you didn't know it, Processing provides variables mouseX & mouseY as mouse pointer coordinates:

http://processing.org/reference/mouseX.html
http://processing.org/reference/mouseY.html

kn1c

try map() processing.org/reference/map_.html

in this example, distance from cursor to center of sketch is mapped to movement of particle

float halfWidth, halfHeight;
    void setup() {
      size(400, 400);
      noStroke();
      halfWidth = width*0.5;
      halfHeight = height*0.5;
    }

    void draw() {
      background(#29333D);
      float distanceToCenter = dist(mouseX, mouseY, halfWidth, halfHeight);
      float scale = map(distanceToCenter, 0, 200, 0.001, 1.0);
      float posX = (noise(frameCount*0.025)  *200-100) * scale;
      float posY = (noise(frameCount*0.025+1)*200-100) * scale;
      translate(halfWidth, halfHeight);
      ellipse(posX, posY, 20, 20);
    }

aislingskye

Ah, thank you so much. Is there a shorthand way to define increasing or decreasing distance from, say, the middle xy co-ordinate without having to use the 'if' function for every point that the mouse could be at? Or can I somehow link the mouse co-ordinates to the vector acceleration or speed?

aislingskye

And kn1c I will take a look at that code and see if I can figure something out. Thanks!

aislingskye

Kn1c that code is absolutely perfect, that's exactly what I was looking for thank you! This might sound like a really stupid question but how would I go about duplicating the vector so that there are multiple particles in different locations? I had an attempt but I think my syntax is probably too awful and Processing isn't having any of it!

kn1c

You would have to create a particle object. If you are not familiar with OOP you must read processing.org/tutorials/objects/

ArrayList<Particle> myParticles;

void setup() {
  size(400, 400);
  noStroke();

  myParticles = new ArrayList<Particle>();
  for (int i=0; i<10; i++) {
    Particle p = new Particle(random(width), random(height));
    myParticles.add(p);
  }
}

void draw() {
  background(#29333D);
  for (Particle p : myParticles) {
    p.update();
    p.display();
  }
}

class Particle {

  float x, y;

  Particle(float _x, float _y) {
    x = _x;
    y = _y;
  }

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

  void update() {
    float distanceTo = dist(mouseX, mouseY, x, y);
    float speed = map(distanceTo, 0, 400, 0, 1.0);
    x += random(-20, 20) * speed;
    y += random(-20, 20) * speed;
  }
}

aislingskye

Thanks a lot, I really appreciate both of your help.