Web World

Obscure Underscore

2015-09-23T09:17:00.001-05:00

Ever use the underscore methods "default", "clone", "extend"? How do they compare to Object.create?

Here is a fiddle to experiment with that.

Canvas Simplified

2012-08-22T00:02:00.000-05:00

Canvas Simplified

Canvas has some really complex examples.

This post is intended to explain using Canvas to animate a space ship with javascript for the non-expert.

I earlier blogged how to animate using SVG. With SVG you can get the image you drew by it's svg-dom id and delete it, then draw another one. Or just update its x,y coordinates!

Canvas however is a little harder. You have to draw over the old image to erase it, then draw the new one at the new coordinates.

You want to draw whatever was behind the image in order to erase it. For my example I used a solid white background so drawing a solid white image the same size as the original is my approach.

Here it is on jsfiddle in case you want to just see it run. http://jsfiddle.net/uponthecouch/2JXJr/4/

Sometimes it is handy to have the entire thing in a single file such as you could put in an eclipse Static Web Project and try out by just pressing the play button right on our own machine:

 
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>SVG attempt</title>
  <style>
   #canvasContainer 
   {
       width: 600px;
       height: 200px;
       background-color: white;
       border:1px solid black;
   }
  </style>
 </head>
 <body>
  <canvas id="canvasContainer">
  </canvas>
  <p>X coordinate: <span id="xcoor"></span>
  <p>Y coordinate: <span id="ycoor"></span>
  <script type="text/javascript">
   var canvas = document.getElementById("canvasContainer");
   var context = canvas.getContext('2d');
   var image = new Image();
   var clearImage = new Image();
   clearImage.src = "icons/shipClear.png";
   var x=0;
   var y=0;
   image.onload = function()
   {
    context.drawImage(image, x, y);
   };
   image.src = 'icons/shipNE.png';
   var timer = self.setInterval(function()
   {
       move_image();
   }, 100);
   
   function move_image()
   {
    context.drawImage(clearImage, x, y);
    x += 2;
    y += 2;
       if (y>200)
       {
           timer = window.clearInterval(timer)
           return;
       }
       context.drawImage(image, x, y);
       document.getElementById("xcoor").innerHTML = x;
       document.getElementById("ycoor").innerHTML = y;
   }
  </script>
 </body>
</html>

SVG Simplified

2012-08-20T15:20:00.001-05:00

SVG has some really complex examples.

This post is intended to explain using SVG with javascript for the non-expert.

Here is a full working example showing how to place an svg element on an html page, create an svg image element, refer to it in javascript thru the SVG-DOM, and move an svg image element on the page such as one might in an arcade game.

This example is available as a jsfiddle here: http://jsfiddle.net/uponthecouch/pK84Y/

Sometimes it is handy to have the entire thing in a single file such as you could put in an eclipse Static Web Project and try out by just pressing the play button right on our own machine:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>SVG attempt</title>
  <style>
   #svgContainer 
   {
       width:600px;
       height:200px;
       background-color:#EEEEEE;
       border:1px solid #c3c3c3;
   }
  </style>
 </head>
 <body>
  <svg id="svgContainer" xmlns="http://www.w3.org/2000/svg" version="1.1">
  </svg>
   <p>X coordinate: <span id="xcoor"></span>
   <p>Y coordinate: <span id="ycoor"></span>
   <script type="text/javascript">
    var container = document.getElementById("svgContainer");
    var x = 0;
    var y = 0;
    var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
    image.setAttribute('height','10');
    image.setAttribute('width', '10');
    image.setAttribute('id','testimg');
    image.setAttribute('x', x);
    image.setAttribute('y', y);
    image.setAttributeNS('http://www.w3.org/1999/xlink','href',"http://i50.tinypic.com/24c8twj.jpg");
    container.appendChild(image);
    var timer = self.setInterval(function() 
    {
        move_image(x += 2, y += 2);
    }, 100);
    
    function move_image(x, y)
    {
        if (y>200)
        {
            timer = window.clearInterval(timer)
            return;
        }
        image.setAttribute('x', x);
        image.setAttribute('y', y);
        document.getElementById("xcoor").innerHTML = x;
        document.getElementById("ycoor").innerHTML = y;
    }
  </script>
 </body>
