I'm using the lerp() function to move my circle across a line, but it isn't working. The circle always ends up on the line somewhere depending on what my amt parameter is for the lerp() function. If I put 0.5 for the amt then the circle is placed half way down the line, but I can't see it move nor does the circle finish moving down the length of the circle. So can anyone help me make the circle move down the line?
float x1,y1,x2,y2;
float cx,cy;
float x4,y4;
void setup() {
size(600,600);
x1 = 200;
y1 = 150;
x2 = 300;
y2 = 250;
cx = 450;
cy = 200;
}
void draw() {
background(60);
stroke(220);
line(x1,y1,x2,y2);
noFill();
noStroke();
// calculate the point
float k = ((y2-y1) * (cx-x1) - (x2-x1) * (cy-y1))
/ ((y2-y1)*(y2-y1) + (x2-x1)*(x2-x1));
float x4 = cx - k * (y2-y1);
float y4 = cy + k * (x2-x1);
stroke(0);
line(cx,cy,x4,y4); //line connecting circle and point on line
float x = lerp(cx, x4, .1);
float y = lerp(cy, y4, .1);
fill(255, 0, 175);
ellipse(x4,y4, 8,8);
fill(175, 0, 255);
ellipse(x, y, 50, 50);
}
You need to use a variable for the amount value passed into the lerp() function. Then just increase that variable over time to animate:
float amount = 0;
float speed = .001;
void setup() {
size(500, 500);
}
void draw() {
float startX = 0;
float startY = 0;
float endX = width;
float endY = height;
float currentX = lerp(startX, endX, amount);
float currentY = lerp(startY, endY, amount);
background(0);
ellipse(currentX, currentY, 20, 20);
amount += speed;
}
Related
(I'm using processing for this but it is not necessarily relevant.)
I'm looking for an algorithm that would take the point A and the point B (B being the mouse cursor position) and use them so that every frame the point A moves a little bit towards B (from -1px to 1px left/right up/down)
I tried x1 += cos(atan((mouseY-y1)/(mouseX-x1))) and the same with sin for y1, but I doesn't seem to work.
If someone has an idea I would appreciate it.
I'm not looking for a built-in function that would do the job, I'd like to understand the math behind it.
Thank you for your time.
It is important that the point coordinates are floating point values:
float x = 0.0, y= 0.0;
For the computation of the movement of the point, I recommend to use PVector.
Setup 2 vectors, for the point and the mouse position:
PVector Pt = new PVector(x, y);
PVector Pm = new PVector(mouseX, mouseY);
Calculate the Unit vector from Pt to Pm:
PVector D = PVector.sub(Pm, Pt);
D.normalize();
Calculate the new point by newPt = Pt + D * min(speed, dist), but ensure that the point moves not further than the Euclidean distance to the mouse:
float speed = 3;
float movelen = min(PVector.dist(Pt, Pm), speed);
PVector newPt = PVector.add(Pt, D.mult(movelen));
The same can be achieved by arithmetic operations
float dx = mouseX - x;
float dy = mouseY - y;
float dist = sqrt(dx*dx + dy*dy);
if (dist > 0) {
float movelen = min(dist, speed);
x += dx/dist * movelen;
y += dy/dist * movelen;
}
(dx,dy) is the vector from the point to the mouse and dist ist the Euclidean distance between the 2 points. A Unit vector can be calculated by dividing a vector by its magnitude, so (dx/dist, dy/dist) is the unit direction vector.
Finally (dx/dist * movelen, dx/dist * movelen) is the same as D * movelen.
See the example:
(the code works for any speed, even below 1.0)
float x = 0.0, y= 0.0;
void setup() {
size(300, 300);
x = (float)random(width);
y = (float)random(height);
}
void draw() {
float speed = 3;
/*
//setup points
PVector Pt = new PVector(x, y);
PVector Pm = new PVector(mouseX, mouseY);
// calcualte normalized direction
PVector D = PVector.sub(Pm, Pt);
D.normalize();
// calcualte new point
float movelen = min(PVector.dist(Pt, Pm), speed);
PVector newPt = PVector.add(Pt, D.mult(movelen));
x = newPt.x;
y = newPt.y;
*/
float dx = mouseX - x;
float dy = mouseY - y;
float dist = sqrt(dx*dx + dy*dy);
if (dist > 0) {
float movelen = min(dist, speed);
x += dx/dist * movelen;
y += dy/dist * movelen;
}
background(196);
stroke(0);
fill(255, 0, 0);
ellipse((int)x, (int)y, 10, 10);
fill(0, 255, 0);
ellipse(mouseX, mouseY, 10, 10);
}
I am having a bit of trouble trying to figure out how to draw paths from a point on a canvas with the start of each path being equally distanced from the initial point. To illustrate what I mean, the code that I have so far is able to generate this:
and the desired result is something like this:
My code:
int n = 3;
int r;
double x;
double y;
point1 = new Point(mWidth/2, mHeight/2);
double angle;
double angleFactor;
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int i = 0; i < 3; i++){
angleFactor = 2 * Math.PI / n;
angle = i * angleFactor;
x = (point1.x) + r * Math.cos(angle);
y = (point1.y) + r * Math.sin(angle);
//Draw paths
path.reset();
path.moveTo(point1.x, point1.y);
path.lineTo((float) x, (float) y);
canvas.drawPath(path, paint);
}
}
Is there a simple solution to this?
Since you want to have a tiny distance between the offset of a line and the center point, you can define start coordinates like this:
double xStart, xEnd;
double yStart, yEnd;
double offsetFraction = 0.1;
Inside the for loop in onDraw() :
double lengthX = r * Math.cos(angle);
double lengthY = r * Math.sin(angle);
xStart = (point1.x) + offsetFraction * lengthX;
yStart = (point1.y) + offsetFraction * lengthY;
xEnd = (point1.x) + lengthX;
yEnd = (point1.y) + lengthY;
//Draw paths
path.reset();
path.moveTo((float) xStart, (float) yStart);
path.lineTo((float) xEnd, (float) yEnd);
canvas.drawPath(path, paint);
I need to make the mousePressed() function move the entire pendulum within the bounds of its length (r1 and r2 = 200). Lines 32-44 need to change based on the mousePressed function
I have code for a single pendulum that uses PGraphics with a function that works the way i want it to. It uses the length of the pendulum as the maximum displacement for the ball at the end. I need to translate this into a double pendulum that accounts for two lengths instead of one.After running the program for a while the line traced is bound in a circle with a radius being the sum of the r variable (400)
void drag() {
// If we are draging the ball, we calculate the angle between the
// pendulum origin and mouse position
// we assign that angle to the pendulum
if (dragging) {
PVector diff = PVector.sub(origin, new PVector(mouseX, mouseY)); // Difference between 2 points
angle = atan2(-1*diff.y, diff.x) - radians(90); // Angle relative to vertical axis
}
}
}
float r1 = 200;
float r2 = 200;
float m1 = 40;
float m2 = 40;
float a1 = PI/2;
float a2 = PI/2;
float a1_v = 0;
float a2_v = 0;
float g = 1;
float px2 = -1;
float py2 = -1;
float cx, cy;
PGraphics canvas;
void setup() {
size(1024, 768);
cx = width/2;
cy = 200;
canvas = createGraphics(width, height);
canvas.beginDraw();
canvas.background(255);
canvas.endDraw();
}
void draw() {
background(255);
imageMode(CORNER);
image(canvas, 0, 0, width, height);
float num1 = -g * (2 * m1 + m2) * sin(a1);
float num2 = -m2 * g * sin(a1-2*a2);
float num3 = -2*sin(a1-a2)*m2;
float num4 = a2_v*a2_v*r2+a1_v*a1_v*r1*cos(a1-a2);
float den = r1 * (2*m1+m2-m2*cos(2*a1-2*a2));
float a1_a = (num1 + num2 + num3*num4) / den;
num1 = 2 * sin(a1-a2);
num2 = (a1_v*a1_v*r1*(m1+m2));
num3 = g * (m1 + m2) * cos(a1);
num4 = a2_v*a2_v*r2*m2*cos(a1-a2);
den = r2 * (2*m1+m2-m2*cos(2*a1-2*a2));
float a2_a = (num1*(num2+num3+num4)) / den;
translate(cx, cy);
stroke(0);
strokeWeight(2);
float x1 = r1 * sin(a1);
float y1 = r1 * cos(a1);
float x2 = 0;
float y2 = 0;
if(mousePressed){
x2 = mouseX - cx;
y2 = mouseY - cy;
}else{
x2 = x1 + r2 * sin(a2);
y2 = y1 + r2 * cos(a2);
}
line(0, 0, x1, y1);
fill(0);
ellipse(x1, y1, m1, m1);
line(x1, y1, x2, y2);
fill(0);
ellipse(x2, y2, m2, m2);
a1_v += a1_a;
a2_v += a2_a;
a1 += a1_v;
a2 += a2_v;
// a1_v *= 0.99;
// a2_v *= 0.99;
canvas.beginDraw();
//canvas.background(0, 1);
canvas.translate(cx, cy);
canvas.stroke(0);
if (frameCount > 1) {
canvas.line(px2, py2, x2, y2);
}
canvas.endDraw();
px2 = x2;
py2 = y2;
}
I really have no idea why the x and y values wont go to the drawLines function
float x, x1, x2;
float y, y1, y2;
float rad; //radius
int lines = 30; //number of lines
int colorNumber = 1;
void setup() {
background(#FFFFFF);
size (800, 600);
rad = 8;
}
void draw() {
}
This creates the three dots or vertices of the mathematical envelope
void mouseClicked() {
float x = mouseX;
float x1 = mouseX;
float x2 = mouseX;
float y = mouseY;
float y1 = mouseY;
float y2 = mouseY;
if (colorNumber == 1) {
fill(#9393ff);
ellipse(x, y, rad, rad);
} else if (colorNumber == 2) {
fill(#FF9393);
ellipse(x1, y1, rad, rad);
} else if (colorNumber == 3) {
fill(#93ff93);
ellipse(x2, y2, rad, rad);
}
}
This is supposed to draw the envelope using the coordinates of the vertices
void drawLines(int numLines) {
for (int i = 0; i < numLines; i = i + 1) {
float x = mouseX;
float x1 = mouseX;
float x2 = mouseX;
float y = mouseY;
float y1 = mouseY;
float y2 = mouseY;
float t = (float) i/(numLines-1);
float startX = x + t * (x1 - x);
float startY = y + t * (y1 - y);
float endX = x1 + t * (x2 - x1);
float endY = y1 + t * (y2 - y1);
line (startX, startY, endX, endY);
}
}
void mouseReleased() {
colorNumber++;
if (colorNumber == 4) {
colorNumber = 1;
}
println(colorNumber);
}
void keyPressed() {
if (keyPressed == true) {
background(#FFFFFF);
}
}
this last stuff just tells the code if you press a key, it will reset the backround
I understand your intention with using mouseX and mouseY to specify the coordinates of one of the 3 points of the envelope on click. The current issue is that all 3 points are being set to the same coordinate with each click. You need to introduce a variable to keep track of which coordinate to set on-click, such that only one pair is set. Then, only once all 3 coordinates are set, drawLines() can be called.
I propose the following:
Introduce 2 variables, one to keep track of which point is being modified; the other an array of PVectors (just to make it cleaner).
int index = 0;
PVector[] coords = new PVector[3];
Modify mouseClicked() to include the following:
void mouseClicked() {
ellipse(mouseX, mouseY, 8, 8);
coords[index] = new PVector(mouseX, mouseY);
index += 1;
if (index == 3) {
drawLines(lines);
}
index %= 3;
}
drawLines() becomes:
void drawLines(int numLines) {
for (int i = 0; i < numLines; i = i + 1) {
x = coords[0].x;
x1 = coords[1].x;
x2 = coords[2].x;
y = coords[0].y;
y1 = coords[1].y;
y2 = coords[2].y;
float t = (float) i / (numLines - 1);
float startX = x + t * (x1 - x);
float startY = y + t * (y1 - y);
float endX = x1 + t * (x2 - x1);
float endY = y1 + t * (y2 - y1);
line(startX, startY, endX, endY);
}
}
Finally, since your drawing on a black background, and the default stroke colour is black, use strokeColour() to change the colour of the lines so that you can see the envelope once its drawn.
I have a point following the path of a circle, and at a determined time, I want that point to "break" off and travel along the tangent line. How do I find this? I've been told that the derivative is
x = -sin(time)
and
y = -sin(time)
(not sure if I understand the "time" part of what I was told), but I don't see how that is enough to get my point to travel along this line. Any tips? Here is what I have currently.
/*
Rotor draws circle for random period of time, then moves
in a straight direction for a random period of time, beginning a
new circle
*/
Rotor r;
float timer = 0;
boolean freeze = false;
void setup() {
size(1000, 600);
smooth();
noFill();
frameRate(60);
background(255);
timeLimit();
r = new Rotor(100, 100, random(40, 100));
}
void draw() {
timer = timer + frameRate/1000;
if(timer > timeLimit()) {
timer = 0;
timeLimit();
if(freeze == true) {
freeze = false;
} else {
freeze = true;
}
}
if(!freeze) {
r.drawRotor();
} else {
r.holdSteady();
}
}
float timeLimit() {
float timeLimit = random(100);
return timeLimit;
}
Rotor Class:
class Rotor {
color c;
int thickness;
float xPoint;
float yPoint;
float nXPoint;
float nYPoint;
float radius;
float angle = 0;
float centerX;
float centerY;
float pointSpeed = frameRate/100;
Rotor(float cX, float cY, float rad) {
c = color(0);
thickness = 1;
stroke(c);
strokeWeight(thickness);
centerX = cX;
centerY = cY;
radius = rad;
}
void drawRotor() {
angle = angle + pointSpeed;
xPoint = centerX + cos(angle) * radius;
yPoint = centerY + sin(angle) * radius;
ellipse(xPoint, yPoint, thickness, thickness);
strokeWeight(2);
ellipse(centerX, centerY, 5, 5);
}
void holdSteady() {
xPoint = -sin(angle);//need tangent of circle
yPoint = -cos(angle);
ellipse(xPoint, yPoint, 4, 4);
//then set new center x and y
}
void drawNewRotor(float cX, float cy, float rad) {
}
}
You can use tan()
int f =100;
size(300,300);
stroke(0);
translate(width/2, height/2);
for(int i = 0; i< 360; i++){
point(cos(radians(i))*f,sin(radians(i))*f);
point(f,tan(radians(i))*f);
point(tan(radians(i))*f,f);
}