Bug: Execution interrupted while drawing

You are reading a single comment by @stweedo and its replies. Click here to read the full conversation.

•

Gordon

That feels like it's quite a rare thing to want to do - I could imagine maybe having a 'mask' image where you set the areas you want to write to though?

...but personally I'd have thought that extending drawImages would be better - so we could allow each image to have a 'blend mode', much like you might blend layers in photoshop/Gimp.

In the case above, you could have an XOR mode, but you could also do AND/OR or even just using an image to set the transparency, which would do what you want too

•

stweedo in reply to @Gordon

Yeah, I was using setClipRect as a mask essentially and layering the draws to create the animation.


const SCREEN_WIDTH = g.getWidth();
const SCREEN_HEIGHT = g.getHeight();
const BOX_HEIGHT = 50;
const NUMBER_SIZE = 30;
const ANIMATION_DURATION = 3000;

const BOX_DIMENSIONS = {
  left: 0,
  top: SCREEN_HEIGHT / 2 - BOX_HEIGHT / 2,
  width: SCREEN_WIDTH,
  height: BOX_HEIGHT
};

let numberValue = 0;
let startTime = 0;
let animationInterval;

function setRect(method) {
  g[method](BOX_DIMENSIONS.left, BOX_DIMENSIONS.top, BOX_DIMENSIONS.width, BOX_DIMENSIONS.top + BOX_DIMENSIONS.height);
}

function drawNumber(yPosition, color) {
  g.setColor(color);
  g.setFont("Vector", NUMBER_SIZE);
  g.drawString(numberValue.toString(), SCREEN_WIDTH / 2 - g.stringWidth(numberValue.toString()) / 2, yPosition);
}

function animateNumber() {
  const now = Date.now();
  const progress = Math.min(1, (now - startTime) / ANIMATION_DURATION);
  g.clear();

  const currentY = (SCREEN_HEIGHT - NUMBER_SIZE) * progress;

  drawNumber(currentY, g.theme.fg);

  setRect('fillRect');
  setRect('setClipRect');

  drawNumber(currentY, g.theme.bg);

  g.setClipRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
  
  g.flip();

  if (progress < 1) {
    animationInterval = setTimeout(animateNumber, 1000 / 60);
  } else {
    numberValue = Math.floor(Math.random() * 100);
    startTime = Date.now();
    animationInterval = setTimeout(animateNumber, 500);
  }
}

startTime = Date.now();
animateNumber();

But it sounds like extending drawImages like you said could be way more versatile.

Bug: Execution interrupted while drawing

About

Espruino