Rotate arc in pacman animation

p5.js Coding Questions
42

This is one technique using pushMatrix()…rotate()…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();
}

Alternate technique by changing start/end angles (converted to p5.js):

var startAngle;
var endAngle;
let biteSize;

function setup() {
  createCanvas(450, 200);
}

function draw() {
  background(0);
  fill(255, 255, 0);
  biteSize = PI / 16; //smaller denominator => bigger bite
// Right  
  startAngle = radians(12) + biteSize * sin(frameCount * 0.1);
  endAngle = radians(348) - biteSize * sin(frameCount * 0.1);
  arc(50, 50, 80, 80, startAngle, endAngle, PIE);
// Left
  startAngle = radians(-168.75) + biteSize * sin(frameCount * 0.1);
  endAngle = radians(168.75) - biteSize * sin(frameCount * 0.1);
  arc(150, 50, 80, 80, startAngle, endAngle, PIE);
// Up
  startAngle = radians(-78.75) + biteSize * sin(frameCount * 0.1);
  endAngle = radians(258.75) - biteSize * sin(frameCount * 0.1);
  arc(250, 50, 80, 80, startAngle, endAngle, PIE);
// Down
  startAngle = radians(-258.75) + biteSize * sin(frameCount * 0.1);
  endAngle = radians(78.75) - biteSize * sin(frameCount * 0.1);
  arc(350, 50, 80, 80, startAngle, endAngle, PIE);  
}

pman
pman818×202 5.99 KB

43

@svan as promised:

imagen
imagen1747×1161 192 KB

Can you explain please the idea bitesize*sin framecount0.1 where came from… ?

Also remember that you dont need to use radians(…) if you use angleMode(DEGREES); from that instruction and below…would use DEGREES in rotate and similar instructions that need values in radians.

Another detail, it seems that popMatrix and pushMatrix no longer exist…is pop and push

Its been a really interesting post ( created by me :wink: )

Thanks

44

angleMode() doesn’t exist on PDE’s Java Mode’s API:

Indeed for p5.js it has always been push() & pop().

However on Java Mode:

  1. pushMatrix()
  2. popMatrix()
  3. pushStyle()
  4. popStyle()

have always existed!

Actually push() & pop() were much later additions on Java Mode for p5.js interoperability.

4 Likes
45

Where did you get the source code initially? Usually there would be a reference to where the code originated.

Here is one reference on using sin() to drive animation: https://stackoverflow.com/questions/40291618/animating-sine-waves-in-processing