EVR.include("level/scoreboard/meter/Segment.js");
EVR.Level.Scoreboard.Meter = function(scoreboard)
{
   EVR.Graphic.call(this, scoreboard, null, null, ALIGN_CENTER);
   this.scoreboard = scoreboard;
   this.segments = [];
   this.count = SCOREBOARD_METER_SEGMENTS;
   this.bounds = [SCOREBOARD_METER_MIN_SPEED, SCOREBOARD_METER_MAX_SPEED];
//    this.set_proportions(SCOREBOARD_METER_WIDTH, 1);
   this.set_proportions(1, 1);
   this.append();
   this.addSegments();
}
EVR.Level.Scoreboard.Meter.prototype = new EVR.Graphic;
EVR.Level.Scoreboard.Meter.prototype.addSegments = function()
{
   var count = this.count;
   var segments = [];
   for (var ii = 0; ii < count; ii++)
   {
      segments.push(new EVR.Level.Scoreboard.Meter.Segment(this, ii, count));
   }
   this.segments = segments;
   this.arrange();
}
EVR.Level.Scoreboard.Meter.prototype.arrange = function()
{
   var segments = this.segments;
   var offset = 0;
   for (var ii = 1; ii < segments.length; ii++)
   {
      offset += segments[ii - 1].get_dimensions()[1];
      segments[ii].set_coordinates([0, offset]);
   }
}
EVR.Level.Scoreboard.Meter.prototype.update = function(speed)
{
   var min = this.bounds[0];
   var max = this.bounds[1];
   var difference = max - min;
   var level = Math.round(this.count * ((speed - min) / difference));
   var segment, segments = this.segments;
   var offset = 0;
   for (var ii = segments.length - 1; ii >= 0; ii--)
   {
      segment = segments[ii];
      if (offset < level)
      {
	 if (!segment.isActive())
	 {
	    segment.activate();
	 }
      }
      else
      {
	 if (segment.isActive())
	 {
	    segment.deactivate();
	 }
      }
      offset++;
   }
   return level / this.count;
}
EVR.Level.Scoreboard.Meter.prototype.draw = function()
{
   EVR.Graphic.prototype.draw.call(this);
   var segments = this.segments;
   for (var ii = 0; ii < segments.length; ii++)
   {
      segments[ii].draw();
   }
   this.arrange();
}      
EVR.Level.Scoreboard.Meter.prototype.toString = function()
{
   return "[object EVR.Level.Scoreboard.Meter]";
}
EVR.Level.Scoreboard.Meter.Segment = function(meter, index, count)
{
   EVR.Graphic.call(this, meter);
   this.meter = meter;
   this.index = index;
   this.count = count;
   this.active = false;
   this.setAttributes();
   this.append();
}
EVR.Level.Scoreboard.Meter.Segment.prototype = new EVR.Graphic;
EVR.Level.Scoreboard.Meter.Segment.prototype.setAttributes = function()
{
   var height = 1.0 / this.count;
   var y = this.index * height;
   this.set_proportions(1, height);
   this.deactivate();
   this.set_color();
}
EVR.Level.Scoreboard.Meter.Segment.prototype.deactivate = function()
{
   this.css.visibility = "hidden";
//    this.css.display = "none";
//    this.set_opacity(SCOREBOARD_METER_INACTIVE_OPACITY);
   this.active = false;
}
EVR.Level.Scoreboard.Meter.Segment.prototype.set_color = function()
{
   var color = this.meter.scoreboard.buildYellow(this.index, this.count);
   this.setBorder();
   EVR.Graphic.prototype.set_color.call(this, color.get_string());
}
EVR.Level.Scoreboard.Meter.Segment.prototype.setBorder = function(red)
{
   var offset = SCOREBOARD_METER_BORDER_COLOR_OFFSET;
   var color = this.meter.scoreboard.buildYellow(
      this.index, this.count, offset);
   var css = this.css;
   css.borderWidth = 0;
   css.borderLeftWidth = SCOREBOARD_METER_HORIZONTAL_BORDER_WIDTH;
   css.borderRightWidth = SCOREBOARD_METER_HORIZONTAL_BORDER_WIDTH;
   if (this.index == this.count - 1)
   {
      css.borderBottomWidth = SCOREBOARD_METER_BOTTOM_BORDER_WIDTH;
   }
   css.borderColor = color.get_string();
   css.borderStyle = "solid";
}
EVR.Level.Scoreboard.Meter.Segment.prototype.activate = function()
{
   this.css.visibility = "";
//    this.css.display = "";
//    this.set_opacity(1);
   this.active = true;
}
EVR.Level.Scoreboard.Meter.Segment.prototype.isActive = function()
{
   return this.active;
}
EVR.Level.Scoreboard.Meter.Segment.prototype.toString = function()
{
   return "[object EVR.Level.Scoreboard.Meter.Segment]";

}
EVR.include("level/streak/Glyph.js");
EVR.Level.Streak = function(level)
{
   this.level = level;
   this.container = level.container;
   this.glyphs = [];
   this.streak = 0;
}
EVR.Level.Streak.prototype.increase = function()
{
   var streak = ++this.streak;
//    if (!this.level.practice)
//    {
//       var probability = STREAK_CHEER_PROBABILITY;
//       if (Math.random() <= probability)
//       {
// 	 this.glyphs.push(new EVR.Level.Streak.Glyph(this));
//       }
//    }
}
EVR.Level.Streak.prototype.reset = function()
{
   this.streak = 0;
   this.apply_to_glyphs("remove");
   this.glyphs = [];
}
EVR.Level.Streak.prototype.apply_to_glyphs = function(method)
{
   var glyphs = this.glyphs;
   for (var ii = 0; ii < glyphs.length; ii++)
   {
      glyphs[ii][method]();
   }
}
EVR.Level.Streak.prototype.draw = function()
{
   this.apply_to_glyphs("draw");
}
EVR.Level.Streak.prototype.clear = function()
{
   this.apply_to_glyphs("remove");
}
EVR.Level.Streak.prototype.valueOf = function()
{
   return this.streak;
}
EVR.Level.Streak.prototype.toString = function()
{
   return this.streak;
}
EVR.Level.Streak.Glyph = function(streak, index, count)
{
   EVR.Graphic.call(this, streak.container, null, null, ALIGN_BOTTOM_LEFT);
   this.streak = streak;
   this.set_attributes();
   this.append();
}
EVR.Level.Streak.Glyph.prototype = new EVR.Graphic;
EVR.Level.Streak.Glyph.prototype.set_attributes = function()
{
   this.set_proportions(STREAK_GLYPH_WIDTH, STREAK_GLYPH_HEIGHT);
   this.set_z(STREAK_Z_INDEX);
   this.set_opacity(STREAK_OPACITY);
   this.css.fontWeight = STREAK_FONT_WEIGHT;
   this.set_text();
   this.initialize_position();
}
EVR.Level.Streak.Glyph.prototype.set_text = function()
{
   this.text = this.determine_text();
   this.set_color_index();
   var font = STREAK_FONT_FAMILY;
   var color = STREAK_COLORS[this.color_index];
   var size = STREAK_FONT_SIZE;
   this.set_shadow(font, size);
   var cheer = new EVR.Graphic(this, null, null, ALIGN_TOP, this.container);
   cheer.set_proportions(STREAK_GLYPH_WIDTH, 0);
   cheer.set_text(this.text, font, color, size);
   cheer.append();
   this.cheer = cheer;
}
EVR.Level.Streak.Glyph.prototype.set_color_index = function()
{
   this.color_index = Math.get_random_int(0, STREAK_COLORS.length - 1);
}
EVR.Level.Streak.Glyph.prototype.determine_text = function()
{
   var cheers = STREAK_CHEERS;
   var streak = this.streak.streak;
   var range = Math.get_random_number(0, streak / STREAK_CHEER_GRADIENT);
   (range >= 1) && (range = .999);
   var index = Math.floor(cheers.length * range);
   return cheers[index];
}
EVR.Level.Streak.Glyph.prototype.set_shadow = function(font, size)
{
   var shadow = new EVR.Graphic(this, null, null, ALIGN_TOP, this.container);
   var color = STREAK_SHADOWS[this.color_index];
   shadow.set_proportions(STREAK_GLYPH_WIDTH, 0);
   shadow.set_text(this.text, font, color, size);
   shadow.append();
   this.shadow = shadow;
   this.place_shadow();
}
EVR.Level.Streak.Glyph.prototype.place_shadow = function()
{
   var shadow = this.shadow;
   var position = shadow.get_coordinates();
   var offset = STREAK_SHADOW_OFFSET;
   var coordinates = [position[0] + offset[0], position[1] + offset[1]];
   shadow.set_coordinates(coordinates);
}
EVR.Level.Streak.Glyph.prototype.initialize_position = function()
{
   var x = Math.random();
   var y = -Math.get_random_number(STREAK_MIN_Y, STREAK_MAX_Y);
   this.place(x, y);
}
EVR.Level.Streak.Glyph.prototype.draw = function()
{
   EVR.Graphic.prototype.draw.call(this);
   if (!!this.shadow && !!this.cheer)
   {
      this.shadow.draw();
      this.place_shadow();
      this.cheer.draw();
   }
}
EVR.Level.Streak.Glyph.prototype.toString = function()
{
   return "[object EVR.Level.Streak.Glyph]";
}
54.166.150.10
54.166.150.10
54.166.150.10
 
