Get rid of a redundant directory level.

2016-08-20 22:31:29 +02:00
parent abb6ae9ba0
commit b2256b2454
556 changed files with 0 additions and 0 deletions
--- a/nohix/canvas2dw3d.htm
+++ b/nohix/canvas2dw3d.htm
@@ -0,0 +1,33 @@
+<!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">
+    <head>
+        <title>Graphics {Canvas 2D with 3D (nothing yet, really)}</title>
+        <style type='text/css'>
+            @import url('data/genericstyle.css');
+        </style>
+        <script type="text/javascript" src="canvas2dw3d.js"></script>
+        <script type="text/javascript">
+            window.onload = function() {
+                points = [
+                    [-50, -50, -50],
+                    [-50, -50, 50],
+                    [50, -50, -50],
+                    [50, -50, 50]
+                ];
+                can3d = new Canvas2Dw3D(points, 640, 360);
+
+                canwrap = document.getElementById("canvasWrapper");
+                canwrap.appendCanvas2Dw3DChild(can3d);
+            }
+        </script>
+    </head>
+    <body>
+        <div id="canvasWrapper"></div>
+        <div class="clear"></div>
+        <div>
+            <p><a href=".">Back to index</a></p>
+        </div>
+    </body>
+</html>
+
--- a/nohix/canvas2dw3d.js
+++ b/nohix/canvas2dw3d.js
@@ -0,0 +1,44 @@
+Canvas2Dw3D = function(object, width, height)  {
+    this.object = object;
+    this.numberOfPoints = this.object.length;
+    this.width = width;
+    this.height = height;
+    this.origo2D = [this.width / 2, this.height / 2];
+
+    this.element = document.createElement("canvas");
+    this.element.width = this.width;
+    this.element.height = this.height;
+    this.context = this.element.getContext("2d");
+    this.context.strokeStyle = "rgb(0, 255, 0)"; 
+
+    this.parentElement = null;
+
+    this.drawObject();
+}
+
+Canvas2Dw3D.prototype.drawObject = function() {
+    var c, p, q;
+    for (c in this.object) {
+        p = this.object[c];
+        q = this.object[(c+1)%this.numberOfPoints];
+        this.drawLine([p[0], p[1]], [q[0], q[1]]);
+    }
+}
+
+Canvas2Dw3D.prototype.drawLine = function(xy1, xy2) {
+    with (this.context) {
+        beginPath();
+        moveTo(-xy1[0]+this.origo2D[0], -xy1[1]+this.origo2D[1]);
+        lineTo(-xy2[0]+this.origo2D[0], -xy2[1]+this.origo2D[1]);
+        stroke();
+    }
+}
+
+Canvas2Dw3D.prototype.setParentElement = function(obj) {
+    obj.appendChild(this.element);
+    this.parentElement = obj;
+}
+
+HTMLElement.prototype.appendCanvas2Dw3DChild = function(obj) {
+    obj.setParentElement(this);
+}
--- a/nohix/data/genericstyle.css
+++ b/nohix/data/genericstyle.css
@@ -0,0 +1,56 @@
+* {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+}
+
+body {
+    background: #666;
+    color: #ccc;
+    margin: 10px 0 0 10px;
+}
+
+div {
+    float: left;
+    margin: 10px 0 0 10px;
+    padding: 5px;
+    border: 5px solid #333;
+    background-color: #000;
+}
+
+div.simple {
+    border: none;
+    padding: 0;
+    margin: 0;
+    background-color: transparent;
+}
+
+div.simple > * {
+    vertical-align: middle;
+}
+
+div.clear {
+    clear: both;
+    float: none;
+    border: none;
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    text-decoration: none;
+    padding: 1px 3px;
+    color: #333;
+}
+
+a:link {
+    background-color: #bbeaf8;
+}
+
+a:visited {
+    background-color: #d6bbf8;
+}
+
+a:hover {
+    background-color: #a2b8ec;
+}
--- a/nohix/data/slogans
+++ b/nohix/data/slogans
@@ -0,0 +1,12 @@
+Unknowingly the best website in the universe
+Not to be confused with 42
+It equals π!
+Never has a website had this much content.
+Hello Dave.
+I do not possess artificial intelligence.. Oops.
+Breaking the digitial barriers of tomorrow
+This sentence has no punchline.
+Making technical restrictions go away
+Making it possible to travel 4 au in -4 seconds
+Redefining the purpose of redefining
+Producing code snippets faster than it takes to not produce them
--- a/nohix/index.php
+++ b/nohix/index.php
@@ -0,0 +1,157 @@
+<?php //~Public domain
+/*
+    // DEFAULTS
+    $USE_CACHE    = false;
+    $CREATE_CACHE = false;
+
+    // GO AWAY FROM DEFAULTS?
+
+
+    // WHAT TO DO WITH PROGRAM DIRECTIONS
+    if ($CREATE_CACHE)
+        ob_start();
+*/
+    // FUNCTIONS
+    function get_html_tag_content($html_string, $tag) {
+        /* Finds the content of the first tag if present */
+        $tag_s = "<$tag>";
+        $tag_e = "</$tag>";
+        $tag_s_pos = strpos($html_string, $tag_s);
+        $tag_e_pos = strpos($html_string, $tag_e);
+        if ($tag_s_pos === false || $tag_e_pos == false || $tag_e_pos < $tag_s_pos)
+            return "";
+
+        $start = $tag_s_pos + strlen($tag_s);
+        $end = $tag_e_pos;
+        $title = substr($html_string, $start, $end - $start);
+        return $title;
+    }
+
+    // THE ACTUAL WEBSITE CODE
+    $pages = array();
+    $grouped_pages = array();
+
+    $scanned_dir = scandir('.');
+    foreach ($scanned_dir as $filename) {
+        if (
+         is_file($filename) &&
+         !in_array($filename, array("index.php", ".", "..")) &&
+         preg_match("/^[^\.]+\.(htm|html|xhtml|php|py)$/", $filename) == 1
+        ) {
+            $content = file_get_contents($filename);
+            $title = get_html_tag_content($content, "title");
+            array_push($pages, array($title, $filename));
+        }
+    }
+
+    foreach ($pages as $page) {
+        $title = $page[0];
+        $filename = $page[1];
+
+        $group = "General";
+
+        if ($title == "") {
+            $group = "Untitled";
+            $title = $filename;
+        }
+        else if (preg_match("/^[^\{\}]+\{.+\}\s*$/", $title) == 1) {
+            $spl = explode("{", $title);
+            $group = $spl[0];
+            $title = $spl[1];
+            $group = trim($group);
+            $title = trim(substr($title, 0, strlen($title) - 1));
+        }
+
+        if (!array_key_exists($group, $grouped_pages))
+            $grouped_pages[$group] = array();
+        array_push($grouped_pages[$group], array($title, $filename));
+    }
+?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns='http://www.w3.org/1999/xhtml'>
+    <head>
+        <title>nohiX {L@B}</title>
+        <style type='text/css'>
+            body {
+                margin: 10px;
+                font-family: 'dejavu serif', serif;
+                font-size: 16px;
+                font-weight: normal;
+                color #000;
+                background: #fff;
+            }
+
+            div {
+                width: 465px;
+            }
+
+            h1 {
+                font-size: 32px;
+                display: none;
+            }
+
+            h2 {
+                font-size: 26px;
+            }
+
+            h3 {
+                font-size: 20px;
+            }
+        </style>
+    </head>
+
+    <body>
+    <div>
+        <img src="media/nohix-logo.png" alt="nohiX {L@B}" />
+        <h1>nohiX</h1>
+        <?php
+            $slogans = file("data/slogans");
+            $num = mt_rand(0, sizeof($slogans)-1);
+            $slogan = $slogans[$num];
+            echo "<p style='font-style: italic; margin-left: 20px;'>$slogan</p>\n";
+        ?>
+
+        <h2>Experiments</h2>
+        <ul>
+        <?php
+            foreach ($grouped_pages as $group=>$pages) {
+                echo "
+            <li>
+                <h3>$group</h3>
+                <ul>";
+                foreach ($pages as $page) {
+                    $title = $page[0];
+                    $filename = $page[1];
+                    echo "
+                    <li>
+                        <p><a href='$filename'>$title</a></p>
+                    </li>";
+                }
+                echo "
+                </ul>
+            </li>
+";
+            }
+        ?>
+        </ul>
+
+        <h2>About</h2>
+        <ul>
+            <li>This website is <a href="http://metanohi.name/about/niels"><em>Niels</em></a>' playground. <b>[OLD]</b></li>
+            <li>It contains mainly JavaScript tests.</li>
+            <li><em>Niels</em> is not that fond of JavaScript, but he can't help but play with it. He thinks it's a disease.</li>
+            <li>The logo (<a href="media/nohix-logo.svg">also available in SVG<a/>) is free under the <a href="http://wtfpl.net">Do What The Fuck You Want To Public License, Version 2</a>. Niels is the author.</li>
+            <li>The PHP source code is available in the git repo described <a href="http://metanohi.name/about/">here<a/>.</li>
+            <li>You might not also want to check out <a href="http://projects.metanohi.name/x/">this<a/>, which was the inspiration for nohiX.</li>
+        </ul>
+
+    <div>
+    </body>
+</html><?php
+/*  if ($CREATE_CACHE) {
+        $content = ob_get_contents();
+        ob_end_clean();
+        file_put_contents(".cache", $content);
+        echo $content;
+    }*/
+?>
--- a/nohix/key.htm
+++ b/nohix/key.htm
@@ -0,0 +1,12 @@
+<!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">
+    <head>
+        <title>Keycode detection</title>
+        <script type="text/javascript" src="key.js"></script>
+    </head>
+    <body>
+        <p><a href=".">Back to index</a></p>
+    </body>
+</html>
+
--- a/nohix/key.js
+++ b/nohix/key.js
@@ -0,0 +1,28 @@
+window.onload = function() {
+	UP = 38
+	RIGHT = 39
+	DOWN = 40
+	LEFT = 37
+	document.onkeydown = keydown
+	document.onkeyup = keyup
+	keys = []
+}
+
+function getkeycode(e) {
+  var keycode
+  if (window.event) keycode = window.event.keyCode
+  else if (e) keycode = e.which
+  else keycode = 0
+  return keycode
+}
+
+function keydown(e) {
+	var keycode = getkeycode(e)
+	keys[keycode] = true
+	document.title = keycode
+}
+
+function keyup(e) {
+	var keycode = getkeycode(e)
+	keys[keycode] = true
+}
--- a/nohix/key_advanced.js
+++ b/nohix/key_advanced.js
@@ -0,0 +1,92 @@
+window.onload = function() {
+	key_up=false
+	key_right=false
+	key_down=false
+	key_left=false
+	key_shift=false
+	key_control=false
+	
+	key_order=new Array()
+	for (var i=0;i<4;i++) {
+		key_order[i]=0
+	}
+	
+	document.onkeydown=keydown
+	document.onkeyup=keyup
+}
+
+function getkeycode(e) {
+  var keycode
+  if (window.event) keycode=window.event.keyCode
+  else if (e) keycode=e.which
+  else keycode=0
+  return keycode
+}
+
+function keydown(e) {
+	var keycode=getkeycode(e)
+		
+	if (keycode==38 && !key_up) {
+		key_up=true
+		key_order.splice(0,0,1)
+		key_order.splice(3,1)
+	}
+	else if (keycode==39 && !key_right) {
+		key_right=true
+		key_order.splice(0,0,2)
+		key_order.splice(3,1)
+	}
+	else if (keycode==40 && !key_down) {
+		key_down=true
+		key_order.splice(0,0,3)
+		key_order.splice(3,1)
+	}
+	else if (keycode==37 && !key_left) {
+		key_left=true
+		key_order.splice(0,0,4)
+		key_order.splice(3,1)
+	}
+	else if (keycode==16) key_shift=true
+	else if (keycode==17) key_control=true
+	
+	if (keycode==38 || keycode==39 || keycode==40 || keycode==37) find_direction()
+	if (keycode==38 || keycode==39 || keycode==40 || keycode==37 || keycode==16) get_col_length()
+}
+
+function keyup(e) {
+	var keycode=getkeycode(e)
+	
+	if (keycode==38 && key_up) {
+		key_up=false
+		for (var i=0;i<4;i++) {
+			if (key_order[i]==1) key_order.splice(i,1)
+		}
+		key_order.splice(3,0,0)
+	}
+	else if (keycode==39 && key_right) {
+		key_right=false
+		for (var i=0;i<4;i++) {
+			if (key_order[i]==2) key_order.splice(i,1)
+		}
+		key_order.splice(3,0,0)
+	}
+	else if (keycode==40 && key_down) {
+		key_down=false
+		for (var i=0;i<4;i++) {
+			if (key_order[i]==3) key_order.splice(i,1)
+		}
+		key_order.splice(3,0,0)
+	}
+	else if (keycode==37 && key_left) {
+		key_left=false
+		for (var i=0;i<4;i++) {
+			if (key_order[i]==4) key_order.splice(i,1)
+		}
+		key_order.splice(3,0,0)
+	}
+	else if (keycode==16) key_shift=false
+	else if (keycode==17) key_control=false
+	
+	if (key_order[0]>0 && (keycode==38 || keycode==39 || keycode==40 || keycode==37)) find_direction()	
+	if (keycode==38 || keycode==39 || keycode==40 || keycode==37 || keycode==16) get_col_length()
+}
--- a/nohix/lgpl-3.0.txt
+++ b/nohix/lgpl-3.0.txt
@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.
--- a/nohix/media/greek-letters-large.png
+++ b/nohix/media/greek-letters-large.png
--- a/nohix/media/greek-letters-stretched.png
+++ b/nohix/media/greek-letters-stretched.png
--- a/nohix/media/greek-letters.png
+++ b/nohix/media/greek-letters.png
--- a/nohix/media/greek-letters.svg
+++ b/nohix/media/greek-letters.svg
@@ -0,0 +1,250 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="256"
+   height="256"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.47pre4 r22446"
+   sodipodi:docname="greek-letters.svg"
+   inkscape:export-filename="/home/niels/www/metanohi/nohix/media/greek-letters.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4">
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 526.18109 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="744.09448 : 526.18109 : 1"
+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+       id="perspective10" />
+    <filter
+       inkscape:collect="always"
+       id="filter3702">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="1.1200381"
+         id="feGaussianBlur3704" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.0507812"
+     inkscape:cx="128"
+     inkscape:cy="128"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1278"
+     inkscape:window-height="1022"
+     inkscape:window-x="1"
+     inkscape:window-y="1"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       style="fill:#ffffff;stroke:#666666;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none;filter:url(#filter3702)"
+       id="g3652">
+      <text
+         xml:space="preserve"
+         style="font-size:58.70033646000000260px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#ffffff;fill-opacity:1;stroke:#666666;font-family:Chumbly BRK;-inkscape-font-specification:Chumbly BRK;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none"
+         x="15.398547"
+         y="58.616554"
+         id="text3654"
+         transform="scale(0.96671195,1.0344343)"><tspan
+           sodipodi:role="line"
+           x="15.398547"
+           y="58.616554"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif;fill:#ffffff;stroke:#666666;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none"
+           id="tspan3656">ΣηκΨον</tspan></text>
+      <text
+         transform="scale(0.96671195,1.0344343)"
+         id="text3658"
+         y="85.684509"
+         x="15.398547"
+         style="font-size:58.70033646000000260px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#ffffff;fill-opacity:1;stroke:#666666;font-family:Chumbly BRK;-inkscape-font-specification:Chumbly BRK;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none"
+         xml:space="preserve"><tspan
+           id="tspan3660"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif;fill:#ffffff;stroke:#666666;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none"
+           y="85.684509"
+           x="15.398547"
+           sodipodi:role="line">ΣηκΨον</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-size:58.70033646000000260px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#ffffff;fill-opacity:1;stroke:#666666;font-family:Chumbly BRK;-inkscape-font-specification:Chumbly BRK;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none"
+         x="15.398547"
+         y="112.75244"
+         id="text3662"
+         transform="scale(0.96671195,1.0344343)"><tspan
+           sodipodi:role="line"
+           x="15.398547"
+           y="112.75244"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif;fill:#ffffff;stroke:#666666;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none"
+           id="tspan3664">ΣηκΨον</tspan></text>
+      <text
+         transform="scale(0.96671195,1.0344343)"
+         id="text3666"
+         y="139.8204"
+         x="15.398547"
+         style="font-size:58.70033646000000260px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#ffffff;fill-opacity:1;stroke:#666666;font-family:Chumbly BRK;-inkscape-font-specification:Chumbly BRK;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none"
+         xml:space="preserve"><tspan
+           id="tspan3668"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif;fill:#ffffff;stroke:#666666;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none"
+           y="139.8204"
+           x="15.398547"
+           sodipodi:role="line">ΣηκΨον</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-size:58.70033646000000260px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#ffffff;fill-opacity:1;stroke:#666666;font-family:Chumbly BRK;-inkscape-font-specification:Chumbly BRK;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none"
+         x="15.398547"
+         y="166.88837"
+         id="text3670"
+         transform="scale(0.96671195,1.0344343)"><tspan
+           sodipodi:role="line"
+           x="15.398547"
+           y="166.88837"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif;fill:#ffffff;stroke:#666666;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none"
+           id="tspan3672">ΣηκΨον</tspan></text>
+      <text
+         transform="scale(0.96671195,1.0344343)"
+         id="text3674"
+         y="193.95633"
+         x="15.398547"
+         style="font-size:58.70033646000000260px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#ffffff;fill-opacity:1;stroke:#666666;font-family:Chumbly BRK;-inkscape-font-specification:Chumbly BRK;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none"
+         xml:space="preserve"><tspan
+           id="tspan3676"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif;fill:#ffffff;stroke:#666666;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none"
+           y="193.95633"
+           x="15.398547"
+           sodipodi:role="line">ΣηκΨον</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-size:58.70033646000000260px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#ffffff;fill-opacity:1;stroke:#666666;font-family:Chumbly BRK;-inkscape-font-specification:Chumbly BRK;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none"
+         x="15.398547"
+         y="221.02429"
+         id="text3678"
+         transform="scale(0.96671195,1.0344343)"><tspan
+           sodipodi:role="line"
+           x="15.398547"
+           y="221.02429"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif;fill:#ffffff;stroke:#666666;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none"
+           id="tspan3680">ΣηκΨον</tspan></text>
+    </g>
+    <g
+       id="g2848"
+       style="fill:#ffffff;stroke:#666666;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none">
+      <text
+         transform="scale(0.96671195,1.0344343)"
+         id="text2816"
+         y="58.616554"
+         x="15.398547"
+         style="font-size:58.70033646000000260px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#ffffff;fill-opacity:1;stroke:#666666;font-family:Chumbly BRK;-inkscape-font-specification:Chumbly BRK;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+         xml:space="preserve"><tspan
+           id="tspan2820"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif;fill:#ffffff;stroke:#666666;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+           y="58.616554"
+           x="15.398547"
+           sodipodi:role="line">ΣηκΨον</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-size:58.70033646000000260px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#ffffff;fill-opacity:1;stroke:#666666;font-family:Chumbly BRK;-inkscape-font-specification:Chumbly BRK;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+         x="15.398547"
+         y="85.684509"
+         id="text2824"
+         transform="scale(0.96671195,1.0344343)"><tspan
+           sodipodi:role="line"
+           x="15.398547"
+           y="85.684509"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif;fill:#ffffff;stroke:#666666;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+           id="tspan2826">ΣηκΨον</tspan></text>
+      <text
+         transform="scale(0.96671195,1.0344343)"
+         id="text2828"
+         y="112.75244"
+         x="15.398547"
+         style="font-size:58.70033646000000260px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#ffffff;fill-opacity:1;stroke:#666666;font-family:Chumbly BRK;-inkscape-font-specification:Chumbly BRK;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+         xml:space="preserve"><tspan
+           id="tspan2830"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif;fill:#ffffff;stroke:#666666;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+           y="112.75244"
+           x="15.398547"
+           sodipodi:role="line">ΣηκΨον</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-size:58.70033646000000260px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#ffffff;fill-opacity:1;stroke:#666666;font-family:Chumbly BRK;-inkscape-font-specification:Chumbly BRK;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+         x="15.398547"
+         y="139.8204"
+         id="text2832"
+         transform="scale(0.96671195,1.0344343)"><tspan
+           sodipodi:role="line"
+           x="15.398547"
+           y="139.8204"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif;fill:#ffffff;stroke:#666666;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+           id="tspan2834">ΣηκΨον</tspan></text>
+      <text
+         transform="scale(0.96671195,1.0344343)"
+         id="text2836"
+         y="166.88837"
+         x="15.398547"
+         style="font-size:58.70033646000000260px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#ffffff;fill-opacity:1;stroke:#666666;font-family:Chumbly BRK;-inkscape-font-specification:Chumbly BRK;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+         xml:space="preserve"><tspan
+           id="tspan2838"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif;fill:#ffffff;stroke:#666666;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+           y="166.88837"
+           x="15.398547"
+           sodipodi:role="line">ΣηκΨον</tspan></text>
+      <text
+         xml:space="preserve"
+         style="font-size:58.70033646000000260px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#ffffff;fill-opacity:1;stroke:#666666;font-family:Chumbly BRK;-inkscape-font-specification:Chumbly BRK;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+         x="15.398547"
+         y="193.95633"
+         id="text2840"
+         transform="scale(0.96671195,1.0344343)"><tspan
+           sodipodi:role="line"
+           x="15.398547"
+           y="193.95633"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif;fill:#ffffff;stroke:#666666;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+           id="tspan2842">ΣηκΨον</tspan></text>
+      <text
+         transform="scale(0.96671195,1.0344343)"
+         id="text2844"
+         y="221.02429"
+         x="15.398547"
+         style="font-size:58.70033646000000260px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#ffffff;fill-opacity:1;stroke:#666666;font-family:Chumbly BRK;-inkscape-font-specification:Chumbly BRK;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+         xml:space="preserve"><tspan
+           id="tspan2846"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif;fill:#ffffff;stroke:#666666;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
+           y="221.02429"
+           x="15.398547"
+           sodipodi:role="line">ΣηκΨον</tspan></text>
+    </g>
+  </g>
+</svg>
--- a/nohix/media/nohix-logo.png
+++ b/nohix/media/nohix-logo.png
--- a/nohix/media/nohix-logo.svg
+++ b/nohix/media/nohix-logo.svg
@@ -0,0 +1,160 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="230"
+   height="99"
+   id="svg2"
+   sodipodi:version="0.32"
+   inkscape:version="0.46"
+   version="1.0"
+   sodipodi:docname="nohix.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape">
+  <defs
+     id="defs4">
+    <linearGradient
+       id="linearGradient3185">
+      <stop
+         style="stop-color:#ac0000;stop-opacity:1;"
+         offset="0"
+         id="stop3187" />
+      <stop
+         style="stop-color:#ff2323;stop-opacity:1;"
+         offset="1"
+         id="stop3189" />
+    </linearGradient>
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 526.18109 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="744.09448 : 526.18109 : 1"
+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+       id="perspective10" />
+    <filter
+       inkscape:collect="always"
+       id="filter3181">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.87758789"
+         id="feGaussianBlur3183" />
+    </filter>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3185"
+       id="radialGradient3191"
+       cx="142.39745"
+       cy="76.404472"
+       fx="142.39745"
+       fy="76.404472"
+       r="20.28125"
+       gradientTransform="matrix(1.534545,-6.998926e-8,4.9837417e-8,1.6125726,-36.136011,-96.16687)"
+       gradientUnits="userSpaceOnUse" />
+    <filter
+       inkscape:collect="always"
+       id="filter3225">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="1.6494668"
+         id="feGaussianBlur3227" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     gridtolerance="10000"
+     guidetolerance="10"
+     objecttolerance="10"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.2"
+     inkscape:cx="125"
+     inkscape:cy="62.5"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1255"
+     inkscape:window-height="750"
+     inkscape:window-x="25"
+     inkscape:window-y="24" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="opacity:0.5381356;fill:#2aff3b;fill-opacity:1;stroke:none;stroke-width:0.40000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect3259"
+       width="219.50439"
+       height="58.260136"
+       x="7.1864362"
+       y="37.400726"
+       ry="8.8656721"
+       transform="matrix(0.9911551,-0.1327083,0,1,0,0)" />
+    <text
+       id="text3161"
+       y="64.162567"
+       x="18.06805"
+       style="font-size:40px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter3181);font-family:Bitstream Vera Sans"
+       xml:space="preserve"
+       transform="matrix(1.5345439,0,0,1.5345439,-10.282161,-21.14633)"><tspan
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#000000;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif"
+         y="64.162567"
+         x="18.06805"
+         id="tspan3163"
+         sodipodi:role="line">nohi</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:61.38175583px;font-style:normal;font-weight:normal;fill:#008000;fill-opacity:1;stroke:#550000;stroke-width:0.61381757;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-family:Bitstream Vera Sans"
+       x="14.374969"
+       y="80.383034"
+       id="text2383"><tspan
+         sodipodi:role="line"
+         id="tspan2385"
+         x="14.374969"
+         y="80.383034"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#008000;stroke:#550000;stroke-width:0.61381757;stroke-miterlimit:4;stroke-dasharray:none;font-family:DejaVu Serif;-inkscape-font-specification:DejaVu Serif">nohi</tspan></text>
+    <text
+       id="text3193"
+       y="98.534271"
+       x="114.92109"
+       style="font-size:45.32183075px;font-style:normal;font-weight:normal;fill:#2aff3b;fill-opacity:1;stroke:#ff00ff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter3225);font-family:Bitstream Vera Sans"
+       xml:space="preserve"
+       transform="matrix(1.5110772,0.1584418,0.2673403,1.5864067,-51.298466,-96.98487)"><tspan
+         style="font-size:72.51493073px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#2aff3b;fill-opacity:1;stroke:#ff00ff;font-family:Domestic Manners;-inkscape-font-specification:Domestic Manners"
+         y="98.534271"
+         x="114.92109"
+         id="tspan3195"
+         sodipodi:role="line">X</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:61.38179398px;font-style:normal;font-weight:normal;fill:url(#radialGradient3191);fill-opacity:1;stroke:#800000;stroke-width:0.61381751;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;font-family:Bitstream Vera Sans"
+       x="145.16656"
+       y="57.012428"
+       id="text2387"
+       transform="matrix(0.9847077,0.1032501,0.1742148,1.0337969,0,0)"><tspan
+         sodipodi:role="line"
+         id="tspan2389"
+         x="145.16656"
+         y="57.012428"
+         style="font-size:98.2108078px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:url(#radialGradient3191);fill-opacity:1;stroke:#800000;stroke-width:0.61381751;stroke-miterlimit:4;stroke-dasharray:none;font-family:Domestic Manners;-inkscape-font-specification:Domestic Manners">X</tspan></text>
+  </g>
+</svg>
--- a/nohix/media/video.ogv
+++ b/nohix/media/video.ogv
--- a/nohix/media/wmap-screenshot.png
+++ b/nohix/media/wmap-screenshot.png
--- a/nohix/modernart-examples/index.php
+++ b/nohix/modernart-examples/index.php
@@ -0,0 +1,76 @@
+<?php
+$num = $_GET['n'] + 0;
+if ($num == 1) {
+    $img = '../media/greek-letters-stretched.png';
+    $settings = 'modernart';
+}
+elseif ($num == 2) {
+    $img = '../media/greek-letters.png';
+    $settings = 'modernart modernrect:15 modernline:1 moderncolor:flow modernflowpower:40 modernflowtype:continue';
+}
+elseif ($num == 3) {
+    $img = '../media/greek-letters-large.png';
+    $settings = 'modernart modernrect:20 modernline:0 moderncolor:individual';
+}
+elseif ($num == 4) {
+    $img = '../media/greek-letters-stretched.png';
+    $settings = 'modernart modernnumbers:10 moderncolor:flow';
+}
+elseif ($num == 5) {
+    $img = '../media/greek-letters-stretched.png';
+    $settings = 'modernart modernnumbers:10 modernnumbersrel:y moderncolor:flow';
+}
+elseif ($num == 6) {
+    $img = '../media/greek-letters-large.png';
+    $settings = 'modernart modernnumbers:10 moderncolor:individual modernopacity:0.25';
+}
+else {
+    if ($num < 1)
+        $num = 6;
+    else
+        $num = 1;
+    header("Location: ?n=$num");
+}
+
+
+?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <title>Graphics {Modern art {Example <?=$num?>}}</title>
+        <style type='text/css'>
+            @import url('../data/genericstyle.css');
+            .modernart, img {
+                margin: 0 30px 0 0;
+                border: none;
+            }
+        </style>
+        <script type="text/javascript" src="../modernart.js"></script>
+        <script type="text/javascript">
+            window.onload = function() {
+                modernart.applyEffectToImages();
+            }
+        </script>
+    </head>
+    <body>
+        <h1>An Example of the Advent of Modern Art (<?=$num?>)</h1>
+        <div class='simple'>
+            <img src='<?=$img?>' alt='Greek letters' />
+            <img src='<?=$img?>' alt='Greek letters'
+                 class='<?=$settings?>' />
+        </div>
+
+        <div class="clear"></div>
+        <div>
+            <p><a href="?n=<?=$num-1?>">Previous</a> | <a href="?n=<?=$num+1?>">Next</a></p>
+        </div>
+
+        <div>
+            <p><a href="../modernart.htm">Back to top</a></p>
+        </div>
+
+        <div>
+            <p><a href="..">Back to index</a></p>
+        </div>
+    </body>
+</html>
--- a/nohix/modernart.htm
+++ b/nohix/modernart.htm
@@ -0,0 +1,62 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <title>Graphics {Modern art}</title>
+        <style type='text/css'>
+            @import url('data/genericstyle.css');
+            .modernart, img {
+                margin: 0 30px 0 0;
+                border: none;
+            }
+        </style>
+        <script type="text/javascript" src="modernart.js"></script>
+        <script type="text/javascript">
+            window.onload = function() {
+                var pauseOrResume = function(obj) {
+                    var elem = obj.parent
+                    elem.onclick = elem.toggle
+                }
+                modernart.applyEffectToImages(pauseOrResume);
+            }
+        </script>
+    </head>
+    <body>
+        <h1>A few examples</h1>
+        <div class='simple'>
+            <img src='media/greek-letters.png' alt='Greek letters' />
+            <img src='media/greek-letters.png' alt='Greek letters'
+                 class='modernart modernnumbers:5 moderncolor:individual'
+                 />
+            <img src='media/greek-letters.png' alt='Greek letters'
+                 class='modernart modernnumbers:5 moderncolor:flow'
+                 />
+        </div>
+
+        <div class="clear"></div>
+
+        <h3>Pause and resume</h3>
+        <p>Click on the masterpieces to pause and resume the animations.</p>
+
+        <h2>Other examples</h2>
+        <ul style='margin: 10px 0 20px 30px'>
+            <li><a href='modernart-examples/?n=1'>Another example</a></li>
+            <li><a href='modernart-examples/?n=2'>Another example</a></li>
+            <li><a href='modernart-examples/?n=3'>Another example</a></li>
+            <li><a href='modernart-examples/?n=4'>Another example</a></li>
+            <li><a href='modernart-examples/?n=5'>Another example</a></li>
+            <li><a href='modernart-examples/?n=6'>Another example</a></li>
+        </ul>
+
+        <h2>Code</h2>
+            <p style='margin: 0 0 20px 30px'><a href='modernart.js'>Source code</a></p>
+
+        <h2>Picture</h2>
+            <p>The picture has been released under <a href='http://creativecommons.org/publicdomain/zero/1.0/'>CC 0</a>.</p>
+
+        <div>
+            <p><a href=".">Back to index</a></p>
+        </div>
+    </body>
+</html>
+
--- a/nohix/modernart.js
+++ b/nohix/modernart.js
@@ -0,0 +1,436 @@
+/*
+ * modernart.js -- Transforming ordinary pictures into dynamic art
+ * Copyright (C) 2010  Niels Serup
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * A copy of the GNU Lesser General Public License is available at
+ * <http://www.gnu.org/licenses/lgpl-3.0.html>.
+ */
+
+/*
+ * Version 0.1.1
+ * Maintainer: Niels Serup <ns@metanohi.name>
+*/
+
+/*
+ * There is no real documentation for this script. Look at
+ * <http://nohix.metanohi.org/modernart.htm> to get an idea on how to
+ * implement it. It's very easy.
+ * This has currently only been tested in Conkeror, IceCat (like
+ * Firefox) 3.67 and Chromium.
+*/
+
+/*****************
+ *** CHANGELOG ***
+ 0.1.1, September 25 2010 -- Now also works with images with absolute or
+ fixed positions.
+
+ 0.1.0, August 5 2010 -- Initial release.
+*****************/
+
+createCode = function(dict) {
+    for (x in dict) {
+        try {
+            dict[x].prototype.objectParent = dict;
+        } catch (e) {};
+    }
+    return dict;
+};
+
+var modernart = createCode({
+    ModernArtRunner: function(imgElem, boxElems, lineElems,
+                              colorFunction) {
+        this.imgElem = imgElem;
+        this.boxElems = boxElems;
+        this.lineElems = lineElems;
+        this.colorFunctions = this.objectParent.colorFunctions;
+        this.colorFunction = this.colorFunctions[colorFunction];
+        this.parent = this.imgElem.parentNode;
+        this.timers = [];
+
+        for (var i in this.boxElems) {
+            for (var j in this.boxElems[i]) {
+                this.boxElems[i][j].objectParent = this;
+                this.parent.appendChild(this.boxElems[i][j]);
+            }
+        }
+        for (var i in this.lineElems)
+            this.parent.appendChild(this.lineElems[i]);
+
+        var self = this;
+        var timerPause = function() {
+            for (var i in self.timers)
+                self.timers[i].pause();
+        };
+        var timerResume = function() {
+            for (var i in self.timers)
+                self.timers[i].resume();
+        };
+        var timerToggle = function() {
+            for (var i in self.timers)
+                self.timers[i].toggle();
+        };
+        this.imgElem.pause = timerPause;
+        this.imgElem.resume = timerResume;
+        this.imgElem.toggle = timerToggle;
+        this.parent.pause = timerPause;
+        this.parent.resume = timerResume;
+        this.parent.toggle = timerToggle;
+
+        if (this.objectParent.customFunction)
+            this.objectParent.customFunction(this);
+
+        this.rgb = [0, 255, 0];
+        this.colorFunction();
+    },
+
+    Timer: function(func, delay) {
+        this.func = func;
+        this.delay = delay;
+        this.resume();
+    },
+
+    colorFunctions: {
+        flow: function() {
+            var power = parseInt(this.imgElem.getSetting(
+                'modernflowpower')) || 25;
+            var flowType = this.imgElem.getSetting(
+                'modernflowtype') || 'stop';
+            var flowIgnore = flowType == 'stop';
+            var xPower = parseInt(power / this.boxElems[0].length);
+            var yPower = parseInt(power / this.boxElems.length);
+            var flowRun = function() {
+                var r = this.rgb[0];
+                var g = this.rgb[1];
+                var b = this.rgb[2];
+                if (r < 255 && g <= 0 && b >= 255)
+                    r += 10;
+                else if (r > 0 && g >= 255 && b <= 0)
+                    r -= 10;
+                else if (r >= 255 && g < 255 && b <= 0) 
+                    g += 10;
+                else if (r <= 0 && g > 0 && b >= 255)
+                    g -= 10;
+                else if (r <= 0 && g >= 255 & b < 255)
+                    b += 10;
+                else if (r >= 255 && g <= 0 && b > 0)
+                    b -= 10;
+
+                this.rgb[0] = r;
+                this.rgb[1] = g;
+                this.rgb[2] = b;
+
+                var tr, tg, tb;
+                for (var i in this.boxElems) {
+                    for (var j in this.boxElems[i]) {
+                        if (flowIgnore) {
+                            if (r > 255) tr = 255;
+                            else tr = r;
+                            if (g > 255) tg = 255;
+                            else tg = g;
+                            if (b > 255) tb = 255;
+                            else tb = b;
+                            this.boxElems[i][j].style.setBackground(
+                                tr, tg, tb);
+                        }
+                        else
+                            this.boxElems[i][j].style.setBackground(
+                                r % 256, g % 256, b % 256);
+                        r += xPower;
+                        g += xPower;
+                        b += xPower;
+                    }
+                    r += yPower;
+                    g += yPower;
+                    b += yPower;
+                }
+            };
+            var self = this;
+            this.timers.push(new this.objectParent.Timer(
+                function() {flowRun.apply(self);}, 100));
+        },
+
+        individual: function() {
+            var IndividualBox = function(boxElem) {
+                this.elem = boxElem;
+                this.objectParent = this.elem.objectParent;
+                this.topParent = this.objectParent.objectParent;
+                this.rgb = [this.topParent.randInt(255),
+                            this.topParent.randInt(255),
+                            this.topParent.randInt(255)];
+                this.way = [this.topParent.randInt(1) || -1,
+                            this.topParent.randInt(1) || -1,
+                            this.topParent.randInt(1) || -1];
+                this.generateSpeed();
+                var self = this;
+                this.objectParent.timers.push(
+                    new this.topParent.Timer(function() {self.run()}, 100));
+            };
+
+            IndividualBox.prototype.generateSpeed = function() {
+                this.spd = [this.topParent.randInt(5, 15),
+                            this.topParent.randInt(5, 15),
+                            this.topParent.randInt(5, 15)];
+            };
+
+            IndividualBox.prototype.run = function() {
+                var rgb = this.rgb;
+                var i;
+                this.elem.style.setBackground(rgb[0], rgb[1], rgb[2]);
+                for (i = 0; i < 3; i++) {
+                    rgb[i] += this.spd[i] * this.way[i];
+                    if (this.rgb[i] >= 255) {
+                        rgb[i] = 255 - (this.spd[i] - (rgb[i] - 255));
+                        this.generateSpeed();
+                        this.way[i] *= -1;
+                    }
+                    else if (this.rgb[i] <= 0) {
+                        rgb[i] = this.rgb[i] + this.spd[i];
+                        this.generateSpeed();
+                        this.way[i] *= -1;
+                    }
+                }
+                for (i in rgb)
+                    this.rgb[i] = rgb[i];
+            };
+
+            for (var i in this.boxElems) {
+                for (var j in this.boxElems[i])
+                    new IndividualBox(this.boxElems[i][j]);
+            }
+        }
+    },
+
+    applyEffectToImages: function() {
+        var candidates = document.getElementsByTagName('img');
+        for (var i = 0, node; node = candidates[i++];) {
+            if (node.className.indexOf('modernart') != -1) {
+                if (arguments.length > 0)
+                    this.applyEffectToImage(node, arguments[0]);
+                else
+                    this.applyEffectToImage(node);
+            }
+        }
+    },
+
+    applyEffectToImage: function(imgElem) {
+        var i, j;
+        var size = [imgElem.offsetWidth, imgElem.offsetHeight];
+        var parent = imgElem.parentNode;
+        var colorFunction = imgElem.getSetting('moderncolor') || 'flow';
+        var rectSize = parseInt(imgElem.getSetting('modernrect')) || 20;
+        var lineWidth = parseInt(imgElem.getSetting('modernline'));
+        if (isNaN(lineWidth))
+            lineWidth = 5;
+        var opacity = parseFloat(imgElem.getSetting('modernopacity')) || 0.5;
+        var numbers = parseInt(imgElem.getSetting('modernnumbers'));
+        if (arguments.length > 1)
+            this.customFunction = arguments[1];
+        else
+            this.customFunction = null;
+
+        if (!numbers) {
+            numbers = [];
+            var f = rectSize + lineWidth;
+            for (i = 0; i < 2; i++)
+                numbers.push(parseInt((size[i] + lineWidth) / f));
+        }
+        else {
+            var relativeTo = imgElem.getSetting(
+                'modernnumbersrel') || 'x';
+            if (relativeTo == 'x') {
+                numbers = [numbers,
+                           parseInt(size[1] / (size[0] / numbers))];
+                rectSize = ((size[0] + lineWidth) /
+                            numbers[0] - lineWidth);
+            }
+            else { // y
+                numbers = [parseInt(size[0] / (size[1] / numbers)),
+                           numbers];
+                rectSize = ((size[1] + lineWidth) /
+                            numbers[1] - lineWidth);
+            }
+        }
+
+        if (lineWidth == 0) {
+            rectSize = [];
+            for (i = 0; i < 2; i++)
+                rectSize.push(size[i] / numbers[i]);
+
+            lineWidth = [0, 0];
+        }
+        else {
+            lineWidth = [];
+            for (i = 0; i < 2; i++)
+                lineWidth.push((size[i] - numbers[i] * rectSize) /
+                               (numbers[i] - 1));
+
+            rectSize = [rectSize, rectSize];
+        }
+
+        var container = document.createElement('div');
+        container.className = imgElem.className;
+        container.style.set('width', size[0] + 'px');
+        container.style.set('height', size[1] + 'px');
+        container.style.set('padding', '0');
+        container.style.set('display', 'inline-block');
+        container.style.set('float', 'none');
+        found_pos = imgElem.style.getPropertyValue('position');
+        container.style.set('position', imgElem.getSetting('modernposition')
+        || found_pos || 'relative');
+
+        try {
+            var property, value;
+            for (i in imgElem.style) {
+                property = imgElem.style[i];
+                value = imgElem.style.getPropertyValue(property);
+                if (value)
+                    container.style.set(property, value);
+            }
+        } catch (e) {};
+
+        imgElem.style.set('border', 'none');
+        imgElem.style.set('margin', '0');
+        imgElem.style.set('left', '0');
+        imgElem.style.set('top', '0');
+        imgElem.style.set('background-color', '#000');
+        parent.insertBefore(container, imgElem);
+        parent.removeChild(imgElem);
+        container.appendChild(imgElem);
+
+        var elemPos = [0, 0];
+        var boxElems = [];
+        for (i = 0; i < numbers[1]; i++) {
+            boxes = [];
+            for (j = 0; j < numbers[0]; j++) {
+                elem = document.createElement('div');
+                elem.style.set('width', rectSize[0] + 'px');
+                elem.style.set('height', rectSize[1] + 'px');
+                elem.style.set('background-color', 'transparent');
+                elem.style.set('position', 'absolute');
+                elem.style.set('left', elemPos[0] + 'px');
+                elem.style.set('top', elemPos[1] + 'px');
+                elem.style.set('margin', '0');
+                elem.style.set('padding', '0');
+                elem.style.set('border', 'none');
+                elem.style.setOpacity(opacity);
+                boxes.push(elem);
+                elemPos[0] += rectSize[0] + lineWidth[0];
+            }
+            boxElems.push(boxes);
+            elemPos[1] += rectSize[1] + lineWidth[1];
+            elemPos[0] = 0;
+        }
+
+        var lineElems = [];
+        if (lineWidth[0] > 0) {
+            var tempWidth, tempHeight, tempTop, tempLeft;
+            for (i = 0; i < 2; i++) {
+                elemPos = rectSize[i];
+                if (i == 0) {
+                    tempWidth = lineWidth[0];
+                    tempHeight = size[1];
+                }
+                else {
+                    tempWidth = size[0];
+                    tempHeight = lineWidth[1];
+                }
+                for (j = 0; j < numbers[i] - 1; j++) {
+                    if (i == 0) {
+                        tempLeft = elemPos;
+                        tempTop = 0;
+                    }
+                    else {
+                        tempLeft = 0;
+                        tempTop = elemPos;
+                    }
+                    elem = document.createElement('div');
+                    elem.style.set('width', tempWidth + 'px');
+                    elem.style.set('height', tempHeight + 'px');
+                    elem.style.set('background-color', '#000');
+                    elem.style.set('position', 'absolute');
+                    elem.style.set('left', tempLeft + 'px');
+                    elem.style.set('top', tempTop + 'px');
+                    elem.style.set('margin', '0');
+                    elem.style.set('padding', '0');
+                    elem.style.set('border', 'none');
+                    lineElems.push(elem);
+                    elemPos += rectSize[i] + lineWidth[i];
+                }
+            }
+        }
+        new this.ModernArtRunner(imgElem, boxElems, lineElems, colorFunction);
+    },
+
+    randInt: function() { // function([min, ]max)
+        if (arguments.length == 0)
+            return 0;
+        var min, max;
+        if (arguments.length > 1) {
+            min = arguments[0];
+            max = arguments[1];
+        }
+        else {
+            min = 0;
+            max = arguments[0];
+        }
+        return Math.floor(Math.random() * (max + 1)) + min;
+    }
+});
+delete createCode;
+
+modernart.Timer.prototype.resume = function() {
+    this.interval = setInterval(this.func, this.delay);
+    this.running = true;
+};
+
+modernart.Timer.prototype.pause = function() {
+    clearInterval(this.interval);
+    delete this.interval;
+    this.running = false;
+};
+
+modernart.Timer.prototype.toggle = function() {
+    if (this.running)
+        this.pause();
+    else
+        this.resume();
+};
+
+HTMLElement.prototype.getSetting = function(property) {
+    var string = this.className;
+    var start, end;
+    start = string.indexOf(property + ':');
+
+    if (start != -1) {
+        end = string.indexOf(' ', start);
+        if (end == -1)
+            return string.substring(start + property.length + 1);
+        else
+            return string.substring(start + property.length + 1, end);
+    }
+};
+
+CSSStyleDeclaration.prototype.set = function(property, value) {
+    this.setProperty(property, value, null);
+};
+
+CSSStyleDeclaration.prototype.setOpacity = function(val) {
+    this.set('opacity', val);
+    this.set('-moz-opacity', val);
+    this.set('-khtml-opacity', val);
+    this.filter = 'alpha(opacity=' + val*100 + ')';
+};
+
+CSSStyleDeclaration.prototype.setBackground = function(r, g, b) {
+    this.set('background-color', 'rgb('+r+', '+g+', '+b+')');
+};
--- a/nohix/videocanvas1.htm
+++ b/nohix/videocanvas1.htm
@@ -0,0 +1,39 @@
+<!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">
+    <head>
+        <title>Fun with &lt;video&gt; and &lt;canvas&gt; {Flicker}</title>
+        <style type='text/css'>
+            @import url('data/genericstyle.css');
+
+            hr {
+                margin: 5px 0;
+                border-color: #fff;
+            }
+        </style>
+        <script type="text/javascript" src="videocanvas1.js"></script>
+        <script type="text/javascript">
+            window.onload = function() {processor.doLoad();}
+        </script>
+    </head>
+    <body>
+        <div>
+            <video id="video" src="media/video.ogv" controls="true" autoplay="true" />
+        </div>
+        <div>
+            <canvas id="c2" width="160" height="96" />
+        </div>
+        <div class="clear"></div>
+        <div>
+            <p>Video clip &copy; copyright Blender Foundation | <a href="http://www.bigbuckbunny.org">www.bigbuckbunny.org</a></p>
+            <p>Licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 license</a></p>
+            <hr />
+            <p>Code and XHTML partly taken from <a href="http://www.mozbox.org/pub/green/index.xhtml">an example from mozbox</a>.</p>
+        </div>
+        <div class="clear"></div>
+        <div>
+            <p><a href=".">Back to index</a></p>
+        </div>
+    </body>
+</html>
+
--- a/nohix/videocanvas1.js
+++ b/nohix/videocanvas1.js
@@ -0,0 +1,74 @@
+// Code layout taken from http://www.mozbox.org/pub/green/main.js
+
+var processor = {
+	doLoad: function() {
+		this.video = document.getElementById("video");
+		
+		this.c1 = document.createElement("canvas");
+		this.c1.width = "160"
+		this.c1.height = "96"
+		this.ctx1 = this.c1.getContext("2d");
+		
+		this.c2 = document.getElementById("c2");
+		this.ctx2 = this.c2.getContext("2d");
+		
+		var self = this;
+		this.video.addEventListener("play", function() {
+			self.width = self.video.videoWidth / 2;
+			self.height = self.video.videoHeight / 2;
+			self.len = self.width * self.height;
+			
+			self.video.addEventListener('timeupdate', function(event) {
+				self.computeFrame()
+			}, true);
+		}, false);
+	},
+
+	computeFrame: function() {
+		var frame, data, i, offset, rgba, mod
+		
+		this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+		frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+		data = frame.data;
+		ndata = []
+		
+		for (i = 0; i < this.len; i++) {
+			ndata.push(0);
+			ndata.push(0);
+			ndata.push(0);
+			ndata.push(255);
+		}
+		
+		offset = Math.floor(Math.random()*10) + 5
+		
+		for (i = 0; i < this.len; i++) {
+			rgba = data.getPixel(i);
+			mod = i % this.width;
+			
+			ndata.setPixel(i, 1, rgba[1]);
+			
+			if (mod + offset < this.width)
+				ndata.setPixel(i + offset, 0, rgba[0]);
+			if (mod - offset > 0)
+				ndata.setPixel(i - offset, 2, rgba[2]);
+			
+		}
+		
+		frame.data = ndata
+		this.ctx2.putImageData(frame, 0, 0);
+		return;
+	}
+};
+
+Array.prototype.getPixel = function(number) {
+	var real = number * 4;
+	return this.slice(real, real + 4);
+};
+
+Array.prototype.setPixel = function(number, rgba, val) {
+	var real = number * 4 + rgba;
+	if (number < 0 || real > this.length)
+		return;
+	this[real] = val;
+};
+
--- a/nohix/videocanvas2.htm
+++ b/nohix/videocanvas2.htm
@@ -0,0 +1,39 @@
+<!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">
+    <head>
+        <title>Fun with &lt;video&gt; and &lt;canvas&gt; {Black and white lightning}</title>
+        <style type='text/css'>
+            @import url('data/genericstyle.css');
+
+            hr {
+                margin: 5px 0;
+                border-color: #fff;
+            }
+        </style>
+        <script type="text/javascript" src="videocanvas2.js"></script>
+        <script type="text/javascript">
+            window.onload = function() {processor.doLoad();}
+        </script>
+    </head>
+    <body>
+        <div>
+            <video id="video" src="media/video.ogv" controls="true" autoplay="true" />
+        </div>
+        <div>
+            <canvas id="c2" width="160" height="96" />
+        </div>
+        <div class="clear"></div>
+        <div>
+            <p>Video clip &copy; copyright Blender Foundation | <a href="http://www.bigbuckbunny.org">www.bigbuckbunny.org</a></p>
+            <p>Licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 license</a></p>
+            <hr />
+            <p>Code and XHTML partly taken from <a href="http://www.mozbox.org/pub/green/index.xhtml">an example from mozbox</a>.</p>
+        </div>
+        <div class="clear"></div>
+        <div>
+            <p><a href=".">Back to index</a></p>
+        </div>
+    </body>
+</html>
+
--- a/nohix/videocanvas2.js
+++ b/nohix/videocanvas2.js
@@ -0,0 +1,59 @@
+// Code layout taken from http://www.mozbox.org/pub/green/main.js
+
+var processor = {
+	doLoad: function() {
+		this.video = document.getElementById("video");
+		
+		this.c1 = document.createElement("canvas");
+		this.c1.width = "160"
+		this.c1.height = "96"
+		this.ctx1 = this.c1.getContext("2d");
+		
+		this.c2 = document.getElementById("c2");
+		this.ctx2 = this.c2.getContext("2d");
+		
+		var self = this;
+		this.video.addEventListener("play", function() {
+			self.width = self.video.videoWidth / 2;
+			self.height = self.video.videoHeight / 2;
+			self.len = self.width * self.height;
+			
+			self.video.addEventListener('timeupdate', function(event) {
+				self.computeFrame()
+			}, true);
+		}, false);
+	},
+
+	computeFrame: function() {
+		var frame, data, i, num, rgba
+		
+		this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+		frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+		data = frame.data;
+		
+		num = Math.floor(Math.random()*3)
+		
+		for (i = 0; i < this.len; i++) {
+			rgba = data.getPixel(i);
+			
+			data.setPixel(i, 0, rgba[num]);
+			data.setPixel(i, 1, rgba[num]);
+			data.setPixel(i, 2, rgba[num]);
+		}
+		this.ctx2.putImageData(frame, 0, 0);
+		return;
+	}
+};
+
+Array.prototype.getPixel = function(number) {
+	var real = number * 4;
+	return this.slice(real, real + 4);
+};
+
+Array.prototype.setPixel = function(number, rgba, val) {
+	var real = number * 4 + rgba;
+	if (number < 0 || real > this.length)
+		return;
+	this[real] = val;
+};
+
--- a/nohix/videocanvas3.htm
+++ b/nohix/videocanvas3.htm
@@ -0,0 +1,39 @@
+<!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">
+    <head>
+        <title>Fun with &lt;video&gt; and &lt;canvas&gt; {Color uncertainty}</title>
+        <style type='text/css'>
+            @import url('data/genericstyle.css');
+
+            hr {
+                margin: 5px 0;
+                border-color: #fff;
+            }
+        </style>
+        <script type="text/javascript" src="videocanvas3.js"></script>
+        <script type="text/javascript">
+            window.onload = function() {processor.doLoad();}
+        </script>
+    </head>
+    <body>
+        <div>
+            <video id="video" src="media/video.ogv" controls="true" autoplay="true" />
+        </div>
+        <div>
+            <canvas id="c2" width="160" height="96" />
+        </div>
+        <div class="clear"></div>
+        <div>
+            <p>Video clip &copy; copyright Blender Foundation | <a href="http://www.bigbuckbunny.org">www.bigbuckbunny.org</a></p>
+            <p>Licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 license</a></p>
+            <hr />
+            <p>Code and XHTML partly taken from <a href="http://www.mozbox.org/pub/green/index.xhtml">an example from mozbox</a>.</p>
+        </div>
+        <div class="clear"></div>
+        <div>
+            <p><a href=".">Back to index</a></p>
+        </div>
+    </body>
+</html>
+
--- a/nohix/videocanvas3.js
+++ b/nohix/videocanvas3.js
@@ -0,0 +1,57 @@
+// Code layout taken from http://www.mozbox.org/pub/green/main.js
+
+var processor = {
+	doLoad: function() {
+		this.video = document.getElementById("video");
+		
+		this.c1 = document.createElement("canvas");
+		this.c1.width = "160"
+		this.c1.height = "96"
+		this.ctx1 = this.c1.getContext("2d");
+		
+		this.c2 = document.getElementById("c2");
+		this.ctx2 = this.c2.getContext("2d");
+		
+		var self = this;
+		this.video.addEventListener("play", function() {
+			self.width = self.video.videoWidth / 2;
+			self.height = self.video.videoHeight / 2;
+			self.len = self.width * self.height;
+			
+			self.video.addEventListener('timeupdate', function(event) {
+				self.computeFrame()
+			}, true);
+		}, false);
+	},
+
+	computeFrame: function() {
+		var frame, data, i, j, rgba
+		
+		this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+		frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+		data = frame.data;
+		
+		for (i = 0; i < this.len; i++) {
+			rgba = data.getPixel(i);
+			
+			for (j = 0; j < 3; j++) {
+			data.setPixel(i, j, rgba[Math.floor(Math.random()*3)]);
+			}
+		}
+		this.ctx2.putImageData(frame, 0, 0);
+		return;
+	}
+};
+
+Array.prototype.getPixel = function(number) {
+	var real = number * 4;
+	return this.slice(real, real + 4);
+};
+
+Array.prototype.setPixel = function(number, rgba, val) {
+	var real = number * 4 + rgba;
+	if (number < 0 || real > this.length)
+		return;
+	this[real] = val;
+};
+
--- a/nohix/wmap.svg
+++ b/nohix/wmap.svg
--- a/nohix/worldmap.html
+++ b/nohix/worldmap.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <title>Graphics {Interactive SVG World map}</title>
+        <style type='text/css'>
+            @import url('data/genericstyle.css');
+        </style>
+    </head>
+    <body>
+        <h1>World map</h1>
+        <p>I have created an interactive world map in SVG. Check it
+        out <a href='wmap.svg'>here</a>. It is based
+        on <a href='http://commons.wikimedia.org/wiki/File:World_location_map_English.svg'>http://commons.wikimedia.org/wiki/File:World_location_map_English.svg</a>.</p>
+        <h2>Screenshot (for non-svg browsers)</h2>
+        <p><img src='media/wmap-screenshot.png' alt='Screenshot' /></p>
+
+        <div>
+            <p><a href=".">Back to index</a></p>
+        </div>
+    </body>
+</html>
+