Easing help

Programming Questions

tonyjans

in Programming Questions • 1 year ago

Good night everyone!!!!

I'm new in this awesome programming language and for that reason some people recommended me that read the book "Getting started with processing", all very well up here, but come to a section named easing, here is the problem. In the book is an example of how to draw a line with this technique but i don´t know how the the process flows, i don´t know if the process of the "x" variable needs to finish to continue the next process ("y" variable). Below is the code:

float x;

float y;

float px;

float py;

float easing = 0.05;

void setup() {

size(480, 120);

smooth();

stroke(0, 102);

}

void draw() {

float targetX = mouseX;

x += (targetX - x) * easing; //here i need to know the flow of the process

float targetY = mouseY;

y += (targetY - y) * easing;

float weight = dist(x, y, px, py);

strokeWeight(weight);

line(x, y, px, py);

py = y;

px = x;

}

Please I need your help to continue learning

Regards

Replies(2)

tfguy44

Re: Easing help

1 year ago

// These are global variables. Only one copy of them exists, and they are accessible from any function.

float x; // This is x position of where the circle currently is.

float y; // This is the y position of where the circle currently is.

float px; // This is the x position of where the circle just was.

float py; // This is the y position of where the circle just was.

float easing = 0.05; // This is used to determine how much of the distance between the mouse pointer and the circle's current location the circle moves in each frame.

// This function runs once when the program starts.

void setup() {

size(480, 120); // This tells the program how big the window is.

smooth(); // This makes drawing nice and smooth.

stroke(0, 102); // This sets the color of lines.

}

// This function runs 60 times a second, to draw everything you see on the screen.

// Notice that the last frame remains drawn because you don't clear the screen with a call to background().

void draw() {

x += (mouseX - x) * easing; // These lines move the circle 5% of the way towards where the mouse is.

y += (mouseY - y) * easing;

strokeWeight( dist(x, y, px, py) ); // This makes the line be bigger if the circle moved further.

line(x, y, px, py); //This draws a line between the last position and the new position.

py = y; // These two lines update the remembered value of the last position,

px = x; // for the next time that draw() runs (which will be an a millisecond or so).

}

tonyjans

Easing help

1 year ago

Thaks a lot for your answer ftguy 44. Now I can continue learning.

Top Reply

Easing help

Replies(2)

Re: Easing help

Easing help

Statistics

Tags

Actions

Related Posts