#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# P5 back and forth animation

edited January 2018

I have this sketch:

``````let h = 0;
let k = 0;
let step = 0.05;
let r = 200;
let points = [];
let i = 0;
let forward = true;

function setup() {
createCanvas(windowWidth, windowHeight);
}

function draw() {
background(81);
translate(width / 2, height / 2);
noFill();
strokeWeight(1);
stroke(255);

beginShape();
for (let theta = TWO_PI; theta > PI; theta -= step) {
let x = h + r * Math.cos(theta);
let y = k - r * Math.sin(theta);
vertex(x, y);
points.push(createVector(x, y));
}
endShape();

strokeWeight(10);
stroke(0);
point(points[i].x, points[i].y);
}
``````

That shows a dot moving from one side of an arc to another. When it gets to the end, however it teleports back to the start. I want to make it swing back and forth on the arc. I have tried it using the length of the points array, but that seems to be massively overflowed and it contains duplicate points. Is there a way to do this, or a better way to do what I have done?

Tagged:

This is much easier:

``````var a;

function setup() {
createCanvas(windowWidth, windowHeight);
}

function draw() {
background(81);
translate(width/2.0,height/2.0);
stroke(255);
strokeWeight(1);
noFill();
arc(0,0,200,200,0,PI);
stroke(0);
strokeWeight(10);
a = map(millis()%3600,0,3600,0,TWO_PI);
point( 100*cos(a), abs(100*sin(a)) );
}
``````
• That runs very slow. Is there a way to make this run smoother?

• For smoother, I suppose you can change the value of step. I the following example I am using draw to update the position. I draw the arc in a second graphics buffer in setup and draw in in draw().

Kf

``````let step = 0.05;
let r = 100;
let points = [];
let i = 0;
let forward = true;
var pg;

function setup() {
var can=createCanvas(640, 480);

pg = createGraphics(can.width, can.height);
pg.background(81);

print("1: "+width+" "+height);
print("2: "+can.width+" "+can.height);
print("3: "+pg.width+" "+pg.height);

pg.noFill();
pg.strokeWeight(1);
pg.stroke(255);
pg.beginShape();
pg.translate(width / 2, height / 2);
//pg.ellipse(0,0,100,100);
for (let theta = TWO_PI; theta > PI; theta -= step) {
let x =  r * Math.cos(theta);
let y =  -r * Math.sin(theta);
pg.vertex(x, y);
points.push(createVector(x, y));
}
pg.endShape();
}

function draw() {
image(pg, 0, 0);
translate(width / 2, height / 2);

if (frameCount%1==0) {  //Update speed
if (forward)  i++;
else   i--;
}

if (i>=points.length) {
forward=false;
i=i-2;
}

if (i<0) {
forward=true;
i=i+2;
}

strokeWeight(10);
stroke(0);
point(points[i].x, points[i].y);
}
``````