P5 back and forth animation

Amorris

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?

TfGuy44

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)) );
}

Amorris

That runs very slow. Is there a way to make this run smoother?

kfrajer

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);
}