dribnet · October 13, 2021 01:19
diff --git a/.block b/.block
 license: mit
diff --git a/.purview_helper.js b/.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');
 }
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <head>
    <style> body {padding: 0; margin: 0;} </style>
 </head>
 <body style="background-color:white">
 <img src="preview.jpg" width="960" height="500"/>
 </body>
diff --git a/preview.jpg b/preview.jpg
diff --git a/sketch.html b/sketch.html
 <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="clock.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
 </head>
 <body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
        </div>
    </div>
 </table>
 </body>
diff --git a/sketch.js b/sketch.js
 var canvasWidth = 960;
 var canvasHeight = 500;

 function setup () {
  // create the drawing canvas, save the canvas element
  var main_canvas = createCanvas(canvasWidth, canvasHeight);
  main_canvas.parent('canvasContainer');

  // this means draw will only be called once
  noLoop();
 }

 // draw five colors and then five glyphs
 function draw () {
  background(255, 255, 220);
  stroke(0);
  strokeWeight(4);

  line(320, 0, 320, canvasHeight);
  line(640, 0, 640, canvasHeight);
 }

 function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
 }
diff --git a/thumbnail.png b/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>
	<style> body {padding: 0; margin: 0;} </style>
	</head>
	<body style="background-color:white">
	<img src="preview.jpg" width="960" height="500"/>
	</body>
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.js"></script>
	<script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
	<script language="javascript" type="text/javascript" src="clock.js"></script>
	<script language="javascript" type="text/javascript" src="sketch.js"></script>
	</head>
	<body style="background-color:white">
	<div class="outer">
	<div class="inner">
	<div id="canvasContainer"></div>
	</div>
	</div>
	</table>
	</body>
	var canvasWidth = 960;
	var canvasHeight = 500;

	function setup () {
	// create the drawing canvas, save the canvas element
	var main_canvas = createCanvas(canvasWidth, canvasHeight);
	main_canvas.parent('canvasContainer');

	// this means draw will only be called once
	noLoop();
	}

	// draw five colors and then five glyphs
	function draw () {
	background(255, 255, 220);
	stroke(0);
	strokeWeight(4);

	line(320, 0, 320, canvasHeight);
	line(640, 0, 640, canvasHeight);
	}

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