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 11-9: Managing Many Objects
Getting Started with p5.js: Page 175

  
## 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
var bugs = [];

function setup() {
  createCanvas(960, 500);
  background(204);
  for (var i = 0; i < 33; i++) {
    var x = random(width);
    var y = random(height);
    var r = i + 2;
    bugs[i] = new JitterBug(x, y, r);
  }
}

function draw() {
  for (var i = 0; i < bugs.length; i++) {
    bugs[i].move();
    bugs[i].display();
  }
}


function JitterBug(tempX, tempY, tempDiameter) {
  this.x = tempX;
  this.y = tempY;
  this.diameter = tempDiameter;
  this.speed = 2.5;

  this.move = function() {
    this.x += random(-this.speed, this.speed);
    this.y += random(-this.speed, this.speed);
  }

  this.display = function() {
    ellipse(this.x, this.y, this.diameter, this.diameter);
  }
}


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

## 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>
	var bugs = [];

	function setup() {
	createCanvas(960, 500);
	background(204);
	for (var i = 0; i < 33; i++) {
	var x = random(width);
	var y = random(height);
	var r = i + 2;
	bugs[i] = new JitterBug(x, y, r);
	}
	}

	function draw() {
	for (var i = 0; i < bugs.length; i++) {
	bugs[i].move();
	bugs[i].display();
	}
	}


	function JitterBug(tempX, tempY, tempDiameter) {
	this.x = tempX;
	this.y = tempY;
	this.diameter = tempDiameter;
	this.speed = 2.5;

	this.move = function() {
	this.x += random(-this.speed, this.speed);
	this.y += random(-this.speed, this.speed);
	}

	this.display = function() {
	ellipse(this.x, this.y, this.diameter, this.diameter);
	}
	}


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