dribnet/.block

## .block
license: mit

## .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

      
    Raw
  

              README.md
            
          
    Example 9-7: Owls of Different Sizes
Getting Started with p5.js: Page 147

  
## index.html
<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
    <script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
    <style> body {padding: 0; margin: 0;} </style>
</head>

<body style="background-color:white">
</body>

## preview.jpg

      
    Raw
  

              preview.jpg
            
          
## sketch.js
function setup () {
  createCanvas(960, 500);
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
}

function draw() {
  background(204);
  randomSeed(0);
  for (var i = 35; i < width + 40; i += 40) {
    var gray = int(random(0, 102));
    var scalar = random(0.25, 1.0);
    owl(i, 110, gray, scalar);
  }
}

function owl(x, y, g, s) {
  push();
  translate(x, y);
  scale(s);  // Set the createCanvas
  stroke(g); // Set the gray value
  strokeWeight(70);
  line(0, -35, 0, -65); // Body
  noStroke();
  fill(255-g);
  ellipse(-17.5, -65, 35, 35); // Left eye dome
  ellipse(17.5, -65, 35, 35);  // Right eye dome
  arc(0, -65, 70, 70, 0, PI);  // Chin
  fill(g);
  ellipse(-14, -65, 8, 8);  // Left eye
  ellipse(14, -65, 8, 8);   // Right eye
  quad(0, -58, 4, -51, 0, -44, -4, -51); // Beak
  pop();
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	// 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');
	}
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
	<script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
	<script language="javascript" type="text/javascript" src="sketch.js"></script>
	<style> body {padding: 0; margin: 0;} </style>
	</head>

	<body style="background-color:white">
	</body>
	function setup () {
	createCanvas(960, 500);
	}

	function keyTyped() {
	if (key == '!') {
	saveBlocksImages();
	}
	else if (key == '@') {
	saveBlocksImages(true);
	}
	}

	function draw() {
	background(204);
	randomSeed(0);
	for (var i = 35; i < width + 40; i += 40) {
	var gray = int(random(0, 102));
	var scalar = random(0.25, 1.0);
	owl(i, 110, gray, scalar);
	}
	}

	function owl(x, y, g, s) {
	push();
	translate(x, y);
	scale(s); // Set the createCanvas
	stroke(g); // Set the gray value
	strokeWeight(70);
	line(0, -35, 0, -65); // Body
	noStroke();
	fill(255-g);
	ellipse(-17.5, -65, 35, 35); // Left eye dome
	ellipse(17.5, -65, 35, 35); // Right eye dome
	arc(0, -65, 70, 70, 0, PI); // Chin
	fill(g);
	ellipse(-14, -65, 8, 8); // Left eye
	ellipse(14, -65, 8, 8); // Right eye
	quad(0, -58, 4, -51, 0, -44, -4, -51); // Beak
	pop();
	}