Ease out rotation speed

hazyy

Hi everyone, I made a star object that rotates constantly in the display(). It also has another function, called puntos() where I want to Increase the rotation speed briefly, and I want to add an ease out. (I mean, i want the rotation speed to suddenly increase but I want it to make it return to the previous speed with an ease out). I don't know how to do it since I only applied easing to distances and my brain is not very creative atm.

Thanks everyone for your time and help. I'm adding my star object (based on the PShape tutorial by Daniel Shiffman).

`// A class to describe a Star shape

class Star { float rotationSpeed; PShape s; float x, y; float starBorder; color starFilling; float starStroke; float opacity;

Star() { rotationSpeed = 0; opacity = 50; x = width/2; y = height/2; starBorder = 0; starFilling = color(255); starStroke = 0;

}

void display() {

opacity = random(180,200);
    // First create the shape
s = createShape();
s.beginShape();
s.fill(starFilling,opacity);
s.stroke(starStroke);
s.strokeWeight(starBorder);
s.vertex(0, -50);
s.vertex(14, -20);
s.vertex(47, -15);
s.vertex(23, 7);
s.vertex(29, 40);
s.vertex(0, 25);
s.vertex(-29, 40);
s.vertex(-23, 7);
s.vertex(-47, -15);
s.vertex(-14, -20);
s.endShape(CLOSE);

// The shape is complete

// Locating and drawing the shape
pushMatrix();
translate(x, y);
scale(2);
rotate(radians(rotationSpeed));
rotationSpeed+= -0.1;
shape(s);
popMatrix();

}

void puntos() { rotationSpeed+=-15; /* HERE I want to increase suddenly the roation speed to +-15 and ease out. This void is also supposed to last a few seconds, once the rotation speed comes back to normal*/ opacity = 255;

}

}`

benja

Easing variables (distance, rotatio, etc.) is pretty much the same no matter what you use them for. To make it work with your code, i would advice to use two variables: rotation and rotationSpeed. Then increment the rotation by the value of rotationSpeed. This way you can then use easing on rotationSpeed.

Here is a simple example:

float rotation=0;
float rotationSpeed =0;

void setup(){
  size(200, 200);
}

void draw(){
  background(0);

  // any kind of easing
  rotationSpeed = sin(frameCount/100.0) * 0.2;

  // update rotation
  rotation += rotationSpeed;

  translate(width/2, height/2);
  rotate(rotation);
  ellipse(0,0,100, 20);
}

If you need help with easing, you could hae a look at Robert Penners's Site.

Regards.

hazyy

Thanks Benja!

I still don't get (I tried with your example and several tries for adapting it) how to apply easing -not- in a loop. Your example goes back and forth because it uses a sin right? I just need to slow down the rotation with the easing, if it starts rotating again is a problem for me. I thought of calculing the exact time the easing stops th movement and then change to another function, but the ideal is just to slow it down and that it keeps rotating slowly until you get other score.

Any other input will be greatly appreciated. Thank you!

Ater

In this example it starts to slow on mousePressed, I made it to decrease speed linearly, but you can use sin if you need.

    float rotation=0;
    float rotationSpeed =0.5;
    float minSpeed = 0.1;
    boolean isSlowing = false;

    void setup(){
      size(200, 200);
    }

    void draw(){
     background(0);

     if(isSlowing){
     rotationSpeed -= 0.005;

     if (rotationSpeed < minSpeed && rotationSpeed > 0){
         rotationSpeed = minSpeed;
         isSlowing = false;
         } 
     }
      rotation += rotationSpeed;

      translate(width/2, height/2);
      rotate(rotation);
      ellipse(0,0,100, 20);
      println(rotationSpeed);
    }

    void mousePressed(){
    isSlowing = true;
    }

hazyy

Thank you!!! it worked amazing :p