P5 back and forth animation

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?

Answers

  • Answer ✓

    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);
    }
    
Sign In or Register to comment.