-- MySQL dump 10.13  Distrib 5.5.61, for Linux (x86_64)
--
-- Host: localhost    Database: mode13_blog
-- ------------------------------------------------------
-- Server version	5.5.61-cll

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;

--
-- Current Database: `mode13_blog`
--

CREATE DATABASE /*!32312 IF NOT EXISTS*/ `mode13_blog` /*!40100 DEFAULT CHARACTER SET latin1 */;

USE `mode13_blog`;

--
-- Table structure for table `blog_category`
--

DROP TABLE IF EXISTS `blog_category`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `blog_category` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` char(24) NOT NULL,
  `cgi_param` varchar(50) NOT NULL,
  `lang_tag` varchar(10) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1 COMMENT='Valid categories of blog on Mode 13';
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `blog_category`
--

LOCK TABLES `blog_category` WRITE;
/*!40000 ALTER TABLE `blog_category` DISABLE KEYS */;
INSERT INTO `blog_category` VALUES (1,'Main Blog - English','main_english','en'),(2,'Main Blog - French','main_francais','fr');
/*!40000 ALTER TABLE `blog_category` ENABLE KEYS */;
UNLOCK TABLES;

--
-- Table structure for table `blog_entry`
--

DROP TABLE IF EXISTS `blog_entry`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `blog_entry` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `create_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `category_id` int(11) NOT NULL,
  `title` varchar(255) DEFAULT NULL,
  `content` varchar(10000) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `cat_id_crte_dt` (`category_id`,`create_date`) COMMENT 'So retrieval by blog and date sorting are fast'
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=latin1 COMMENT='This table holds the blog entries for all blogs on Mode 13.';
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `blog_entry`
--

