Rotate arc in pacman animation

p5.js Coding Questions
1

Hi ive been reading the tutorial or example were you make an animation of a pacman bit opening and closing the mouth

The code:

function draw() {
  background(0);

  // Style the arc.
  //noStroke();
  fill(255, 255, 0);

  // Update start and stop angles.
  let biteSize = PI / 16; //smaller the denominator, bigger the bite
  let startAngle = biteSize * sin(frameCount * 0.1) + biteSize;
  let endAngle = TWO_PI - startAngle;

  // Draw the arc.
  arc(50, 50, 80, 80, startAngle, endAngle, PIE);
  rotate(90);
}

As you can see im trying to rotate the pacman, in order to move to the left, up and down… This animation is for moving right… how can i do it ? The best way ??

Thanks

2

(post deleted by author)

3

The following technique will allow you to keep the animation while translating, rotating the arc between pushMatrix()…popMatrix:

float startAngle;
float endAngle;
float biteSize;

void setup() {
  size(410, 200);
}

void draw() {
  background(0);
  fill(255, 255, 0);
  // Update start and stop angles.
  biteSize = PI / 16; //smaller the denominator, bigger the bite
  startAngle = biteSize * sin(frameCount * 0.1) + biteSize;
  endAngle = TWO_PI - startAngle;
  // Draw the arc.
  arc(50, 50, 80, 80, startAngle, endAngle, PIE);
  
  pushMatrix();
  translate(150,50);
  rotate(radians(90));
  arc(0, 0, 80, 80, startAngle, endAngle, PIE);
  popMatrix();
  
  pushMatrix();
  translate(250,50);
  rotate(radians(180));
  arc(0, 0, 80, 80, startAngle, endAngle, PIE);
  popMatrix();

  pushMatrix();
  translate(350,50);
  rotate(radians(270));
  arc(0, 0, 80, 80, startAngle, endAngle, PIE);
  popMatrix();

pm
pm814×212 9.63 KB