dribnet/README.md

## README.md

      
    Raw
  

              README.md
            
          
    PS1 MDDN 242 2017

Upside-down Sundial

Sundials are always right side up. What if they were upside-down. You
Just like the movie.

  
## clock1.js
const CANVAS_WIDTH = 960;
const CANVAS_HEIGHT = 500;

function setup () {
  // create the drawing canvas, save the canvas element
  let main_canvas = createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);
  main_canvas.parent('canvasContainer');

  // you can optionally add your own code here if you also have setup code
}

// Update this function to draw you own maeda clock
function draw () {
  background(204); // light gray background
  strokeWeight(8); // Stroke weight to 8 pixels
  ellipse(480, 250, 190, 190);
  // The rectangle draws on top of the ellipse
  // because it comes after in the code
  rect(500, 280, 260, 20);

  quad(158, 55, 199, 14, 392, 66, 351, 107);
}

// do not alter or remove this function
function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
}

## index.html
<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="clock1.js"></script>
</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
        </div>
    </div>
</table>
</body>

## preview.jpg

      
    Raw
  

              preview.jpg
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## z_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');
}
	const CANVAS_WIDTH = 960;
	const CANVAS_HEIGHT = 500;

	function setup () {
	// create the drawing canvas, save the canvas element
	let main_canvas = createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);
	main_canvas.parent('canvasContainer');

	// you can optionally add your own code here if you also have setup code
	}

	// Update this function to draw you own maeda clock
	function draw () {
	background(204); // light gray background
	strokeWeight(8); // Stroke weight to 8 pixels
	ellipse(480, 250, 190, 190);
	// The rectangle draws on top of the ellipse
	// because it comes after in the code
	rect(500, 280, 260, 20);

	quad(158, 55, 199, 14, 392, 66, 351, 107);
	}

	// do not alter or remove this function
	function keyTyped() {
	if (key == '!') {
	saveBlocksImages();
	}
	else if (key == '@') {
	saveBlocksImages(true);
	}
	}
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script>
	<script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
	<script language="javascript" type="text/javascript" src="clock1.js"></script>
	</head>
	<body style="background-color:white">
	<div class="outer">
	<div class="inner">
	<div id="canvasContainer"></div>
	</div>
	</div>
	</table>
	</body>
	// 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');
	}