« Colorspace 1.5, Layout 3.2, FX 3.2 and Darkstar 20070905 | Main | Using Quicktime to display CMYK images »

Color masking and sprite tiles

Wow.. written by a high school senior. The mask and sprite code is really cool. So I made a Javascript “mashup” in Darkstar FX.

One thing that is strange. My color picker (Colorspace) reports that the green in the Mario tile is #008500 in Firefox but #007300 when I paint the same image in Java 2D or open the file in Photoshop.

mario2.png

mario_fx.png

mask.js
importPackage(Packages.java.io)
importPackage(Packages.java.awt)
importPackage(Packages.java.awt.image)
importPackage(Packages.java.awt.geom)
importPackage(Packages.javax.imageio)

function loadImage(ref) {
    var bimg;
    try {
        // read images from desktop folder
        bimg = ImageIO.read(new File(System.getProperty("user.home") +File.separator+"Desktop"+File.separator+ ref));
        //context.info(bimg)
    }
    catch(e) {
        e.printStackTrace();
    }
    return bimg;
   }
function makeColorTransparent(ref, color) { 
    image = loadImage(ref); 
    dimg = new BufferedImage(image.getWidth(), image.getHeight(), BufferedImage.TYPE_INT_ARGB); 
    g = dimg.createGraphics(); 
    g.setComposite(AlphaComposite.Src); 
    g.drawImage(image, null, 0, 0); 
    g.dispose(); 
    for(i = 0; i < dimg.getHeight(); i++) { 
        for(j = 0; j < dimg.getWidth(); j++) { 
            if(dimg.getRGB(j, i) == color.getRGB()) { 
                dimg.setRGB(j, i, 0x8F1C1C); 
            }
        }
    }
    return dimg;
}

function splitImage(img, cols, rows) {
   var w = img.getWidth()/cols;
   var h = img.getHeight()/rows;
   var num = 0;
   imgs = new Array();
   for(y = 0; y < rows; y++) {
       for(x = 0; x < cols; x++) {
           imgs[num] = new BufferedImage(w, h, img.getType());
           g = imgs[num].createGraphics();
           g.drawImage(img, 0, 0, w, h, w*x, h*y, w*x+w, h*y+h, null);
           g.dispose();
           num++;
       }
   }
   return imgs;
}
var tiles
var r = {
    initialize: function(ds, fg, bg) {
        var sprite = makeColorTransparent("mario2.png", new Color(0x007300)) // firefox and java2d have different color values?
        tiles = splitImage(sprite, 6, 4)
    },
   render : function(g, size) {
       var xoffset = 0, yoffset = 0
       for(i in tiles) {
           if(i % 8 == 0) {
           if(i != 0)
           yoffset += 1
           xoffset = 0
           //context.info(i + ", "+yoffset)
        }
        g.drawImage(
            tiles[i],
            tiles[i].getWidth()*xoffset,
            tiles[i].getHeight()*yoffset,
            tiles[i].getWidth(),
            tiles[i].getHeight(),
            null
        )
        xoffset++
        //g.drawString("test", 10*i, 20)
        }
    }
}
context.getDarkstar().setRenderer(new D2DAdapter(r))

Check out Jan Erik Paulsen on Twitter.



TrackBack

TrackBack URL for this entry:
http://labs.teppefall.com/movabletype/mt-tb.cgi/154