EVR.Sound.Controls.Button.Volume.Deamplify = function(container)
{
   EVR.Sound.Controls.Button.Volume.call(
      this, container, ALIGN_LEFT, SOUND_DEAMPLIFY_ICON);
   this.set_attributes();
   this.append();
}
EVR.Sound.Controls.Button.Volume.Deamplify.prototype = 
   new EVR.Sound.Controls.Button.Volume;
EVR.Sound.Controls.Button.Volume.Deamplify.prototype.respond = function()
{
   this.audio.decrease_volume();
   EVR.Sound.Controls.Button.Volume.prototype.respond.call(this);
}
EVR.Sound.Controls.Button.Volume.Deamplify.prototype.update = function()
{
   if (this.audio.volume <= 0)
   {
      this.focused_opacity = this.unfocused_opacity;
   }
   else
   {
      this.focused_opacity = SOUND_CONTROLS_FOUCUSED_OPACITY;
   }
   this.set_opacity();
}
EVR.Sound.Controls.Button.Volume.Deamplify.prototype.toString = function()
{
   return "[object EVR.Sound.Controls.Button.Volume.Deamplify]";
}
EVR.include("sound/controls/button/volume/Amplify.js");
EVR.include("sound/controls/button/volume/Deamplify.js");
EVR.Sound.Controls.Button.Volume = function(container, alignment, icon)
{
   EVR.Sound.Controls.Button.call(this, container, alignment);
   this.icon = icon;
   this.disable_selection();
}
EVR.Sound.Controls.Button.Volume.prototype = new EVR.Sound.Controls.Button;
EVR.Sound.Controls.Button.Volume.prototype.disable_selection = function()
{
   if (!!this.element)
   {
      var element = this.element;
      element.onselectstart = function() { return false };
      element.onmousedown = function() { return false };
   }
}
EVR.Sound.Controls.Button.Volume.prototype.set_attributes = function()
{
   this.set_color(SOUND_BUTTON_BACKGROUND);
   this.set_proportions(SOUND_BUTTON_WIDTH, SOUND_BUTTON_HEIGHT);
   this.set_text();
   this.css.cursor = "default";
}
EVR.Sound.Controls.Button.Volume.prototype.set_text = function()
{
   var font = SOUND_CONTROLS_FONT_FAMILY;
   var color = SOUND_CONTROLS_FONT_COLOR;
   var size = SOUND_CONTROLS_FONT_SIZE;
   EVR.Sound.Controls.Button.prototype.set_text.call(
      this, this.icon, font, color, size);
}
EVR.Sound.Controls.Button.Volume.prototype.toString = function()
{
   return "[object EVR.Sound.Controls.Button.Volume]";
}
EVR.Sound.Controls.Button.Volume.Amplify = function(container)
{
   EVR.Sound.Controls.Button.Volume.call(
      this, container, ALIGN_RIGHT, SOUND_AMPLIFY_ICON);
   this.set_attributes();
   this.append();
}
EVR.Sound.Controls.Button.Volume.Amplify.prototype = 
   new EVR.Sound.Controls.Button.Volume;
