nbardy · butchler · Mar 2, 2012 · Mar 3, 2012 · Mar 4, 2012 · Mar 4, 2012
diff --git a/index.html b/index.html
@@ -1,6 +1,7 @@
 <html>
 <head>
    <title>Function Painter</title>
+   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="painter.js" /></script>
    <style type="text/css">
       canvas
@@ -32,7 +33,7 @@ <h2>Input functions as f(x,y):</h2>
    <div id="functions">
       <label for="redFunction">Red Function:</label> <input type="text" value='(21*sin(x+y)*t/50+(x-y))^t' size='100' id="redFunction" /><br />
       <label for="greenFunction">Green Function:</label> <input type="text" value='(5*sin(x-y)*t/50+(x+y))^t' size='100'id="greenFunction" /><br />
-      <label for="blueFunction">Blue Function:</label> <input type="text" value='123+123*sin(t/20)*sin(t/320*sqrt((123-x)*(123-x) + (45-y)*(45-y)))' size='100'id="blueFunction" /><br />
+      <label for="blueFunction">Blue Function:</label> <input type="text" value='123+123*sin(t/20)*sin(t/320*sqrt(bx*bx + by*by))' size='100'id="blueFunction" /><br />
    </div>
 
    <div id="options">
@@ -45,6 +46,9 @@ <h2>Input functions as f(x,y):</h2>
       <button id="stop" type="button" value="Stop it."  onclick="javascript:stopDraw();" >Stop It.</button>
    </div>
 
+   <h3>Preprocessor</h3>
+   <textarea id="preprocessor" rows="15" cols="80">bx = 123 - x; by = 45 - y;</textarea>
+
    <h2>Things to try</h2>
    <ul>
       <li>8/(2*2*(x^2-y^2))*cos((x - y)/2*t)*sin((x+y)/2)*t</li>
@@ -58,6 +62,13 @@ <h2>Things to try</h2>
             <li>Blue: 255*(t%4)</li>
          </ul>
       </li>
+      <li>Rainbow:
+         <ul>
+            <li>Red: (function(x, y) { return 1.618*256*(function(x, offset) { var w = 10; x = (x/w + offset) % 12; if (x &lt; 2) return x/2; else if (x &gt;= 2 &amp;&amp; x &lt; 6) return 1; else if (x &gt;= 6 &amp;&amp; x &lt; 8) return (8 - x)/2; else return 0; })(sqrt(x*x + y*y), 4); })(x - 100, y - 300)</li>
+            <li>Green: (function(x, y) { return 1.618*256*(function(x, offset) { var w = 10; x = (x/w + offset) % 12; if (x &lt; 2) return x/2; else if (x &gt;= 2 &amp;&amp; x &lt; 6) return 1; else if (x &gt;= 6 &amp;&amp; x &lt; 8) return (8 - x)/2; else return 0; })(sqrt(x*x + y*y), 0); })(x - 100, y - 300)</li>
+            <li>Blue: (function(x, y) { return 1.618*256*(function(x, offset) { var w = 10; x = (x/w + offset) % 12; if (x &lt; 2) return x/2; else if (x &gt;= 2 &amp;&amp; x &lt; 6) return 1; else if (x &gt;= 6 &amp;&amp; x &lt; 8) return (8 - x)/2; else return 0; })(sqrt(x*x + y*y), 8); })(x - 100, y - 300)</li>
+         </ul>
+      </li>
    </ul>
 </body>
 </html>
