Fire JS Bin - Discovr

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

function randomSize() {
  var rand = Math.floor(Math.random() * 5);
  if (rand <= 1) return 179;
  else if (rand == 2 || rand == 3) return 89;
  else return 44;
}

function clipped(x, y) {
  if (x >= 719 || y >= 539) return 'offScreen';
  var numImages = imagesOnCanvas.length;
  for (var i = 0; i < numImages; i++) {
    if (x >= imagesOnCanvas[i].dx && x < imagesOnCanvas[i].dx + imagesOnCanvas[i].howBig && y >= imagesOnCanvas[i].dy && y < imagesOnCanvas[i].dy + imagesOnCanvas[i].howBig) return imagesOnCanvas[i];
  }
  return false;
}

function iOC(image, dx, dy, howBig, photoId) {
  this.image = image;
  this.dx = dx;
  this.dy = dy;
  this.howBig = howBig;
  this.photoId = photoId;
}

function drawI(imageData) {
  var rand = Math.floor(Math.random() * 11);
  if (rand < 1) rand = 1;
  var i = 10;
  var pause = 0;
  var grow = setInterval(grower, rand);

function wipeCanvas() {
  previewCtx.clearRect(0, 0, 719, 539);
}

function printHistory() {
  var historyLength = canvasHistory.length;
  var historyHTML = '';
  for (var i = 0; i < historyLength; i++) {
    historyHTML += '<li>' + canvasHistory[i].replace(/\+/g, " "); + '</li>';
  }
  $('#history').html(historyHTML);
}

<!DOCTYPE html>
<html>
  
  <head>
    <meta charset=utf-8 />
    <meta name="description" content="Flickr search app, that draws preview images to canvas, click another tag and keep on drilling.">
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
    <title>Discovr</title>
  </head>
  
  <body>
    <div id="wrapper">
      <header id="searchPhotos">
        <h1 class="heading1">Discovr</h1>
        <form action="#" method="post">
          <ol class="formList">
            <li class="formElementWrapper">
              <label class="label" for="tags">
                What shall we search for?
              </label>
              <input type="text" id="tags" name="tags" />
            </li>
            <li>
              <input type="submit" value="Search" class="search" />
            </li>
          </ol>
        </form>
      </header>
      <aside id="historyContainer">
        <h2 class="heading2">Search History:</h2>
        <ul id="history"></ul>
        <span id="clearHistory">Clear History</span>
      </aside>
      <section id="drawHere">
        <canvas id="preview" height="540" width="720"></canvas>
      </section>
    </div>
  </body>

</html>

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
body { line-height:1; color:#000; background:#fff; }
ol, ul { list-style:none; }
table { border-collapse:collapse; border-spacing:0; }
caption, th, td { text-align:left; font-weight:normal; }
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q { quotes:"" ""; }
body { background:#e5e4e3; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:62.5%; }
.heading1 { background:#90b3de; color:#fff; float:left; font-family:Georgia; font-size:3.5em; font-weight:bold; margin:20px 1px 0 0; padding:5px 0; text-align:center; width:219px; }
.heading2 { background:#afaca9; font-size:1.8em; margin:1px 0 0 0; padding:5px 0 5px 5px; width:214px; }
#wrapper { margin:0 auto; overflow:visible; position:relative; width:962px; }
#searchPhotos { overflow:hidden; width:962px; }
form { float:left; width:560px; }
.formList { overflow:hidden; padding:20px 0 0 20px; }
.formElementWrapper { float:left; }
.label { font-size:1.4em; margin-right:10px; }
#tags { border:1px solid #afaca9; font-size:1.8em; height:1.6em; margin-right:3px; padding:.2em 0 0 .2em; }
.search { background:#afaca9; border:1px solid #afaca9; border:0; cursor:pointer; font-size:1.4em; height:2.4214em; margin-right:5px; }
.search:hover { background:#90b3de; color:#fff; }
.error { color:#c00; float:left; font-size:1.4em; margin-top:31px; width:150px; }
#historyContainer { clear:left; float:left; width:220px; }
#history li { background:#fff; cursor:pointer; font-size:1.6em; line-height:1.3em; padding-left:5px; }
#history li:hover { background:#e5e4e3; }
#clearHistory { background:#afaca9; cursor:pointer; display:block; font-size:1.2em; margin:1px 0 0 0; padding:3px 0; text-align:center; width:219px; }
#clearHistory:hover { background:#90b3de; color:#fff; }
#drawHere { background:#fff; border:1px solid #90b3de; float:left; height:540px; padding:1px 0 0 1px; width:720px; }
#photoInfo { background:#fff; border:3px solid #debb91; overflow:hidden; width:353px; }
.clickedImage { float:left; margin-right:10px; }
.authorName { font-size:1.4em; font-weight:bold; margin:5px 0; text-decoration:underline; }
.authorName a { color:#000; }
.tagList { margin-bottom:5px; overflow:hidden; }
.tag { color:#90b3de; cursor:pointer; float:left; font-size:1.1em; line-height:1.1em; padding-right:5px; text-decoration: underline; }

Pop out