
• #2
@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.
...so 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, bordercolor filled rectangular w/ rounded corners overlaid by an inner/slightly smaller, bodycolor 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...

• #3
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; g.fillCircle(x,y,7); if (clear) return; g.setColor(0); // black var a = mouthAngle*Math.PI/180; g.fillPoly([ x,y, x+Math.cos(anga)*12, y+Math.sin(anga)*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; },100);

• #5
I'd be interested to see the difference in speed using precalculated 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.

• #6
Posting some updates!!
Have a look and share screenshots on actual BangleJs beta device!!

• #7
...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...

• #8
shortening the triangle would make it less noticeable...
From line 169:
g.fillPoly([x,y, x+Math.cos(anga)*8, y+Math.sin(anga)*8, x+Math.cos(ang+a)*8, y+Math.sin(ang+a)*8]);
And the pacman trajectory radius could be increased also:
line 162:var r = 109;

• #9
Hah! That's really cool.

• #10
Thanks @JeanPhilippe_Rey for quick tip on shorter angle!!
Thanks @allObjects for suggestion. I made some changes now!!
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!!

• #11
Ask and you shall receive...
Hi All,
I am trying to design a pacman 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:
https://www.espruino.com/ide/emulator.html?codeurl=https://github.com/abhigkar/banglejspacmanclock/blob/master/pacman.js&upload
What I want to do is to
I trying to create pacman using image but it is not efficient when rotating it on to the path.
Any suggestion or headsup is appreciated.
Many thanks!!