markdurrant/fumo-drawing-robots.html

## fumo-drawing-robots.html
<!-- regular html stuff -->
<!DOCTYPE html>
<html>
<head>
  <!-- page title, this will also be the name of the file we'll download -->
  <title>Furthermore Drawing Machines!</title>

  <!-- load paper.js (paperjs.org) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.4/paper-full.min.js"></script>
</head>
<body>

  <!-- add a canvas for paper.js to draw on -->
  <canvas id="myCanvas" hidpi="on"></canvas>

  <!-- add a button to download our drawing as an svg -->
  <button onclick="downloadSvg()">⇩</button>

  <!-- ========================== -->
  <!-- OUR CUSTOM JAVASCRIPT CODE -->
  <script>
    // install paper.js
    paper.install(window);

    // =============================================
    // OUR DRAWING CODE (this is the important bit!)
    var drawMe = function() {

      // tell paper.js to use our canvas
      paper.setup(document.getElementById('myCanvas'));

      // set page size
      var page = {
        width: 210,
        height: 297
      };

      // set a pen style
      var bluePen = {
        // make the pen a royal blue
        strokeColor: '#09f',
        // make the pen '2' thick
        strokeWidth: 2,
        // make the ends round
        strokeCap: 'round',
        // make the corners round
        strokeJoin: 'round'
      };

      // set paper.js view size to the page size
      paper.view.viewSize.width = page.width;
      paper.view.viewSize.height = page.height;

      // draw a border around the page
      var border = new Path.Rectangle({
        // from: the top left of the canvas
        from: view.bounds.topLeft,
        // to: the bottom right of the canvas
        to: view.bounds.bottomRight,
        // use our blue pen
        style: bluePen
      });

      // draw a circle
      var circle = new Path.Circle({
        // start at the center of the canvas
        center: view.center,
        // give it a radius of 1/3 of the width of the canvas
        radius: view.bounds.width / 3.5,
        // use our blue pen
        style: bluePen
      });

      // set a size for a square
      var squareSize = view.bounds.width / 3

      // draw a square
      var square = new Path.Rectangle({
        // make it 1/4 of the width of the canvas
        width: squareSize,
        // make it 1/4 of the width of the canvas
        height: squareSize,
        // draw the start at the center of the canvas minus 1/2 the squares width
        x: view.center.x - squareSize / 2,
        // draw the start at the center of the canvas minus 1/2 the squares width
        y: view.center.y - squareSize / 2 ,
        // use our blue pen
        style: bluePen
      });

      // rotate our square 45 degrees
      square.rotate(45);

      // draw a line
      var line = new Path.Line({
        // from: start at the center and subtract 30 on the y axis (go up)
        from: view.center.subtract([0, 30]),
        // to: start at the center and subtract 50 on the y axis (go up)
        to: view.center.subtract([0, 50]),
        // use our blue pen
        style: bluePen
      });

      // set number of lines to draw
      var numberOfLines = 36;

      // run this code for 'numberOfLines'
      for (var l = 0; l < numberOfLines; l++) {
        // copy our line
        var lineCopy = line.clone();

        // rotate it around the center (every time rote it a little more)
        lineCopy.rotate(360 / numberOfLines * l, view.center);
      }

      // draw all our stuff!
      paper.view.draw();
    };
    // END OUR DRAWING CODE
    // ====================


    // when everything on the page has loaded draw our code.
    window.onload = drawMe();

    // download the canvas as an svg
    function downloadSvg () {
      // get the data from our drawing and turn it into svg code
      var svgData = "data:image/svg+xml;utf8," +
                    encodeURIComponent(paper.project.exportSVG({asString:true}));

      // make a download link for our svg file
      var downloadLink = document.createElement("a");
          downloadLink.download = document.title + '.svg';
          downloadLink.href = svgData;
          downloadLink.click();
    }
  </script>
  <!-- END OUR CUSTOM JAVASCRIPT CODE -->
  <!-- ============================== -->


  <!-- ========================================= -->
  <!-- DO A BIT OF STYLING TO MAKE THINGS PRETTY -->
  <style type="text/css">
    /* remove all margins and padding */
    * {
      margin: 0;
      padding: 0;
    }

    /* make the background grey and center the canvas */
    body {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #eee;
    }

    /* make the canvas white */
    canvas {
      background-color: #fff;
    }

    /*style the download button*/
    button {
      font-size: 2em;
      position: fixed;
      top: .3em;
      right: .3em;
      width: 1.75em;
      height: 1.75em;
      color: white;
      background-color: #09f;
      outline: 0;
      border: 0;
      cursor: pointer;
      transition: background-color .25s ease-in-out;
    }

    button:hover {
      background-color: #06c;
    }
  </style>
  <!-- END STYLING -->
  <!-- =========== -->