EVR.Sound.Controls.Button.Volume.Amplify.prototype.respond = function()
{
   this.audio.increase_volume();
   EVR.Sound.Controls.Button.Volume.prototype.respond.call(this);
}
EVR.Sound.Controls.Button.Volume.Amplify.prototype.update = function()
{
   if (this.audio.volume >= 1)
   {
      this.focused_opacity = this.unfocused_opacity;
   }
   else
   {
      this.focused_opacity = SOUND_CONTROLS_FOUCUSED_OPACITY;
   }
   this.set_opacity();
}
EVR.Sound.Controls.Button.Volume.Amplify.prototype.toString = function()
{
   return "[object EVR.Sound.Controls.Button.Volume.Amplify]";
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>-</title>
    <style type="text/css">
      img
      {
        width: 480px;
        margin: 30px;
      }
    </style>
  </head>

  <body>
    <?php
      foreach (glob("*.png") as $ii => $file)
      {
         echo "\t<img src=\"$file\" alt=\"$ii\" />\n";
      }
    ?>
  </body>

</html>
var HEIGHT_RATIO = .375;
var STRIPE_HEIGHT = .7;
var STRIPE_PALETTE = ["#AA8ADE", "#916D10", "#F88C37"];
var STRIPE_DURATION = 420;
var CRAWL_STEP = .02;
var CRAWL_FRAME_DURATION = 150;
var DINING_HEIGHT = .2;
var TITLE_MIN_HEIGHT = 100;
var GLYPH_HEIGHT = .2;
var GLYPH_WIDTH = .008;
var GLYPH_LETTER_RATIO = .5;
var GLYPH_SHADOW_OFFSET = .75;
var TITLE_PALETTE = ["#d00000", "#b0b0b0", "#0000d0"];
var TITLE_FLASH_FRAME_DURATION = 880;
var TITLE_SHADOW_BRIGHTNESS = 60;
var TITLE_TEXT_BRIGHTNESS = 45;

BH = function()
{
    this.stripes_palette = STRIPE_PALETTE;
    this.stripes_shift = false;
    this.title_palette = TITLE_PALETTE;
    this.title_center_index = 0;
    this.setEventHandlers();
    this.setChildren();
    this.convertTitle();
    this.arrange();
    this.startFlash();
    this.startCrawl();
    this.startTitleFlash();
}

BH.prototype.setEventHandlers = function()
{
    var current = this;
    window.onresize = function() { current.arrange() };
}

BH.prototype.setChildren = function()
{
    this.harvester = document.getElementById("harvester");
    this.cabinet = document.getElementById("cabinet");
    this.feeder = document.getElementById("feeder");
    this.menu = document.getElementById("menu");
    this.blueprint = document.getElementById("blueprint");
    this.stripes = document.getElementById("stripes");
    this.crawl_right = document.getElementById("crawl-right");
    this.crawl_left = document.getElementById("crawl-left");
    this.dining = document.getElementById("dining");
    this.marquee = document.getElementById("marquee");
    this.title = document.getElementById("title");
}

BH.prototype.convertTitle = function()
{
    var title = this.title;
    var text = title.innerHTML;
    title.innerHTML = "";
    var ch, glyph;
    for (var ii = 0; ii < text.length; ii++)
    {
	ch = text.charAt(ii);
	if (ch != " " && ch != "\n" && ch != "\t")
	{
	    foreground = document.createElement("span");
	    foreground.className = "foreground";
	    foreground.style.zIndex = 1;
	    title.appendChild(foreground);
	    background = document.createElement("span");
	    background.innerHTML = ch;
	    background.className = "background";
	    background.style.zIndex = 0;
	    title.appendChild(background);
	}
    }
    this.glyphs = title.getElementsByTagName("span");
}

BH.prototype.arrange = function()
{
    this.clearStripes();
    var harvester = this.harvester;
    var harvester_w = harvester.clientWidth;
    var height = this.formatPx(harvester_w * HEIGHT_RATIO);
    harvester.style.height = height;
    var cabinet = this.cabinet;
    var feeder = this.feeder;
    var menu = this.menu;
    cabinet.style.height = height;
    feeder.style.height = height;
    menu.style.height = height;
    var cabinet_w = cabinet.clientWidth;
    feeder.style.width = this.formatPx(harvester_w - cabinet_w - menu.clientWidth);
    feeder.style.left = this.formatPx(cabinet_w);
    cabinet.getElementsByTagName("img")[0].height = cabinet.clientHeight;
    menu.getElementsByTagName("img")[0].height = menu.clientHeight;
    var win_h = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
    var marquee = this.marquee;
    this.arrangeFeeder();
    this.arrangeTitle();
    this.addStripes();
}

BH.prototype.arrangeFeeder = function()
{
    var feeder = this.feeder;
    var images = feeder.getElementsByTagName("img");
    var range = feeder.clientHeight;
    var y, image;
    for (var ii = 0; ii < images.length; ii++)
    {
	image = images[ii];
	image.style.top = this.formatPx(parseInt((range - image.clientHeight) / 2));
	if (image.id == "crawl-left")
	{
	    var length = image.clientWidth;
	    image.style.left = this.formatPx(-length);
	    this.crawl_length = length;
	    this.crawl_step = parseInt(CRAWL_STEP * length);
	}
	else
	{
	    image.style.left = this.formatPx(0);
	}
    }
}

BH.prototype.arrangeTitle = function()
{
    var title = this.title;
    var range_x = title.clientWidth;
    var width = parseInt(GLYPH_WIDTH * range_x);
    this.resizeTitle();
    var range_y = title.clientHeight;
    var height = parseInt(GLYPH_HEIGHT * range_y);
    var shadow_offset = parseInt(GLYPH_SHADOW_OFFSET * width);
    var y = parseInt((range_y - height) / 2 - shadow_offset / 2);
    var glyphs = this.glyphs;
    title.style.fontSize = this.formatPx(GLYPH_LETTER_RATIO * height);
    var glyph_count = glyphs.length / 2;
    var width_all = width * glyph_count;
    var margin = (range_x - width_all) / (glyph_count + 1);
    var x = margin;
    var foreground, background, color;
    for (var ii = 0; ii < glyphs.length; ii += 2)
    {
	foreground = glyphs[ii];
	background = glyphs[ii + 1];
	foreground.style.height = this.formatPx(height);
	background.style.height = this.formatPx(height);
	foreground.style.lineHeight = this.formatPx(height);
	background.style.lineHeight = this.formatPx(height);
	foreground.style.top = this.formatPx(y);
	background.style.top = this.formatPx(y + shadow_offset);
	foreground.style.width = this.formatPx(width);
	background.style.width = this.formatPx(width);
	foreground.style.left = this.formatPx(x);
	background.style.left = this.formatPx(x - shadow_offset);
	x += margin + width;
    }
}

BH.prototype.resizeTitle = function()
{
    var title = this.title;
    var available = this.getWindowHeight() - this.marquee.offsetHeight - this.harvester.offsetHeight;
    var min_height = TITLE_MIN_HEIGHT;
    if (available > min_height)
    {
	title.style.height = this.formatPx(available);
    }
    else
    {
	title.style.height = this.formatPx(min_height);
    }
}

BH.prototype.getWindowHeight = function()
{
    if (typeof(window.innerHeight) != "undefined")
    {
	return window.innerHeight;
    }
    return document.documentElement.clientHeight;
}

BH.prototype.clearStripes = function()
{
    var stripes = this.stripes;
    while (stripes.firstChild)
    {
	stripes.removeChild(stripes.firstChild);
    }
}

BH.prototype.formatPx = function(measurement)
{
    return parseInt(measurement) + "px";
}

BH.prototype.addStripes = function()
{
    this.clearStripes();
    var stripes = this.stripes;
    var bound = this.cabinet.clientHeight;
    var height = parseInt(bound * STRIPE_HEIGHT);
    var sum = 0;
    var stripe;
    while (sum < bound)
    {
	stripe = document.createElement("div");
	stripe.innerHTML = "&nbsp;";
	stripe.style.height = this.formatPx(height);
	stripes.appendChild(stripe);
	sum += height;
    }
}

BH.prototype.startFlash = function()
{
    var current = this;
    window.setInterval(
	function() {
	    current.setStripeColors();
	}, STRIPE_DURATION);
}

BH.prototype.setStripeColors = function()
{
    var stripes = this.stripes.getElementsByTagName("div");
    var palette = this.stripes_palette;
    var palette_ii = this.stripes_shift;
    var color;
    for (var ii = 0; ii < stripes.length; ii++)
    {
	color = palette[palette_ii % palette.length];
	stripes[ii].style.background = color;
	palette_ii++;
    }
    this.stripes_shift = !this.stripes_shift;
}

BH.prototype.startCrawl = function()
{
    var current = this;
    window.setInterval(
	function() {
	    current.crawl();
	}, CRAWL_FRAME_DURATION);
}

BH.prototype.crawl = function()
{
    var right = this.crawl_right;
    var left = this.crawl_left;
    var length = this.crawl_length;
    var step = this.crawl_step;
    var right_x = parseInt(right.style.left) + step;
    var left_x = parseInt(left.style.left) + step;
    if (right_x >= length)
    {
	right_x = 0;
	left_x = -length;
    }
    right.style.left = this.formatPx(right_x);
    left.style.left = this.formatPx(left_x);
}

BH.prototype.startTitleFlash = function()
{
    var current = this;
    window.setInterval(
	function() {
	    current.flashTitle();
	}, TITLE_FLASH_FRAME_DURATION);
}

BH.prototype.flashTitle = function()
{
    var glyphs = this.glyphs;
    var glyph_count = glyphs.length / 2;
    var start = parseInt(glyph_count / 2) - 1;
    var center = start + 1;
    var palette = this.title_palette;
    var palette_ii = this.incrementIndex(this.title_center_index, palette);
    this.title_center_index = palette_ii;
    var color, shadow, text_color;
    for (var ii = 0; ii <= start; ii++)
    {
	color = new Color(palette[palette_ii]);
	shadow = new Color(color.getString());
	text_color = new Color(color.getString());
	shadow.changeBrightness(TITLE_SHADOW_BRIGHTNESS);
	text_color.changeBrightness(TITLE_TEXT_BRIGHTNESS);
	glyphs[ii * 2].style.backgroundColor = color.getString();
	glyphs[ii * 2 + 1].style.backgroundColor = shadow.getString();
	glyphs[ii * 2 + 1].style.color = text_color.getString();
	glyphs[(glyph_count - ii - 1) * 2].style.backgroundColor = color.getString();
	glyphs[(glyph_count - ii - 1) * 2 + 1].style.backgroundColor = shadow.getString();
	glyphs[(glyph_count - ii - 1) * 2 + 1].style.color = text_color.getString();
	palette_ii = this.incrementIndex(palette_ii, palette);
    }
    color = new Color(palette[palette_ii]);
    shadow = new Color(color.getString());
    text_color = new Color(color.getString());
    shadow.changeBrightness(TITLE_SHADOW_BRIGHTNESS);
    text_color.changeBrightness(TITLE_TEXT_BRIGHTNESS);
    glyphs[center * 2].style.backgroundColor = color.getString();
    glyphs[center * 2 + 1].style.backgroundColor = shadow.getString();
    glyphs[center * 2 + 1].style.color = text_color.getString();
    palette_ii = this.incrementIndex(palette_ii, palette);
}

BH.prototype.incrementIndex = function(index, list)
{
    index += 1;
    if (index >= list.length)
    {
	index = 0;
    }
    return index;
}

window.onload = function() { new BH() };
23.20.219.0
23.20.219.0
23.20.219.0
 
August 12, 2013

I've been researching tartan/plaid recently for decoration in my updated version of Ball & Cup, now called Send. I want to create the atmosphere of a sports event, so I plan on drawing tartan patterns at the vertical edges of the screen as backgrounds for areas where spectator ants generate based on player performance. I figured I would make my own patterns, but after browsing tartans available in the official register, I decided to use existing ones instead.

I made a list of the tartans that had what I thought were interesting titles and chose 30 to base the game's levels on. I sequenced them, using their titles to form a loose narrative related to the concept of sending. Here are three tartans in the sequence (levels 6, 7 and 8) generated by an algorithm I inferred by looking at examples that reads a tartan specification and draws its pattern using a simple dithering technique to blend the color stripes.


Acadia


Eve


Spice Apple

It would be wasting an opportunity if I didn't animate the tartans, so I'm thinking about animations for them. One effect I want to try is making them look like water washing over the area where the ants are spectating. I've also recorded some music for the game. Here are the loops for the game over and high scores screens.

Game Over

High Scores


↠ RSS Feed ↞