</html>

Questions to ask might be:

Why use namespace specific methods for creating the element, and specifying the image source, but not the other attributes?

Can SVG, html, and even canvas elements exist on the same page? On top of one another?

A question to be answered (hopefully) in a future post:

Which is better for moving things like ships around on a page, Canvas or SVG? Things like hit detection, bullets/projectiles, enemies all seem to point to SVG, surprisingly depending on the simplicity of the background Canvas may be more performant ...

Here is a link to my post about using Canvas to do the same thing.

Here is the same thing, done differently:

The svg image element is moved by deleting the existing one and creating a whole new one: this serves to show how to locate an svg element and delete it if nothing else. It is surprisingly hard to find simple examples of how to do this sort of thing.

Here is the Jsfiddle showing this alternative technique:
http://jsfiddle.net/uponthecouch/M9LF7/

This is the javascript, the html and css is unchanged from the first example:

var container = document.getElementById("svgContainer");
var x = 0;
var y = 0;
var image = null;
var timer = self.setInterval(function() 
{
    create_image(x += 2, y += 2);
}, 100);

function create_image(x, y) 
{
    if (y>200)
    {
        timer=window.clearInterval(timer)
        return;
    }
    console.log("x,y = " + x + "," + y);
    if (image != null) 
    {
        var parent = image.parentNode;
        console.log(parent);
        parent.removeChild(image);
    }
    image = document.createElementNS("http://www.w3.org/2000/svg", "image");
    image.setAttribute('height', '10');
    image.setAttribute('width', '10');
    image.setAttribute('id', 'testimg');
    image.setAttribute('x', x);
    image.setAttribute('y', y);
    image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "http://i50.tinypic.com/24c8twj.jpg");
    container.appendChild(image);
    document.getElementById("xcoor").innerHTML = x;
    document.getElementById("ycoor").innerHTML = y;
}

2010-03-20T19:42:00.004-05:00

I just returned from TheServerSide Java Symposium Conference in Las Vegas, it was a really great conference! Here I will try to summarize some of messages I perceived there but if want to get deeper more complete coverage, I can't do better than one of the presenters there, Matt Raible. So go to his blog for his take, transcripts of the keynotes, and everything Raible: http://raibledesigns.com/

The slideshows from the breakout sessions are posted by TheServerSide.com here: http://www.slideshare.net/javasymposium - really *REALLY* good stuff in some of those.

Gosling gave the main keynote and he recommended some sites I totally had not previously paid attention to that are very interesting:

Open source version of java itself with stuff about hacking it and just all sorts of stuff.

Open source J2EE 6 stuff which includes Glassfish, WebBeans, JPA 2.0, JSF 2.0 and needless to say lots more. Lots of stuff came together all at once on Dec. 10th 2009 regarding java 6 such as Glassfish (the open source Enterprise server which implements the Java EE 6 platform) and Netbeans (the open source IDE that provides complete support for Java EE 6 and Glassfish).

The Java Developer Warehouse - sorta iTunes for java apps.

Several Presenters mentioned various technologies that caught my attention: NoSql, BigTable, infinispan, REST-MQ, REST-TX, Speed Tracer, JRebel, javax.script.package, map/reduce. Not necessarily new to me but it made me realize all the glorious architectural alternatives.

Map/Reduce was mentioned extensively - keep in mind the conference was called "ServerSide" - and is available in flavors other than the original Google invention such as one from Amazon.

The conference had numerous presentations either about ESB or referencing ESB which successfully introduced that technology to my radar.

The Flex-GWT smackdown was really great - things I learned there:

gwt does REST flex doesn't
flex can't do iphone, Android, PalmPre, etc
flex has no right to left language support
flex has issues printing from the browser

Google Wave seems to be standard among bleeding edge types.

The breakout about "Hidden Web Services" was very interesting: about the W3C RDFa vs Microformats.

And lastly (for this post) I discovered that HTML5 wasn't unusable or incompatible - just look at existing websites and examine their doctype - all the majors are already using HTML5.

That's all I have notes about - my main note was to be certain to rewatch all the slideshows including the ones I missed.

owen