Asynchronicity was pretty easy!
authorBenjamin Smedberg <benjamin@smedbergs.us>
Fri, 12 Dec 2008 15:16:16 -0500
changeset 6 a87e98928885
parent 5 b45eafc86660
child 7 266549722e4e
push id1
push userbsmedberg@mozilla.com
push dateFri, 12 Dec 2008 21:25:26 +0000
Asynchronicity was pretty easy!
jswordle.js
wordle.html
--- a/jswordle.js
+++ b/jswordle.js
@@ -384,140 +384,72 @@ function draw()
    * place the first word in a position randomly
    */ 
   [word, size] = words[0];
   vertical = Math.random() < kVerticalRatio * size / 88;
   [wdata, wshadow] = drawWord(cx, word, size, vertical);
   x = randomInt(0, kWidth - wdata.width);
   y = randomInt(0, kHeight - wdata.height);
   merge(imgdata, wdata, x, y);
+
+  yield;
   
   for (let i = 1; i < 10; ++i) {
     let [word, size] = words[i];
 
     vertical = Math.random() < kVerticalRatio * size / 88;
     [wdata, wshadow] = drawWord(cx, word, size, vertical);
 
-    [x, y] = placeWord(imgdata, wshadow);
-    if (x != null)
-      merge(imgdata, wdata, x, y);
-    else
-      setStatus('unable to place word: ' + word);
+    for (let r in placeWord(imgdata, wshadow)) {
+      if (r) {
+	[x, y] = r;
+	merge(imgdata, wdata, x, y);
+      }
+      else {
+	yield;
+      }
+    }
+
+    yield;
   }
 
   cx.putImageData(imgdata, 0, 0);
 }
 
 function placeWord(imgdata, wdata)
 {
   let x = randomInt(0, kWidth - wdata.width);
   let y = randomInt(0, kHeight - wdata.height);
   for (let t = 0; t < 20; ++t) {
     let x2 = randomInt(0, kWidth - wdata.width);
     let y2 = randomInt(0, kWidth - wdata.height);
 
     [x, y] = slide(imgdata, wdata, x, y, x2, y2);
-    if (x != null)
-      return [x, y];
+    if (x != null) {
+      yield [x, y];
+      return;
+    }
+
+    yield;
 
     x = x2;
     y = y2;
   }
-
-  return [null, null];
 }
 
-/*
-
-  for each ([word, size] in words) {
-    cx.font = size + 'px Utopia';
-    let twidth = cx.measureText(word).width;
-
-    let x, y;
-    let vertical = false;
-
-    if (first) {
-      // place the first (largest) piece of text
-      x = Math.random() * (kWidth - twidth);
-      y = Math.random() * (kHeight - size);
-      first = false;
-    }
-    else {
-      let ok = false;
+var gCurDraw;
 
-      for (let t = 0; t < 1000 && !ok; ++t) {
-        if (vertical) {
-          x = Math.random() * (kWidth - size);
-          y = Math.random() * (kHeight - twidth);
-
-          if (hitTest(x, y, size, twidth)) {
-            for (y in yOutbound(y, twidth)) {
-              if (!hitTest(x, y, size, twidth)) {
-                ok = true;
-                break;
-              }
-            }
-          }
-          else {
-            for (y in yInbound(y, twidth)) {
-              if (hitTest(x, y, size, twidth)) {
-                ok = true;
-                break;
-              }
-            }
-          }
-        }
-        else {
-          x = Math.random() * (kWidth - twidth);
-          y = Math.random() * (kHeight - size);
+function drawasync()
+{
+  if (gCurDraw)
+    gCurDraw.close();
 
-          if (hitTest(x, y, twidth, size)) {
-            for (x in xOutbound(x, twidth)) {
-              if (!hitTest(x, y, twidth, size)) {
-                ok = true;
-                break;
-              }
-            }
-          }
-          else {
-            for (x in xInbound(x, twidth)) {
-              if (hitTest(x, y, twidth, size)) {
-                ok = true;
-                break;
-              }
-            }
-          }
-        }
-        if (!ok)
-          vertical = !vertical;
-      }
-      if (!ok) {
-        // alert("Failed to place word: " + word);
-        continue;
-      }
+  function doSomeWork() {
+    try {
+      gCurDraw.next();
+      setTimeout(doSomeWork, 0);
     }
+    catch (e if e instanceof StopIteration) { }
+  }
 
-    if (vertical) {
-      cx.textAlign = 'right';
-      cx.save();
-      cx.translate(x, y);
-      cx.rotate(270 * Math.PI / 180);
-      cx.fillText(word, x, y);
-      cx.restore();
-    }
-    else {
-      cx.textAlign = 'left';
-      cx.fillText(word, x, y);
-    }
-    
-    if (size > 30) {
-      curdata = cx.getImageData(0, 0, kWidth, kHeight).data;
-    }
-    else {
-      // below 30px, we're not likely to fit words in the cracks... just
-      // set pixels to black
-      for (let ix = x + twidth - 1; ix >= x; --ix)
-        for (let iy = y + size - 1; iy >= y; --iy)
-          curdata[(ix + (iy * kWidth)) * 4] = 255;
-    }
-  }
-}
-*/
\ No newline at end of file
+  gCurDraw = draw();
+  setTimeout(doSomeWork, 0);
+}
\ No newline at end of file
--- a/wordle.html
+++ b/wordle.html
@@ -3,17 +3,17 @@
   <style type="text/css">
     td {
       vertical-align: top;
     }
   </style>
 </head>
 <body>
   <div>
-  <input type="button" value="Get Words" onclick="draw()">
+  <input type="button" value="Get Words" onclick="drawasync()">
   </div>
 
   <table>
    <tr>
     <td>
      <canvas width="800" height="800" id="cc" style="border: 1px solid black;"></canvas>
     <td>
      <pre id="status"></pre>