Adding velocity to a simple animation

killthepixelnow

Hello guys, I'm trying to add velocity to this simple animation. When the mouse moves, the circle shall grow and be as larger as faster the movement is. By the way, is it possible to make the circle as big as the sketch?

void setup(){
  smooth();
  frameRate(30);
  size(400,400);
}

void draw(){
  background(100,0,200); // Background color

  //Creating new PVectors
  PVector theMouse = new PVector(mouseX,mouseY); 
  PVector theCenter = new PVector(width/2,height/2); 
  theMouse.sub(theCenter); 

  //Obtaining the lenght of the vector using mag()
  float theMagnitude = theMouse.mag();
  println(theMagnitude); //Checking the lenght in the console

  //Drawing the object
  noCursor();
  noStroke();
  fill(255,255,0); //Yellow fill
  ellipse(width/2,height/2,theMagnitude,theMagnitude); //Drawing
}

quark

I have modified your sketch so that the diameter of the circle is dependent on how fast the mouse moves. It does this by calculating the distance between the mouse position and the mouse position in the previous frame. Since a lot of the time the mouse is not moving I have set a minimum size to prevent the circle disappearing.

I have also changed some of your code so that the PVectors(s) are global (available in all methods) and created them in setup. This means that you are not creating new PVector objects 30 times a second in draw.

HTH

PVector theMouse, thePrevMouse, theCenter;
float theMagnitude;

void setup() {
  size(400, 400);
  smooth();
  frameRate(30);
  theMouse = new PVector();
  thePrevMouse = new PVector();
  theCenter = new PVector(width/2, height/2);
}


void draw() {
  background(100, 0, 200); // Background color
  thePrevMouse.set(pmouseX, pmouseY);
  theMouse.set(mouseX, mouseY);

  theMagnitude = 20 + theMouse.dist(thePrevMouse);

  println(theMagnitude); //Checking the lenght in the console

    //Drawing the object
  noCursor();
  noStroke();
  fill(255, 255, 0); //Yellow fill
  ellipse(width/2, height/2, theMagnitude, theMagnitude); //Drawing
}

killthepixelnow

Great, thanks a lot! Tell me, is there any way for the movement to be less aggressive?

//New global PVectors
PVector theMouse;
PVector thePrevMouse;
PVector theCenter;
//New variables
float theMagnitude;
float circleDiameter = 10;

void setup(){
  size(400,400);
  smooth();
  frameRate(24);
  theMouse = new PVector(); 
  thePrevMouse = new PVector(); 
  theCenter = new PVector(); 
}

void draw(){
  background(100,0,200); //Background color

  //Setting the values of PVectors
  theMouse.set(mouseX,mouseY); 
  thePrevMouse.set(pmouseX,pmouseY); 
  theCenter.set(width/2,height/2);

  //Obtaining the lenght of the vector using mag()
  theMagnitude = theMouse.mag();
  theMagnitude = circleDiameter + theMouse.dist(thePrevMouse);
  println(theMagnitude); //Checking the lenght in the console

  //Drawing the object
  noCursor();
  noStroke();
  fill(255,255,0); //Yellow fill
  ellipse(width/2,height/2,theMagnitude,theMagnitude); //Drawing the circle
}

quark

is there any way for the movement to be less aggressive?

It is possible but the difficulty here is that unless you continuously move the mouse it will always go back to the circleDiameter because the mouse velocity would be zero.

BTW line 27 in your code can be removed because it is replaced by the value calculated in the very next line.

Anyway just had a little play with your code and came up with this. I have increased the frame rate to the standard 60fps for smoother action and added a variable called easying to help smooth out the animation. Try it out with different values for easing, generally the larger the value the smooth the animation.

//New global PVectors
PVector theMouse;
PVector thePrevMouse;
PVector theCenter;
//New variables
float theMagnitude;
float circleDiameter = 10;
float theVelocity = 0, pVelocity = 0;
float easing = 8;

void setup() {
  size(400, 400);
  smooth();
  frameRate(60);
  theMouse = new PVector();
  thePrevMouse = new PVector();
  theCenter = new PVector();
}

void draw() {
  background(100, 0, 200); //Background color

  //Setting the values of PVectors
  theMouse.set(mouseX, mouseY);
  thePrevMouse.set(pmouseX, pmouseY);
  theCenter.set(width/2, height/2);

  //Obtaining the length of the vector using mag()
  pVelocity = easing * theMouse.dist(thePrevMouse);
  theVelocity -= (theVelocity - pVelocity) / easing;
  theMagnitude = circleDiameter + theVelocity;
  println(theMagnitude); //Checking the lenght in the console

    //Drawing the object
  noCursor();
  noStroke();
  fill(255, 255, 0); //Yellow fill
  ellipse(width/2, height/2, theMagnitude, theMagnitude); //Drawing the circle
}

killthepixelnow

Killer! Please, would you mind explaining this part of the code?

pVelocity = easing * theMouse.dist(thePrevMouse);
theVelocity -= (theVelocity - pVelocity) / easing;
theMagnitude = circleDiameter + theVelocity;

I understand that you're calculating the difference between the mouse position and previous mouse position and then multiplying it with the easing factor. However, since I'm new to this language, what does represents this "-="?

GoToLoop

http://processing.org/reference/subtractassign.html

Operators like *=, -=, %=; and even more exotic 1s like >>>=, ^=; mix calculation using the variable from left-side to the expression to the right-side; then assigning total back to left-side variable.

Every C-derivative programming language like Java, JavaScript, D, C#, etc. got those! \m/

killthepixelnow

Thanks a lot. You helped me a lot!

GoToLoop

It's advisable to move every permanent setting like noCursor(), noStroke(), fill() to setup()! ^#(^
No need keeping telling Processing by 60x every second that you don't want cursor being displayed, right? [-X

killthepixelnow

Thanks for the advice. I'll do that to clean up my code.