Jump to content


  • Content Count

  • Joined

  • Last visited

  • Days Won


grelf last won the day on February 16 2019

grelf had the most liked content!

About grelf

  • Rank
    Advanced Member

Contact Methods

  • Website URL

Profile Information

  • Location
    NE England

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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 an
  2. It would not be difficult to write a program that scanned an HTML file looking for <link> and <script> elements, finding the relevant files from the attributes and replacing the elements with the file contents. But why would you want to? There are several advantages in having things in separate files. For example, if you change something in one file the user does not have to downlaod everything again, just the one file. Do you want to combine the files for sending to someone? That is easily done by making a ZIP file.
  3. 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 fr
  4. Interestingly MDN (at https://developer.mozilla.org/en-US/docs/Web/API/ImageData ) which I regularly use as the best reference, makes no mention of any such limitation. Each parameter is supposed to be unsigned long (4 bytes). However, do you really have a use for an image which is more than 32k wide or high?
  5. An expanded and improved version of the description of my technique is now at https://grelf.net/forest_terrain.html
  6. grelf

    Image data

    Ah, yes that makes sense. I was just about to write that the "cross-origin" thing was a clue. I use Netbeans IDE (free) which has its own lightweight localhost server so I can run tricky things from local files without me having to set anything else up.
  7. grelf

    Image data

    I would create the onload function before setting flag.src, so the event handler is available before loading starts. I am not sure whether this will solve your problem but it might.
  8. grelf

    Image data

    No. In fact it may be faster (depending on browser implementation) because drawImage() is more flexible, capable of rescaling the image.
  9. grelf

    Image data

    putImageData() into the main canvas using the ImageData object that you have been working with from the hidden canvas. The ImageData object, once obtained, is not tied to any particular canvas, it is just a collection of pixel data.
  10. grelf

    Image data

    var cnv = document.createElement ('canvas'); cnv.width = im.width; cnv.height = im.height; var g2 = cnv.getContext ('2d'); g2.drawImage (im, 0, 0);
  11. grelf

    Image data

    Load the image When it has loaded create an off-screen canvas of the same width and height Get the context of the canvas Draw the image into it getImageData() and use the methods I showed before to access the pixels
  12. grelf

    Image data

    Yes. context.getImageData() gets you an object with 3 properties: width, height and data. The last of these is an array of pixel data. 4 elements per pixel: red, green, blue and alpha. The last means transparency. You can read and write the elements of this array as you like and then context.putImageData() when complete (don't put after every change - performance would be awful). I usually add 2 methods to ImageData for pixel read/write: /* Returns an array with 4 elements: RGBA. */ ImageData.prototype.getPixel = function (x, y) { var i = (this.width * Math.round (y) + Math.round (x)) * 4;
  13. mattstyles' comment above is spot on. Javascript is very much event driven. When something happens (user key, mouse click, touch on screen, window resizing, ... a long list) it starts a stream of processing that will end with some output: usually a switch of display buffers so that what you have been building during the stream becomes visible. Then it stops until there is another event. To create game loops that next event could be caused by the system itself if you call setTimeout() or requestAnimationFrame() somewhere in your processing.
  14. The rotation will always be about the origin (0, 0). If you want to rotate about the centre of an object you must first translate the centre to the origin, do the rotation and translate back again. Javascript rotation certainly does work. I don't find the w3schools site very good - incomplete and not fully up to date. I use Mozilla's site for reference and the occasional tutorial. They cover rotation very clearly on this page: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations Mozilla is good for finding out which browsers support newer features too.
  15. GR3D is a demonstration of what can be done in a simple 2D canvas. No WebGL, framework or other library is used. Some objects will explode when clicked upon. Other things explode at certain times (well, frame counts). GR3D My code is easily discoverable if you look at the HTML page source. I have not minified the JavaScript files because I want to help others. You are free to use my code and build upon it in any way you wish. It is written in original-style JavaScript, as simply as possible, with none of the syntax complications added to the language in recent years (no async fu
  • Create New...