pac-man animation

Posted on
  • Hi All,

    I am trying to design a pac-man styled watch face with some animation.

    I am not very good in graphics related mathematics and need community help to achieve

    1- Arc/Pi drawing : As there is no function to draw (only drawCircle and drawEllipse is available)
    2 - image rotation

    Here is the work in progress link:­ml?codeurl=­anglejs-pacman-clock/blob/master/pacman.­js&upload

    What I want to do is to

    • draw the pac-man
    • move pac-man in the outermost circle so that pac-pam can eat the white dots.
    • animate pac-man for open-close his mouth

    I trying to create pac-man using image but it is not efficient when rotating it on to the path.

    Any suggestion or heads-up is appreciated.

    Many thanks!!

  • @Abhinav

    ...quite a long time ago, there was a conversation about Exploring 2.8" Color TFT Touch LCD by Pacman Game attempt

    It was quite a challenge then... and not much less today...I also had done is the labyrinth: an encode description with a drawing algorithm, but it was a bit overwhelming for the Original Espruino board - speed, memory - and - last but not least - the bit serial display (and the Espruoino driver module that puts out dot by dot).

    I can imagine for Bangle.js is to work with sprites... you already talk about this... but I would not rotate them but rather have 4 (or 8) predefined pacman images that I would just copy around. It may get tight with memory, but speed is much better and to me more important, and speed will also be better because byte serial vs bit serial communication w/ the display. Slowing down is the fact that you have to draw every moving thing twice: draw the to see it and draw to hide it, and this all over and over again...

    Enjoyed very much the clip you published.

    I watched the clip after I read and responded...

    To make it look cool, you may need more than 8 pac man images since your packman goes in a circle rather than just in x and y axis direction. I have alternative ideas for you:

    • Compose your packman with a filled circle overlaid by a triangle of different angles. I did this for 'simulating' ui buttons with a border. Outer, border-color filled rectangular w/ rounded corners overlaid by an inner/slightly smaller, body-color filled rectangular. With that I can have variable fat - or slim -border 'lines' for any size of button... and can make it even size dependent... and the filling is obviously not that slow... and for sure does not eat code space and JS cycles (it's all part of the Graphics object of Espruino firmware).

    • Define the vertices of a polygon with 12 or 20 or 24 'corners' - translate it with move and rotation and draw it in about three ways: plain filled 'cirle', 'cirle' with one wedge excluded and 'circle' with two wedges excluded (could also be 2 or 4 for polygon with higher of corners. I used a polygon instead of a circle in my ui elements - radio button - because resolution is so low and sufficient corners in a polygon make it look like a circle... ;-)

    If you make it smart and - may be - adjust the graphics layout accordingly / w/ compromise, you are up to something fast and entertaining...

  • Hi - what you've got in the link looks great!

    @allObjects idea of adding a black triangle to the circle sounds great.

    Basically you need to combine sin and cos to turn the angle you want into coordinates.

    I know it's a bit hard to know where to get started, but maybe try:

    function drawPacMan(ang, clear, mouthAngle) {
      ang = ang*Math.PI/180;
      g.setColor(clear?0:0xFD20); // black/orange
      var r = 108;
      var x = CenterX + Math.sin(ang)*r;
      var y = CenterY - Math.cos(ang)*r;
      if (clear) return;
      g.setColor(0); // black
      var a = mouthAngle*Math.PI/180;
        x+Math.cos(ang-a)*12, y+Math.sin(ang-a)*12,
        x+Math.cos(ang+a)*12, y+Math.sin(ang+a)*12
    var lastPacManAngle = 0;
    setInterval(function cb(){
      d = new Date();
      let s = d.getSeconds() + (d.getMilliseconds()/1000);
      let ang = s*6;
      drawPacMan(lastPacManAngle, true); // remove old
      drawPacMan(ang, false, 10+10*Math.sin(s*10)); // add new
      lastPacManAngle = ang;
  • Thanks @Gordon. This is exactly what I was looking for.

    Pacman looks great. I will now work on rest of the piece.

    You are awesome!!!

  • I'd be interested to see the difference in speed using pre-calculated sets of values vs calculation for every instance... in addition the use of all polygons (may be 2 polygons to keep them convex for simpler filling) vs. circle and polygon/triangle.

  • ...nice to see the black triangle entering the 3, 6 and 9 marker... shortening the triangle would make it less noticeable...

    Btw, I would prefer the marker for 12 re established after pac man passes the 1 second mark...

  • shortening the triangle would make it less noticeable...

    From line 169:


    And the pacman trajectory radius could be increased also:
    line 162: var r = 109;

  • Hah! That's really cool.

  • Thanks @Jean-Philippe_Rey for quick tip on shorter angle!!

    Thanks @allObjects for suggestion. I made some changes now!!­ml?codeurl=­anglejs-pacman-clock/blob/master/pacman.­js&upload

    I hope I will be able to PR when I will get my BangleJS in Mar!!

    I also would like to see running this code on beta bangleJS device!!

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview

pac-man animation

Posted by Avatar for Abhigkar @Abhigkar