BangleJS 2 Emulator slows down when writing an app

Hi all,

Hope you are doing well. I bought myself a BangleJS2 over a year ago with the goal of writing my own app and finally I have gotten to it! I'm not a JS dev in any respects so, I'm quite new to the language in a manner of speaking but have been quite exposed to languages like C and Python so can get my way round the basic syntax e.t.c.

I have been trying to use the WebIDE to get an app going and have been working on a function to draw arcs, which I hope to upstream to the main repo, but have met a few hiccups along the way. For a start, I wrote this app in Javascript, and have it as follows:

function deg_to_rad(deg){
  return deg * PI / 180;
}

function drawArc(cx, cy, x, y, t, col) {
  const dt = 0.01;

  let radius = Math.sqrt(Math.pow(cx-x,2) + Math.pow(cy-y,2));

  let start_angle = Math.atan2(y - cy, x - cx);
  let end_angle = start_angle + deg_to_rad(t);

  for (let angle = start_angle; angle < end_angle; angle += dt ) {
      let x_cord = parseInt(radius * Math.cos(angle));
      let y_cord = parseInt(radius * Math.sin(angle));

      g.setPixel(x_cord + cx, y_cord + cy, col);
  }
}

So with that in mind, here is what I have done with it, to test it out - every so often, I increment one of 3 counters which will increase the radius of the arc drawn (watch video for what I mean). You will notice that at some point, the drawing starts t stutter. I'd love to know why this is the case, and how I could avoid this? (Oh, I'm working on a line thickness feature, hence why there are two lines per point). I'd also appreciate some input on the value for dt to use given it's in radians (and Pi is quite the relatively small number)

I am wondering if the JS version of this will perform worse than the C version of this function. I'm just finishing up the last bits before posting a PR in the Espruino repository but don't yet know how to test this code on my device. I'm also trying to get some form of a local dev environment going to test out this code. Any advice or help on this issue would be greatly appreciated.

1 Attachment

• Screencast from 01-04-2025 04:58:44 PM.webm

Hey @ramzy23,

Your code is slow because of overdraw. Overdraw means that you paint the same pixel over and over again, no matter if it has already been painted before. Since you step through your circle at 0.1 degree increments, it gets really expensive to draw your circle even in the emulator. The real hardware watch would take a lot longer still.

I recommend looking at drawing algorithms using the implicit circle equation or the bresenham algorithm.

There is also https://github.com/espruino/BangleApps/blob/master/modules/graphics_utils.js. Maybe you can use that or modify it to have the features you need.
As for "local" development a relatively simple way is to check out the BangleApps and EspruinoWebIDE repos with their submodules and start a webserver in the parent folder of those. I use python3 -m http.server 4001 --bind 127.0.0.1. You can then access app loader and IDE at localhost:4001/BangleApps and localhost:4001/EspruinoWebIDE. Any webserver should work for that. It should be on the same machine as you work on since hosting it at another IP means you need to setup certificates for web bluetooth to work. There is an exception in the security rules for localhost.

I recommend looking at drawing algorithms using the implicit circle equation or the bresenham algorithm.

The Bresenham algorithm is used in Graphics.drawEllipse
https://github.com/espruino/Espruino/blob/1d58afe3a70941735f15771376c841e6e57b4990/libs/graphics/graphics.c#L532
however for drawing just part of ellipse it could be tricky. simple and maybe still quick could be to compute just start and end coordinates of the arc and modify ellipse pixel drawing to skip drawing when x/y is outside when compared to start/end

some discussion here
https://stackoverflow.com/questions/52484934/how-to-draw-elliptical-sector-with-bresenhams-algorithm

EDIT: there is also https://www.espruino.com/Reference#l_Graphics_setClipRect so that could work to limit drawEllipse/drawCircle

EDIT: there is also https://www.espruino.com/Reference#l_Graphics_setClipRect so that could work

That would work out really nicely - figure out the right coordinates needed for g.drawEllipse and then use g.setClipRect to drop it drawing where you don't want it