LOCK TABLES `blog_entry` WRITE;
/*!40000 ALTER TABLE `blog_entry` DISABLE KEYS */;
INSERT INTO `blog_entry` VALUES (5,'2014-06-29 19:07:30',1,'No Flash.  Questionable substance.','How I loved Flash.  I first got wind of it in 1994 (back when Macromedia was the name on the box) and I was stunned.  Keyframe animation on the web with tiny little file sizes and programmability on top of it.  Add a ubiquitous plug-in and I was there.\r\n<br/><br/>\r\nWith ActionScript in my holster and this very web site as my canvas I went nuts.  Flash allowed for animations that defied the laws of compression and download speed.  I remember one case in which I was able to make an animation whose file was smaller than a still image of the same animation.  Next came games, from Typhos the Plague-Spreading Clown to Psychopomp, a game I eventually ported to the iPhone.  Sadly there is almost no reusability between ActionScript and Objective C, but Flash represented a great way to get things prototyped quickly and share them readily.\r\n<br/><br/>\r\nThen Apple took their principled piss in the pool, and all of a sudden I was having flashbacks of high-school; the thing to which I had devoted so much time and effort was no longer cool.  Plaid shirts with popped collars, pinned tapered jeans, and now Flash.\r\n<br/><br/>\r\nEnter HTML5 and the &#60;canvas&#62; tag.  I had my head so far out of the web game at the time this came out that it wasn’t even on my radar.  In a world crowded with jQuery, CSS, Ruby, and every MVC framework under the sun, the signal got lost in the noise.\r\n<br/><br/>\r\nLuckily my lateness to the party isn’t keeping me away from the keg.  The animation you see on the home page is done with &#60;canvas&#62; and not a lick of Flash.  Whether the browser replacing the plug-in is a good thing remains to be seen (there are some downsides), but I’m willing to join the guinea pigs and find out.\r\n'),(6,'2014-06-29 19:07:30',2,'Sans Flash.  Substance Douteux.','Flash, j’ai l’aimé.  Le premiere temps que je l’ai découvri (quand Macromedia l’ont fait) j’ai été étourdi. Animation par image-clé dans l’Internet avec les petite fichier et une langue de programme aussi. Et s’il ne suffit pas, tout le monde ont le logiciel pour le voir.\r\n<br/><br/>\r\nAvec ActionScript et cet site ici j’ai fait le grand experiment.  Flash m’a permi faire les animations qui a été plus petite que l’image de la même chose.  Prochain j’ai fait les jeux : Typhose the Plague-Spreading Clown and Psychopomp (qui finalement j’ai refait pour iPhone).\r\n<br/><br/>\r\nAlors Apple ont uriné dans la piscine et j’ai eu les reves de l’école ; cette chose qui j’ai fait tout les temps n’est pas chouette.  Chemise plaid avec le col haut, les pantalon fuseaux avec les épingles, et maintenant Flash.\r\n<br/><br/>\r\nQuand HTML5 et &#60;canvas&#62; a deveni populaire j’ai écrivant avec les autre langues. Vous avez eu jQuery, CSS, Ruby, et beaucoup de MVC technologies, et le signal a été perdu dans le bruit.\r\n<br/><br/>\r\nEn dépit de j’arrive en retard, j’espére de rattraper.  L’animation a mode13.com est tout &#60;canvas&#62; et sans Flash. Si fairant les animations sans les logiciels de les autre (Adobe trop les temps) est bon, je ne suis pas sûr (ils sont les désavantages), mais je suis enthousiasmé de l’essayer.\r\n'),(7,'2014-08-19 01:10:17',1,'The “I used to write Flash games” &lt;canvas&gt; book.','As I mentioned I used to write Flash games, and when HTML5 canvas showed up I figured it supported enough functionality to bang out some basic games.  My worry was that I’d have to buy several books to make it happen.  One that covered HTML5 in general to get the foundational bits, then another for canvas since it’s so deep, then yet another for the necessary A/V accompaniment (playing sounds, videos, etc.).<br/><br/>\r\n\r\nLuckily the folks at O’Reilly took pity on us Flash game devs and assembled a single book that covers it all, so I thought I’d point others towards it in the name of economy (of both dollars and shelf space).  It’s called <em>HTML5 Canvas</em> but its subtitle is <em>Native Interactivity and Animation for the Web</em>, which is more accurate.  While the book obviously covers Canvas in great depth (vectors, pixels, transform matrices, it’s all in there) it also covers things like which audio codecs are supported and how to pre-load and loop videos.<br/><br/>\r\n\r\nAnd just in case there was any doubt about its focus as a game dev manual, there are not only chapters devoted to game-specific topics (collision detection, A*, etc.), but actual game dev tutorial chapters that take you through the process of building a game.<br/><br/>\r\n\r\n<a href=\'http://www.amazon.com/HTML5-Canvas-Steve-Fulton/dp/1449334989/ref=sr_1_1?ie=UTF8&qid=1408410431&sr=8-1&keywords=html5+canvas\'><em>HTML5 Canvas</em> by Steve Fulton & Jeff Fulton</a>'),(8,'2014-08-19 02:40:54',2,'Le « J’ai écrit les jeus en Flash » &lt;canvas&gt; livre.','J’ai écrit les jeus en Flash, et quand HTML5 et canvas arrivent j’ai assumé q’il suffit pour faire les jeus facile.  J’ai été inquiète qu’il a fallu acheter beaucoup des livres pour les fairent. Un pour HTML5 général, un pour tout les renseignments à canvas, et un autre pour la vidéo et le bruit.<br/><br/>\r\n\r\nHeureusement les gens à O’Reilly assemblent un livre qui a tout les sujets. Il s’appele <em>HTML5 Canvas</em> mais c’est l’autre nom qui est plus précis: <em>Native Interactivity and Animation for the Web</em>.  C’est evident que ce livre décrire complet canvas, mais il décrit aussi les sujets de jeu: bruitage, decouvért de la collision, A*, etc.<br/><br/>\r\n\r\n<a href=\'http://www.amazon.com/HTML5-Canvas-Steve-Fulton/dp/1449334989/ref=sr_1_1?ie=UTF8&qid=1408410431&sr=8-1&keywords=html5+canvas\'><em>HTML5 Canvas</em> à Steve Fulton & Jeff Fulton</a>'),(9,'2015-01-01 19:56:47',1,'Per-pixel glow using HTML5 &lt;canvas&gt; in four buffers','I’m a sucker for glow effects.  Whether I’m playing a video game with some neat bloom that makes a bright color bleed over other polygons or admiring a digital work of art in which the artist has applied some semi-transparent coloring around a light source, I’ve always appreciated what it adds to the image.<br/><br/>\r\n\r\nIt stands to reason that I would try my hand at doing this using HTML5 &lt;canvas&gt; and the neat little bag of tricks it provides.  Now that I’ve got a working prototype I thought I’d share it and describe how I rigged it up in case others are interested in trying it.  Everything I’m doing here is available in the stock version of the &lt;canvas&gt; API; no special plug-ins or third-party libraries are necessary (the script call to include javascript/canvas13.js is just a separate file where I organized my utility &lt;canvas&gt; calls). <br/><br/>\r\n\r\nBefore I continue I should point out that there are far easier ways to do a basic glow using &lt;canvas&gt; draw routines.  Everything from colored drop shadows to scaling and redrawing a shape repeatedly with progressively reduced alpha.  These techniques can be used with minimal code and will have you on your way much quicker than what I\'m about to describe.  What they won\'t do is arbitrary, per-pixel glow calculations and make the glow bleed over occluding shapes, which is what I was after.<br/><br/>\r\n\r\n<strong>You mean I can twiddle the pixels?  Oh my!</strong><br/><br/>\r\n\r\nOne of the really cool things about the &lt;canvas&gt; API is that it allows you to work with the pixels after you’ve done all of your drawing.  The following getImageData() call:<br/><br/>\r\n\r\nyourPixelArray = yourHTML5DrawingContext.getImageData(0, 0, canvasWidth, canvasHeight);<br/><br/>\r\n\r\nretrieves all the pixels from the 2D context yourHTML5DrawingContext and copies them to yourPixelArray as a byte array.  This allows you to read and write values for each component of each pixel.  Each pixel takes up four bytes, with its components being one byte apiece for red, green, blue, and alpha. This means advancing four elements in the array brings you to the next pixel.\r\n\r\nWith this kind of freedom, the frame buffer is your oyster.  In my case I decided to use four buffers to process and draw the glow, as follows:\r\n<ul>\r\n<li><strong>Frame buffer</strong> - The buffer the user sees.  The one to which everything else is drawn, and which contains the final image.  This is normally the only buffer that is visible.</li>\r\n<li><strong>Glow color</strong> - This buffer is read to determine what color the glow pixels should be.  Only shapes that glow are drawn here.</li>\r\n<li><strong>Glow output</strong> - Glow pixels are written here after they’re computed.  The contents of this buffer are composited onto the frame buffer.</li>\r\n<li><strong>Glow parameter/occlusion</strong> - Glow parameters and shapes that should occlude a glowing object are written here.  Instead of colors, each \"pixel\" contains information about how the glow should be computed.  For each 32-bit pixel, this buffer contains:<br/><br/>\r\n  <strong>Byte 1</strong> - Alpha value at which the first glow pixel away from the shape should start (0 - 255)<br/>\r\n  <br/>\r\n  <strong>Byte 2</strong> - The alpha of the underlying shape.  This is relevant because as this shape is fading from opaque to transparent, the alpha of its glow should be reduced accordingly (0 - 255).<br/>\r\n  <br/>\r\n  <strong>Byte 3</strong> - Glow distance in pixels (0 - 255).<br/>\r\n  <br/>\r\n  <strong>Byte 4</strong> - This is always 1.0 so that the data written to this buffer isn\'t altered by compositing operations.</li>\r\n</ul>\r\n\r\n<br/><br/>Once you’re done twiddling the bits of the pixels around, you can write the results back to your drawing context like so:<br/><br/>\r\n\r\nyourHTML5DrawingContext.putImageData(yourPixelArray, 0, 0);<br/><br/>\r\n\r\nThis is a compositing operation, so it will write this over any existing image data already on the context (exactly how it does this will depend on your context’s composite operation setting). <br/><br/>\r\n\r\nSo how does my glow algorithm work mechanically?  First I draw the shape to the frame buffer so you’ll see it.  Then I draw it again to the glow color buffer so the algorithm knows what color to use.  I then draw it to the glow parameter/occlusion buffer so its glow parameters can be read, but here I’m substituting glow parameters for color data:<br/><br/>\r\n\r\nglowOcclusionContext.fillStyle = \"rgba(\" + glowStartingAlpha256 + \", \" + Math.floor(frameBufferContext.globalAlpha * 255) + \", \" + glowDistanceInPixels + \", 1.0)\";<br/><br/>\r\n\r\nAs I described above, with this call my shapes are now drawn in a color that will have significance for my glow pixel processing algorithm; when it needs to know the alpha of the glow pixel it\'s processing, it can read the alpha and distance from the red and blue pixel components of this buffer, respectively, and compute it accordingly. <br/><br/>\r\n\r\nTo see what’s going on with each buffer visually, I’ve set up a couple of example pages with all four buffers showing.  Normally I hide three of them since only the frame buffer is relevant, but seeing them all makes it clearer how the algorithm actually works. <br/><br/>\r\n\r\nFor an interactive page where you can control which parts of the glowing shapes are hidden, click <a href=\"/glow_buffer_demo.php\">here</a>.<br/><br/>\r\n\r\nFor a more visually interesting page where you can see the glow color bleed onto the occluding shapes, click <a href=\"/glow_buffer_demo_2.php\">here</a>.<br/><br/>\r\n');
/*!40000 ALTER TABLE `blog_entry` ENABLE KEYS */;
UNLOCK TABLES;
/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

-- Dump completed on 2018-12-07 22:59:26
