Circle following mouse with easing

beginners
#1

Hi,

I am a beginner with OF and i am trying to do a simple replication of this easing example from processing.

https://processing.org/examples/easing.html

Can you please point me to some very beginner examples to accomplish this please?

Thanks
W

#2

You should first create a Circle class, less or more like this

#include "circle.h"
Circle::Circle(){
    
}

void Circle::setup(ofVec2f _newPos, ofVec2f _oldPos, ofColor _color){
    color = _color;
    newPosition = _newPos;
    oldPosition = _oldPos;
    dimension = 40;
    direction = newPosition - oldPosition;
}

void Circle::update(float pct){
    currentPosition = oldPosition + direction * pct;
}

void Circle::draw(){
    ofSetColor(color);
    ofCircle(currentPosition, dimension);
}

void Circle::setNewPosition(ofVec2f _pos){
    oldPosition = newPosition;
    newPosition = _pos;
    direction = newPosition - oldPosition;
}

This is the class the determinate the position of the circle. The ball has initially a position, when we click on the screen, we should tell to the ball that the pointed clicked on the screen is the new position.

void ofApp::mouseReleased(int x, int y, int button){
    circles.setNewPosition(ofVec2f(x,y));
}

The way in which this ball moves towards the new direction can be defined by the easing functions. In openFrameworks there is a nice addon that take care of this part, https://github.com/arturoc/ofxEasing
Look at the example, and you will able to figure out how to adapt that code to the ball example in processing

1 Like