September 26, 2017

I made a video about my game Picture Processing for Out of Index 2017! Here is the video along with a transcript.

To save memory, video games are designed to repeat graphics. In raster-based games, image files like textures, tiles and sprites are loaded once into memory and drawn repeatedly by the program to create environments, characters, animations and text. In my puzzle game, 8 by 8 pixel tiles are used to create scenes the player has to recreate. For level 1, the tiles are a cloud, a tree, a mushroom, a character, sky, ground and rock.

An algorithm scrambles the tiles so that each tile is in the wrong memory address at the beginning of a level and the screen looks like a graphics glitch. When level 1 begins, the clouds may be where the trees should be, the mushrooms may be floating in the sky and the character may be switched with rock or the ground. The player's task is to put the tiles where they belong by swapping each tile with a tile in another memory address.

There are five levels, in order of difficulty, based on classic video games or classic video game genres.

The name of this game is taken from the Picture Processing Unit, a microprocessor designed by Nintendo for the Nintendo Entertainment System. The PPU is the hardware component responsible for translating image data into video signals for televisions and screens. It does this with a memory of 8 by 8 pixel tile data, which, along with palette and sprite attribute memory, generates each frame of a video game.

Companies often create lofty, evocative titles for hardware and products. What does the name Picture Processing Unit mean if we consider pictures something independent of a video screen? The phrase picture processing evokes the phrase image processing, a technique used to create applications such as automatic facial and emotion recognition. We often anthropomorphize electronic devices, infusing them with intelligence and souls, forgetting how much more infinitely complex the human mind is compared to a digital processor.

The game is named as a reference to Nintendo's microprocessor because the graphics are tile based, but it is also a reference to the players who are image processors, interpreting a picture from something deterministic into something non-deterministic.

The prototype of this game was created for a game jam called A Game By Its Cover where designers created video games based on imagined Nintendo game cartridges created by visual artists for an exhibition called My Famicase.

Picture Processing is based on one of the imagined cartridges from that exhibition. The cartridge's cover depicts a grid of unordered tiles and is described as a game where one inserts a game cartridge, sees a glitching screen, and meditates about the concept of beauty in imperfection. I added the idea that the player meditates into a state of transcendence until they are able to fix the game's graphics by accessing the memory telepathically.


↠ RSS Feed ↞