Version 1.0.3: Isobox

Late last night I released Version 1.0.3 of GIF Loop Coder. The only major change is the addition of a new shape: the Isobox. This is simply an isometric box. OK, technically, it’s a dimetric box.

You can give it a screen x and y, a size and an ‘h’ for height. The size property is the width from one corner of the box to the other. The h is how far up the box extends from its base. So an h of greater than 0 will create a box of some kind, an h of 0 will create a tile, and a negative h will actually create a hole!

boxes

The colors are specified by the properties colorTop, colorLeft and colorRight. A great way to assign colors to these is with the color.hsv method. Use the same hue and saturation for all three, with varying values. Generally, the lightest value will be on the top and two darker values on the left and right, although you can change this up to create different lighting effects.


colorTop: color.hsv(90, 1, 1),
colorRight: color.hsv(90, 1, 0.75),
colorLeft: color.hsv(90, 1, 0.5),

colorboxes

Of course, all properties are animatable. Here, I’m animating the h and colors.

animcube

This is a great case for the color.animHSV method.


colorTop: color.animHSV(0, 60, 1, 1, 1, 1),
colorRight: color.animHSV(0, 60, 1, 1, 0.75, 0.75),
colorLeft: color.animHSV(0, 60, 1, 1, 0.5, 0.5),

The following code is extracted and simplified from the isometricgrid.js file in the examples folder, and shows how to make a grid of boxes.

    var tileWidth = 60,
        tileHeight = tileWidth / 2;
    
    for(var y = 0; y < 5; y++) {
        for(var x = 0; x < 5; x++) {
            var xpos = width / 2 + (x - y) * tileWidth / 2,
                ypos = 100 + (x + y) * tileHeight / 2,
                hue = 30 + Math.random() * 30;
            list.addIsobox({
                x: xpos,
                y: ypos,
                size: tileWidth,
                h: 40,
                colorTop: color.hsv(hue, 1, 1),        
                colorLeft: color.hsv(hue, 1, 0.5),
                colorRight: color.hsv(hue, 1, 0.75),
            });
        }
    }

cubegrid

Factory Sample

factory

function onGLC(glc) {
    glc.loop();
    glc.size(300, 300);
    glc.setDuration(1.5);
    glc.setMode("single");
    glc.setEasing(false);

    var list = glc.renderList,
        width = glc.w,
        height = glc.h;

    var size = 50;
    for(var x = -size / 2; x < width / 2; x += size) {
        list.addRect({
            translationX: x,
            x: [0, size],
            y: size / 2,
            w: size * 0.8,
            h: size * 0.8
        })
    }
    for(var x = size / 2; x < width / 2 + size * 1.5; x += size) {
        console.log(x);
        list.addRect({
            translationX: x,
            x: [0, -size],
            y: height -size / 2,
            w: size * 0.8,
            h: size * 0.8
        })
    }
    list.addRect({
        translationX: width / 2 + size / 2,
        x: 0,
        y: [size / 2, height - size / 2],
        w: size * 0.8,
        h: size * 0.8,
        rotation: [0, 180]
    });
    list.addRect({
        translationX: width / 2 + size * 1.5,
        x: 0,
        y: [-size / 2, height / 2],
        w: size * 0.8,
        h: size * 0.8,
        rotation: [90, 0]
    });
    for(var x = width / 2 + size * 1.5; x <= width + size / 2; x += size) {
        console.log(x);
        list.addRect({
            translationX: x,
            x: [0, size],
            y: height / 2,
            w: size * 0.8,
            h: size * 0.8
        })
    }

    list.addRect({
        x: 0,
        y: size,
        w: width / 2,
        h: 10,
        drawFromCenter: false
    })
    list.addRect({
        x: width - size * 2 + 5,
        y: height / 2 + size / 2,
        w: size * 2,
        h: 10,
        drawFromCenter: false
    })
    list.addRect({
        x: 0,
        y: height - size - 10,
        w: width / 2 - 5,
        h: 10,
        drawFromCenter: false
    })

    list.addGear({
        x: 0,
        y: height / 2,
        radius: width * .3,
        rotation: [0, 90],
        teeth: 16
    })
    list.addGear({
        x: width,
        y: height * 0.75,
        radius: width * .15,
        rotation: [0, 90],
        teeth: 12
    })
}       

Flower Sample

flower

function onGLC(glc) {
	glc.loop();
	glc.size(300, 300);

	var list = glc.renderList,
		width = glc.w,
		height = glc.h;

	for(var i = 5; i < width; i += 1) {
		list.addStar({
			x: width / 2,
			y: height / 2,
			outerRadius: i,
			innerRadius: [i * 0.25, i * 0.76],
			lineWidth: 0.25,
			stroke: true,
			fill: false,
			rotation: [0, 360/12],
			phase: -i / width,
			points: 12
		})
	}
}		

Gear Hub Sample

hub

function onGLC(glc) {
    glc.loop();
    glc.size(300, 300);

    var list = glc.renderList,
        width = glc.w,
        height = glc.h;

    function gray(i) {
        var shade = Math.floor(255 - i / width * 256).toString(16);
        return "#" + shade + shade + shade;
    }

    for(var i = width / 2 - 10; i > 10; i -= 20) {
        list.addGear({
            x: width / 2,
            y: height / 2,
            radius: i,
            toothHeight: i * 0.2,
            rotation: [0, 90],
            phase: -i / width,
            fillStyle: gray(i), 
            phase: i / width,
            shadowColor: "#70000000",
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowBlur: 10,
            teeth: Math.round(i * 0.125)
        })
    }
}