grelf

Members
  • Content Count

    34
  • Joined

  • Last visited

  • Days Won

    2

grelf last won the day on February 16 2019

grelf had the most liked content!

About grelf

  • Rank
    Advanced Member

Contact Methods

  • Website URL
    https://www.grelf.net

Profile Information

  • Location
    NE England

Recent Profile Visitors

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

  1. 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.
  2. 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.
  3. grelf

    Image data

    No. In fact it may be faster (depending on browser implementation) because drawImage() is more flexible, capable of rescaling the image.
  4. 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.
  5. 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);
  6. 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
  7. 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; // 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.setPixel = function (x, y, rgba) { if (0 === rgba [3]) return; var i = (this.width * Math.round (y) + Math.round (x)) * 4; this.data [i] = rgba [0]; this.data [i + 1] = rgba [1]; this.data [i + 2] = rgba [2]; this.data [i + 3] = rgba [3]; }; Generally when I am wanting to do things on the canvas I do it in stages, some stages use standard context methods, other stages switch to pixel data as above. Keep the number of switches small.
  8. 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.
  9. 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.
  10. 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 functions, promises, etc). I have found this exercise quite educational. I now have a better appreciation of why three.js, for example, does things the way it does.
  11. It looks to me as if the problem is that you have given absolute paths to the files, specifying local disc C:. You should use paths relative to your HTML file.
  12. That's a good question. I have the impression that many people plunge into WebGL because it's the thing to do, without considering whether they really need it. They then present themselves with a steep learning curve which may well put them off the whole thing. If you go to my home page, grelf.net, you will find links to several programs written in plain HTML5/JavaScript. They use the 2D canvas API and no external libraries or frameworks (not even jQuery). My examples all use canvasses much larger than the 240x136 that you are contemplating. I am happy with their performance. Indeed I am impressed by how fast current browsers run such programs on all devices I have tried, even on phones.
  13. I have explained my technique in some detail at https://www.gamedev.net/blogs/entry/2268999-a-simple-way-to-generate-limitless-terrain-in-real-time-in-plain-html5javascript/
  14. It might help us to reply if we knew why you are drawing it "pixel by pixel". Why not canvas.context.drawimage ()? Enlarging an image by a factor of 3 is unlikely to produce a sharp result though. Better to start with the larger version and then reduce if or when necessary.
  15. Arjun, I have previously given in these pages links to my JavaScript course, which is completely free at https://www.grelf.net/jscourse/start.html I would be pleased to get some feedback about it. Some people seem to find it useful.