diff --git a/paintWorker.js b/paintWorker.js
@@ -1,10 +1,16 @@
+var xOffset = 0, yOffset = 0;
+
 self.addEventListener('message', function(e) {
    if (e.data.command == 'start') {
       startThisWorker(e);
       }
    else if (e.data.command == 'stop') {
       self.close();
    }
+   else if (e.data.command == 'pan') {
+      xOffset += e.data.x;
+      yOffset += e.data.y; 
+   }
    else { 
       //do nothing if command is not known
       }
@@ -18,39 +24,41 @@ function startThisWorker(e) {
    eval("function redFunc(x,y,t) { return " + e.data.redstring + ";}");
    eval("function greenFunc(x,y,t) { return " + e.data.greenstring + ";}");
    eval("function blueFunc(x,y,t) { return " + e.data.bluestring + ";}");
+   eval("function getColor(x,y,t) { " + e.data.preprocessorString + " return { r: clamp(redFunc(x,y,t)), g: clamp(greenFunc(x,y,t)), b: clamp(blueFunc(x,y,t)) }; }");
 
-   drawPicture(e.data.imageData, e.data.width, e.data.height, redFunc, greenFunc, blueFunc, currenttime);
+   drawPicture(e.data.imageData, e.data.width, e.data.height, getColor, currenttime);
    if(e.data.tstate){
       setInterval( function() {
-         drawPicture(e.data.imageData, e.data.width, e.data.height, redFunc, greenFunc, blueFunc, currenttime); 
+         drawPicture(e.data.imageData, e.data.width, e.data.height, getColor, currenttime); 
          currenttime += 1;
       }, e.data.tinterval);
    }
 }
 
-function drawPicture(imageData, width, height, redFunc, greenFunc, blueFunc, t) {
+function drawPicture(imageData, width, height, getColor, t) {
    pos = 0; // index position into imagedata array
 
    // walk left-to-right, top-to-bottom; it's the
    // same as the ordering in the imagedata array:
 
    for (y = 0; y < height; y++) {
      for (x = 0; x < width; x++) {
-
-         // calculate RGB values based on sine
-         r = clamp(redFunc(x,y,t));
-         b = clamp(blueFunc(x,y,t));
-         g = clamp(greenFunc(x,y,t));
+
+         var pannedX = x - xOffset;
+         var pannedY = y - yOffset;
+
+         // Calculate rgb values
+         color = getColor(pannedX, pannedY, t);
 
          // set red, green, blue, and alpha:
-         imageData.data[pos++] = r;
-         imageData.data[pos++] = g;
-         imageData.data[pos++] = b;
+         imageData.data[pos++] = color.r;
+         imageData.data[pos++] = color.g;
+         imageData.data[pos++] = color.b;
          imageData.data[pos++] = 0xff; // alpha
      }
    }
 
-   self.postMessage({'imageData': imageData, 'maximum': maximum, 'minimum': minimum});
+   self.postMessage({'imageData': imageData});
 }
 
 function clamp(value) {

diff --git a/painter.js b/painter.js
@@ -1,3 +1,44 @@
+$(function() {
+   window.addEventListener("selectstart", function (e) {
+      // If the select event is triggered on the #painter object, prevent the default behavior.
+      // This prevents the browser for annoyingly trying to select things when you're clicking/dragging to pan through the canvas.
+      if ($(e.target)[0] == $('#painter')[0])
+         e.preventDefault();
+   });
+
+   $('#painter').mousedown(function (e) {
+      if (e.which == 1)
+      {
+         this.panning = true;
+
+         this.prevMousePosition = getMousePosition(e, this);
+      }
+   }).mouseup(function (e) {
+      this.panning = false;
+   }).mousemove(function (e) {
+      if (this.panning && typeof drawWorker != 'undefined')
+      {
+         var mousePosition = getMousePosition(e, this);
+
+         drawWorker.postMessage({
+            'command': 'pan',
+            'x': mousePosition.x - this.prevMousePosition.x,
+            'y': mousePosition.y - this.prevMousePosition.y
+         });
+
+         this.prevMousePosition = mousePosition;
+      }
+   });
+
+   // Returns the position of the mouse relative to the given object
+   function getMousePosition(event, object)
+   {
+      var mouseX = event.pageX - $(object).offset().left;
+      var mouseY = event.pageY - $(object).offset().top;
+      return { x: mouseX, y: mouseY };
+   }
+});
+
 function draw() {
    //Retrieve information from the dom
    canvasDraw = document.getElementById('painter');
@@ -10,6 +51,7 @@ function draw() {
    redstring = document.getElementById('redFunction').value;
    greenstring = document.getElementById('greenFunction').value;
    bluestring = document.getElementById('blueFunction').value;
+   preprocessorString = document.getElementById('preprocessor').value;
 
    tstate = document.getElementById('tVariable').checked;
    tinterval = parseInt(document.getElementById('tInterval').value);
@@ -19,7 +61,7 @@ function draw() {
    imageData = context.createImageData(width, height);
 
    //Start worker for drawing data from function
-   startDrawWorker(imageData, width, height, redstring, greenstring, bluestring, tinterval, tstate);
+   startDrawWorker(imageData, width, height, redstring, greenstring, bluestring, preprocessorString, tinterval, tstate);
 
 
 
@@ -37,7 +79,7 @@ function stopDraw() {
    document.getElementById('start').disabled=false;
 }
 
-function startDrawWorker(imageData, width, height, redstring, greenstring, bluestring, tinterval, tstate) {
+function startDrawWorker(imageData, width, height, redstring, greenstring, bluestring, preprocessorString, tinterval, tstate) {
    //Create Worker
    drawWorker = new Worker('paintWorker.js');
 
@@ -53,7 +95,9 @@ function startDrawWorker(imageData, width, height, redstring, greenstring, blues
                        'greenstring': greenstring,
                        'bluestring': bluestring,
                        'tstate': tstate,
-                       'tinterval': tinterval});
+                       'tinterval': tinterval,
+                       'preprocessorString': preprocessorString
+                       });
 
    return drawWorker;
 }