Creating a motion path

Programming Questions

maxta99

in Programming Questions • 1 year ago

hey guys, im having troubles creating a motion path for my code. I am pretty new to processing and so far I have managed to make the animation follow the mouse, however I would like to create a motion path so the user can watch the animation rather than using their mouse. Any suggestions on how to do this?
Here is my code so far:

color col = color(66,168,237,200);
float lineLength = width/5;
float angle = 45;
float angleSpeed = 7;

void setup() {
size(1000, 414);
background(255);
smooth();
}

void draw() {
    pushMatrix();
    strokeWeight(0.3);
    stroke(col);
    translate(mouseX,mouseY);
    rotate(radians(angle));
    line(0, 0, lineLength, 0);
    lineLength = random(width/4, height/2);
    popMatrix();

    angle += angleSpeed-10;
}

Cheers in advance

Replies(9)

Chrisir

Re: Creating a motion path

1 year ago

one simple way is a invisble ball from a pong game (I took one from the other thread).
This ball position is replacing mouse position.
The ball flies and reflects on all 4 walls.
There's a slight random offset in the path when bouncing. Less repetitive...

color col = color(66, 168, 237, 200);
float lineLength = width/5;
float angle = 45;
float angleSpeed = 7;
// ball data
int ballRadius;
float ballX;
float ballY;
float dirX;
float dirY;
void setup() {
size(1000, 414);
smooth();
// ball data
ballRadius = 10;
ballX = width/2;
ballY = 7 + ballRadius;
dirX = 1.9; // set x first then y (convention); I set dirX to 0.9
dirY = 2.1;
}
void draw() {
// background(255);
// ball management
// Ball();
BallMovement();
BallBounce() ;
// apply
pushMatrix();
translate(ballX, ballY);
rotate(radians(angle));
strokeWeight(0.3);
stroke(col);
line(0, 0, lineLength, 0);
lineLength = random(width/4, height/2);
popMatrix();
angle += angleSpeed-10;
}
// -------------------------------------------------------------
void Ball() {
fill(255, 0, 0);
noStroke();
smooth();
ellipse(ballX, ballY, ballRadius*2, ballRadius*2);
}
void BallMovement() {
ballX += dirX;
ballY += dirY;
}
void BallBounce() {
// bounce at top, left and right and bottom
// the Code + (random(.7)-.35) provides a small offset
final float offset=0.9;
//top
if (ballY < ballRadius)
dirY = abs(dirY) + (random(offset)-offset/2) ;
//bottom
if (ballY > height)
dirY = -abs(dirY) + (random(offset)-offset/2) ;
if (ballX < ballRadius)
dirX = abs(dirX) + (random(offset)-offset/2) ;
if (ballX > width-ballRadius)
dirX = -abs(dirX) + (random(offset)-offset/2) ;
}

PhiLho

Re: Creating a motion path

1 year ago

First, modify your sketch to record the path:

color col = color(66, 168, 237, 200);
float lineLength = width/5;
float angle = 45;
float angleSpeed = 7;

ArrayList<PVector> path = new ArrayList<PVector>();


void setup() {
  size(1000, 414);
  background(255);
  smooth();
  strokeWeight(0.3);
  stroke(col);
}

void draw() {
  PVector p = new PVector(mouseX, mouseY);
  path.add(p);
  
  translate(mouseX, mouseY);
  rotate(radians(angle));
  line(0, 0, lineLength, 0);
  lineLength = random(width/4, height/2);

  angle += angleSpeed-10;
}

void keyPressed()
{
  String[] lines = new String[path.size()];
  int c = 0;
  for (PVector p : path)
  {
    lines[c++] = p.x + "\t" + p.y;
  }
  saveStrings("H:/Temp/Path.txt", lines); // Change path there
  exit();
}

PhiLho

Re: Creating a motion path

1 year ago

Then modify it to play the record:

color col = color(66, 168, 237, 200);
float lineLength = width/5;
float angle = 45;
float angleSpeed = 7;

String[] lines;
int counter;

void setup() {
  size(1000, 414);
  background(255);
  smooth();
  strokeWeight(0.3);
  stroke(col);
  
  lines = loadStrings("H:/Temp/Path.txt");
}

void draw() {
  if (counter == lines.length - 1) // End of array
  {
    println("Done");
    noLoop(); // End
  }
  float[] values = float(lines[counter++].split("\t"));
  
  translate(values[0], values[1]);
  rotate(radians(angle));
  line(0, 0, lineLength, 0);
  lineLength = random(width/4, height/2);

  angle += angleSpeed-10;
}

maxta99

Re: Creating a motion path

1 year ago

Thanks! both of you!

I loved the ball bouncing example, it looked great for what I am trying to achieve.

Another quick question, If, say I wanted to change the stroke color from light blue to say white after about 3 minutes, how would I go about doing that? I'm not particularly keen on having a completely blue screen after about ten minutes but i don't know how to go about changing it ><
I also tried to adjust the coding so that whenever the line spiral turned, it would reflect white AND blue lines in a random order but failed at doing this too. Argh! processing is hard.

Shlosh

Re: Creating a motion path

1 year ago

I recognize that pong ball from somewhere

. As for changing color in time you could use the time functions to add or subtract a small value to the color value of R, G, or B every time a few seconds passes. For the random order of white and blue you can just assign a random value of 0 through 10 with random(minimum value, maximum value) and if the value is 5 or greater the stroke fill is blue else it is white. It will choose a color every loop making it random as it spins.

amnon.owed

Re: Creating a motion path

1 year ago

You get significant speed gains if you use P2D.

For smooth color transitions you could use the HSB colorMode. Saturation 0 + brightness 100 is white.

Adapted Code

float ballX, ballY, lineLength;
float dirX = 1.9;
float dirY = 2.1;
float angle = 45;
float angleSpeed = -3;
float offset = 0.9;
void setup() {
size(1000, 600, P2D);
ballX = width/2;
ballY = height/2;
frameRate(1000);
strokeWeight(0.3);
smooth();
colorMode(HSB, 360, 100, 100, 100);
}
void draw() {
// ball movement
ballX += dirX;
ballY += dirY;
if (ballY < 0 || ballY > height) { dirY = -dirY + (random(offset)-offset/2) ; }
if (ballX < 0 || ballX > width) { dirX = -dirX + (random(offset)-offset/2) ; }
// line display
angle += angleSpeed;
translate(ballX, ballY);
rotate(radians(angle));
color col = color(frameCount%360, 100, 100, 50);
lineLength = random(width/4, width/2);
stroke(col);
line(0, 0, 0, lineLength);
}

Chrisir

Re: Creating a motion path

1 year ago

Your Lines 22-23 are shorter than mine but less stable. They can lead to stutter when the ball is in the zone where it comes to dirY= - dirY.

In some cases that can lead to stutter so the ball stays in the zone forever.

@maxta

See

http://www.openprocessing.org/sketch/775

amnon.owed

Re: Re: Creating a motion path

1 year ago

Ah, you are right. Good point. Indeed using abs() is safer.

Chrisir

Re: Creating a motion path

1 year ago

Also Check

http://forum.processing.org/topic/moving-circle-along-a-path#25080000001597301

For a more complex path

Top Reply