Best way to dither black and white pattern

[espruino-discuss2]

Posted at 2024-08-13 by ungoosed

I want to fill the background of my app with grey. Would it be more efficient to use an image, or is there something that can generate that b/w checkerboard pattern?

[espruino-discuss2]

Posted at 2024-08-13 by @thyttan

g.setColor(1,1,1).fillRect(0,0,40,40) - will fill a 40px square white
g.setColor(0,0,0).fillRect(0,0,40,40) - will fill a 40px square black
g.setColor(.2,.2,.2).fillRect(0,0,40,40) - will fill a 40px square dithered grey

So maybe play around with that? :)

---

Posted at 2024-08-13 by ungoosed

cool, thanks!

---

Posted at 2024-08-13 by ungoosed

just curious, is there a way to do this with black and transparency?

---

Posted at 2024-08-13 by @thyttan

I don't know. But have a look at the reference on the graphics object: https://www.espruino.com/ReferenceBANGLEJS2#Graphics :)

---

Posted at 2024-08-15 by @gfwilliams

I'm afraid there isn't a way to dither with transparency at the moment, no.

The best solution would be to create a dithered image that was transparent with https://www.espruino.com/Image+Converter then render that.

https://www.espruino.com/ReferenceBANGLEJS2#l_Graphics_drawImages does have some interesting filter options so you might be able to combine layers of images to do what you want?

There's also the option of rendering to an offscreen graphics (Graphics.createArrayBuffer), setting .transparent=... to make a certain color transparent, and then rendering that to the screen (but only dithering when rendering to the actual screen is supported)