</body>
</html>
	<!-- regular html stuff -->
	<!DOCTYPE html>
	<html>
	<head>
	<!-- page title, this will also be the name of the file we'll download -->
	<title>Furthermore Drawing Machines!</title>

	<!-- load paper.js (paperjs.org) -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.4/paper-full.min.js"></script>
	</head>
	<body>

	<!-- add a canvas for paper.js to draw on -->
	<canvas id="myCanvas" hidpi="on"></canvas>

	<!-- add a button to download our drawing as an svg -->
	<button onclick="downloadSvg()">⇩</button>

	<!-- ========================== -->
	<!-- OUR CUSTOM JAVASCRIPT CODE -->
	<script>
	// install paper.js
	paper.install(window);

	// =============================================
	// OUR DRAWING CODE (this is the important bit!)
	var drawMe = function() {

	// tell paper.js to use our canvas
	paper.setup(document.getElementById('myCanvas'));

	// set page size
	var page = {
	width: 210,
	height: 297
	};

	// set a pen style
	var bluePen = {
	// make the pen a royal blue
	strokeColor: '#09f',
	// make the pen '2' thick
	strokeWidth: 2,
	// make the ends round
	strokeCap: 'round',
	// make the corners round
	strokeJoin: 'round'
	};

	// set paper.js view size to the page size
	paper.view.viewSize.width = page.width;
	paper.view.viewSize.height = page.height;

	// draw a border around the page
	var border = new Path.Rectangle({
	// from: the top left of the canvas
	from: view.bounds.topLeft,
	// to: the bottom right of the canvas
	to: view.bounds.bottomRight,
	// use our blue pen
	style: bluePen
	});

	// draw a circle
	var circle = new Path.Circle({
	// start at the center of the canvas
	center: view.center,
	// give it a radius of 1/3 of the width of the canvas
	radius: view.bounds.width / 3.5,
	// use our blue pen
	style: bluePen
	});

	// set a size for a square
	var squareSize = view.bounds.width / 3

	// draw a square
	var square = new Path.Rectangle({
	// make it 1/4 of the width of the canvas
	width: squareSize,
	// make it 1/4 of the width of the canvas
	height: squareSize,
	// draw the start at the center of the canvas minus 1/2 the squares width
	x: view.center.x - squareSize / 2,
	// draw the start at the center of the canvas minus 1/2 the squares width
	y: view.center.y - squareSize / 2 ,
	// use our blue pen
	style: bluePen
	});

	// rotate our square 45 degrees
	square.rotate(45);

	// draw a line
	var line = new Path.Line({
	// from: start at the center and subtract 30 on the y axis (go up)
	from: view.center.subtract([0, 30]),
	// to: start at the center and subtract 50 on the y axis (go up)
	to: view.center.subtract([0, 50]),
	// use our blue pen
	style: bluePen
	});

	// set number of lines to draw
	var numberOfLines = 36;

	// run this code for 'numberOfLines'
	for (var l = 0; l < numberOfLines; l++) {
	// copy our line
	var lineCopy = line.clone();

	// rotate it around the center (every time rote it a little more)
	lineCopy.rotate(360 / numberOfLines * l, view.center);
	}

	// draw all our stuff!
	paper.view.draw();
	};
	// END OUR DRAWING CODE
	// ====================


	// when everything on the page has loaded draw our code.
	window.onload = drawMe();

	// download the canvas as an svg
	function downloadSvg () {
	// get the data from our drawing and turn it into svg code
	var svgData = "data:image/svg+xml;utf8," +
	encodeURIComponent(paper.project.exportSVG({asString:true}));

	// make a download link for our svg file
	var downloadLink = document.createElement("a");
	downloadLink.download = document.title + '.svg';
	downloadLink.href = svgData;
	downloadLink.click();
	}
	</script>
	<!-- END OUR CUSTOM JAVASCRIPT CODE -->
	<!-- ============================== -->


	<!-- ========================================= -->
	<!-- DO A BIT OF STYLING TO MAKE THINGS PRETTY -->
	<style type="text/css">
	/* remove all margins and padding */
	* {
	margin: 0;
	padding: 0;
	}

	/* make the background grey and center the canvas */
	body {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #eee;
	}

	/* make the canvas white */
	canvas {
	background-color: #fff;
	}

	/style the download button/
	button {
	font-size: 2em;
	position: fixed;
	top: .3em;
	right: .3em;
	width: 1.75em;
	height: 1.75em;
	color: white;
	background-color: #09f;
	outline: 0;
	border: 0;
	cursor: pointer;
	transition: background-color .25s ease-in-out;
	}

	button:hover {
	background-color: #06c;
	}
	</style>
	<!-- END STYLING -->
	<!-- =========== -->
	</body>
	</html>