17.1.MDDN242 PS3

.block

license: mit

.gitignore

downloads
resized
colorgrid
smartgrid
customgrid

.purview_helper.js

// note: this file is poorly named - it can generally be ignored.

// helper functions below for supporting blocks/purview

function saveBlocksImages(doZoom) {
  if(doZoom == null) {
    doZoom = false;
  }

  // generate 960x500 preview.jpg of entire canvas
  // TODO: should this be recycled?
  var offscreenCanvas = document.createElement('canvas');
  offscreenCanvas.width = 960;
  offscreenCanvas.height = 500;
  var context = offscreenCanvas.getContext('2d');
  // background is flat white
  context.fillStyle="#FFFFFF";
  context.fillRect(0, 0, 960, 500);
  context.drawImage(this.canvas, 0, 0, 960, 500);
  // save to browser
  var downloadMime = 'image/octet-stream';
  var imageData = offscreenCanvas.toDataURL('image/jpeg');
  imageData = imageData.replace('image/jpeg', downloadMime);
  p5.prototype.downloadFile(imageData, 'preview.jpg', 'jpg');

  // generate 230x120 thumbnail.png centered on mouse
  offscreenCanvas.width = 230;
  offscreenCanvas.height = 120;

  // background is flat white  
  context = offscreenCanvas.getContext('2d');
  context.fillStyle="#FFFFFF";
  context.fillRect(0, 0, 230, 120);

  if(doZoom) {
    // pixelDensity does the right thing on retina displays
    var pd = this._pixelDensity;
    var sx = pd * mouseX - pd * 230/2;
    var sy = pd * mouseY - pd * 120/2;
    var sw = pd * 230;
    var sh = pd * 120;
    // bounds checking - just displace if necessary
    if (sx < 0) {
      sx = 0;
    }
    if (sx > this.canvas.width - sw) {
      sx = this.canvas.width - sw;
    }
    if (sy < 0) {
      sy = 0;
    }
    if (sy > this.canvas.height - sh) {
      sy = this.canvas.height - sh;
    }
    // save to browser
    context.drawImage(this.canvas, sx, sy, sw, sh, 0, 0, 230, 120);
  }
  else {
    // now scaledown
    var full_width = this.canvas.width;
    var full_height = this.canvas.height;
    context.drawImage(this.canvas, 0, 0, full_width, full_height, 0, 0, 230, 120);
  }
  imageData = offscreenCanvas.toDataURL('image/png');
  imageData = imageData.replace('image/png', downloadMime);
  p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
}

README.md

PS3 MDDN 242 2017

Scrape Montage

Update the included scripts to create your own grid based montage. The scripts will be covered in class Friday.

Describe here your images you decided to use and any compromises that were necessary to build your collection.

collect.sh

#!/bin/bash

# show commands and stop if there is an error
set -ex

# make the directory if it is not there
mkdir -p downloads

# clean the directory if there are old results
rm -f downloads/*

# get 5 pages
for PAGE in {1..3}
do
    # this is an example with a group
    URL='https://www.flickr.com/groups/hdr/pool/page'$PAGE
    # this is an example with tags
    # URL='https://www.flickr.com/photos/tags/'$SEARCH_STRING'/page'$PAGE

    echo "about to fetch URL: " $URL
    sleep 3

    # fetch the images
    wget --adjust-extension \
         --random-wait \
         --limit-rate=100k \
         --span-hosts \
         --convert-links \
         --backup-converted \
         --no-directories \
         --timestamping \
         --page-requisites \
         --directory-prefix=downloads \
         --execute robots=off \
         --accept=.jpg \
         $URL

# other unused arguments
         # --recursive \
         # --level 1 \
         # --domains en.wikipedia.org \
     
done

customgrid.sh

#!/bin/bash

if [ ! -d "/usr/local/anaconda/extras" ]; then
  # Control will enter here if DIRECTORY doesn't exist.
  echo "smartgrid program not found"
  echo "please first install using directions on blackboard"
  exit 1
fi

# show commands and stop if there is an error
set -ex

HOME="/usr/local/anaconda/extras/home"
export PATH="/usr/local/anaconda/bin:$PATH"

python /usr/local/anaconda/extras/smartgrid.py \
  --tile 12x6 \
  --input-glob 'resized/*' \
  --left-image 'resized/29516311783_87657c243a.jpg' \
  --right-image 'resized/33488098312_91556220b5_z.jpg' \
  --output-path customgrid

index.html

<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"></script>
<style>
body {padding: 0; margin: 0;}
#image-map {
  width: 960;
  height: 500;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
</style>
</head>
<body style="background-color:white">
<div id="image-map"></div>

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script language="javascript" type="text/javascript" src="zoom_image.js"></script>
<br>
<a href="montage.jpg">full size montage</a><br>
<a href="left_right.jpg">left right images</a><br>
<a href="tsne.png">tsne</a><br>
<a href="tsne_spun.png">tsne spun</a><br>
<a href="movement.png">movement</a><br>
</body>

install_smartgrid.sh

#!/bin/bash

if [ -d "/usr/local/anaconda/extras" ]; then
  # Control will enter here if DIRECTORY doesn't exist.
  echo "smartgrid program already installed"
  exit 1
fi

# show commands and stop if there is an error
set -ex

# make the directory if it is not there
mkdir -p /tmp/smartgrid

# clean the directory if there are old results
rm -f /tmp/smartgrid/*

cd /tmp/smartgrid
wget http://deeptom.staff.vuw.ac.nz:9000/smartgrid.tgz
cd /usr/local
tar xvfz /tmp/smartgrid/smartgrid.tgz

echo "DONE: smartgrid program installed"

left_right.jpg

montage.jpg

montage.sh

movement.png

preview.jpg

preview.sh

resize.sh

run_all.sh

smartgrid.sh

thumbnail.png

tsne.png

tsne_spun.png

zoom_image.js