Circle following mouse with easing


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

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


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

#include "circle.h"

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(){
    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){

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,
Look at the example, and you will able to figure out how to adapt that code to the ball example in processing

1 Like