Search the Community

When using the 2D context of a canvas each pixel has 4 components: red, green, blue and alpha (transparency). Each has a range from 0 to 255 (unsigned byte). Access to the data is via an object of type ImageData which has 3 properties: width, height and data. Data has the pixel values sequentially scanning horizontally and then downwards from top left. The data array therefore has a length equal to 4 times the number of pixels. It is possible to add getPixel() and setPixel() methods to the ImageData prototype but I will not call them exactly that in case the standard someday adds these anyway. So I could simply write /** Returns an array with 4 elements: RGBA. */ ImageData.prototype.grGetPixel = function (x, y) { var i = (this.width * Math.round (y) + Math.round (x)) * 4; // NB: JavaScript will try to index arrays with non-integers! return [this.data [ i ] , this.data [i + 1], this.data [i + 2], this.data [i + 3]]; }; /** rgba is an array with 4 elements: RGBA. * Ignores transparent pixels (A = 0). */ ImageData.prototype.grSetPixel = function (x, y, rgba) { var i = (this.wd * Math.round (y) + Math.round (x)) * 4; if (0 === rgba [3]) return; this.data [ i ] = rgba [0]; this.data [i + 1] = rgba [1]; this.data [i + 2] = rgba [2]; this.data [i + 3] = rgba [3]; }; BUT what about using the alpha transparency value? How is it supposed to be applied? Trying to find an algorithm in the working HTML5 standard, or in the W3 CSS standards or on the excellent MDN site all eventually lead to a short paragraph in the W3C standard for SVG: https://www.w3.org/TR/SVG11/masking.html#SimpleAlphaBlending . That says that it assumes the alpha to be premultiplied. To find out what that means see https://en.wikipedia.org/wiki/Alpha_compositing . Thanks to a section on another Wikipedia page (https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending) I was able eventually to work out what I wanted to do. The next difficulty was that the alpha part of a canvas pixel has integer values in the range 0..255 but the compositing formulae need decimal multipliers in the range 0..1. Did I want to do a division, a / 255, every time I want to set a pixel? Certainly not: division is slow. Fortunately there are only 256 cases to consider so the solution is to set up a look-up table (LUT) when my program starts: var alphaLUT = new Array (256); // Converts index 0..255 to 0..1 for (var i = 0; i < 256; i++) alphaLUT [ i ] = i / 255; So my grSetPixel finally became /** rgba is an array with 4 elements: RGBA. * Ignores completely transparent pixels (A = 0). */ ImageData.prototype.grSetPixel = function (x, y, rgba) { var i = (this.width * Math.round (y) + Math.round (x)) * 4; if (0 === rgba [3]) return; var r = this.data [ i ] ; // Existing value, to be composited var g = this.data [i + 1]; var b = this.data [i + 2]; var a01 = alphaLUT [rgba [3]]; var a10 = 1 - a01; this.data [ i ] = (a10 * r + a01 * rgba [0]) & 0xff; this.data [i + 1] = (a10 * g + a01 * rgba [1]) & 0xff; this.data [i + 2] = (a10 * b + a01 * rgba [2]) & 0xff; this.data [i + 3] = 255; }; and it works a treat. I wanted to put glass signs in my forest. (Yes, I am oldfashioned - I see nothing wrong with var.)

Hi all I'm CodingButter I have been developing a 2d game engine from scratch. I wanted to get some opinions about the tick and render loops. I currently have my render loop executing as fast as requestAnimationframes will let me. And I've also trigger my ticks with setTimeout. I've noticed by doing this I am consistently getting 200 ticks per second. I was wondering what the drawbacks would be for using setTimeout in this way. I personally don't seem to see anything but improvement to my game behavior. but I'm sure there is something big i'm overlooking performance wise. Any thoughts. Also Excited to find a community to chat with. Codesandbox.io Link Twitch Discord

I have been experimenting with ways to generate moon-style craters as height maps in a reasonable processing time. The best method I have come up with so far uses 2D gaussian functions (2DGF). I set several parameters for a crater, each random within a certain range: crater radius, peak height, rim width and rim height (in arbitrary units for now). All my 2DGFs are circular in cross-section, so there is a single radius. My algorithm works as follows. Step 1. An inverted 2DGF with half-height radius (HHR) equal to the crater radius and height equal to the peak height is subtracted from the terrain, forming a bowl. The volume of this bowl is proportional to the radius squared (see the Wikipedia article again) so this total volume is noted. Step 2. The central peak is added as a positive 2DGF with HHR equal to the crater rim width and the peak height was given. The volume of this 2DGF is subtracted from the total volume noted in step 1. Step 3. Starting at a random bearing, positive 2DGFs are added with HHR equal to the crater rim width and height equal to the given rim height. The positions of these 2DGFs are random around the circumference of the crater. The volume of each is subtracted from the total volume noted before. This continues in a loop until the volume goes below zero. In this way the volume of material removed in step 1 is replaced by the peak and rim, which must happen in the real process of bombardment. (The proportionality factor is the same for all the volumes so there is no need to calculate it.) You can see my working version at grelf.net/contours/moon.html . This first shows a perspective view of a single (random) crater. From there you can go to a map and clicking the map enables you to create further craters, bombarding the moon. You can also see the height map in various formats (contours or height as brightness or colour). The code is an extension of 2 earlier contouring projects of mine: see grelf.net/contours/auto.html or simply grelf.net/contours/ . All are written in vanilla JavaScript in a standard 2D canvas. All use Paul Bourke's brilliant 1987 algorithm for drawing the contours. (I am fascinated by contour maps.) I realise that my crater rims are not jagged enough, so there is still work to be done. My source code is easily discoverable from the HTML page and I have deliberately not minified or obfuscated it - use it and improve it please. I want to encourage creative programming, particularly in plain HTML/JavaScript.

Hi all I have a question on hot to make a desktop browser game mobile friendly, ie, be able to use touch gestures. I recently published my Breakout based browser game: And now I plan to make a few enhancements starting with making the game mobile friendly, so i will need the ability for user's to have touch interaction.) As this game was built using vanilla JavaScript, are there any libraries or tutorials that anyone could recommend? Thanks. LS

So more than a year ago, I started learning javascript and had to build something using vanilla javascript. I thought it would be cool and fun to build a game and decided to build a Mario clone. But you know, only the Mario gameplay wouldn't be enough for the project. So I decided to add a level editor where you could save your levels that you can create yourself. Found the sprites and images from google, forgot the exact source . Also I had no idea "Mario Maker" already existed. Only found out after this project was completed. Anyways, this fun little project was completed a year ago, with the help from html5gamedevs of course, and i hadn't actually shown to anybody outside my circle. So here it is, do give it a look. It's not much but it's something I am very proud of. Link to the game: http://pratishshr.github.io/mario-maker/ Link to Repo: https://github.com/pratishshr/mario-maker