schluppeck · January 12, 2019 14:35
diff --git a/.block b/.block
 license: gpl-3.0
 height: 700
 scrolling: no
 border: yes
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="">

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ds's sketchpad</title>
  <style>
    h1 {
      font-family: menlo, courier new, monospace;
      font-weight: bold;
      color: darkorange;
    }
    body {
      padding: 20;
      margin: 20;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
  <script src="sketch.js"></script>
 </head>

 <body>
  <a id="downloadAnchorElem" style="display:none"></a>
 </body>

 </html>
diff --git a/sketch.js b/sketch.js
 // simple sketchpad that implements google
 // quickdraw-like drawing facility
 //
 // using p5.js and p5.dom.js
 //
 // 2019-01-11 - denis schluppeck

 var t = [];
 var x = [];
 var y = [];
 var theStroke = [];
 var mouseInUse = false;
 var isMousePressedInCanvas = false;
 var touches =  [];

 var allStrokes = [];
 var currentStroke = 0; //@ TODO - add timestamp
 var filename = 'drawing.json';
 var oldT = Date.now().toPrecision();

 var button_dl, button_clear, h1, div, a;

 function setup() {
  var c = createCanvas(500, 500);
  c.mousePressed(() => mouseInUse = true);
  c.touchStarted(() => mouseInUse = true);

  background(50);

  h1 = createElement('h1', 'ds sketchpad')

  button_dl = createButton('download JSON');
  button_dl.mousePressed(downloadJSON);

  button_clear = createButton('clear canvas');
  button_clear.style('margin-left', '20px')
  button_clear.mousePressed(clearCanvas);

  // a = createA('download JSON',  )
  //@ TODO create some DOM elements, buttons for clearing, doing stuff
 }

 // h/t
 // https://stackoverflow.com/questions/19721439/download-json-object-as-a-file-from-browser
 function downloadJSON() {
  console.log('downloading JSON version of this drawing.');
  var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(allStrokes));
  var dlAnchorElem = document.getElementById('downloadAnchorElem');
  dlAnchorElem.setAttribute("href", dataStr);
  dlAnchorElem.setAttribute("download", filename);
  dlAnchorElem.click();
 }


 function clearCanvas() {
  background(50);
  //@ TODO:
  allStrokes = [];
  // reset data structure.
 }

 function draw() {

  stroke(255);
  noFill();
  strokeWeight(2);

  if (mouseInUse) {
    // set semaphore
    // mouseInUse = false;

    let theT = Date.now().toPrecision();

    t.push(theT);
    // pick first touch event on mobile device?
    if (touches.length != 0){
      x.push(touches[0].x);
      y.push(touches[0].y);
    } else {
      x.push(mouseX);
      y.push(mouseY);
    }
    theStroke.push(currentStroke);

    stroke(255);
    strokeWeight(3);

    // bezier curve
    beginShape();
    for (let i = 0; i < t.length; i++) {
      curveVertex(x[i], y[i]);
    }
    endShape();
  }
 }

 function mouseReleased() {
  mouseReleased_private();
 }

 function touchReleased() {
  // do the same.
  mouseReleased_private();
 }


 function mouseReleased_private() {
  // only run this if we had clicked in canvas
  if (mouseInUse) {
    mouseInUse = false;

    // store current stroke in array.
    allStrokes.push({
      t: t,
      x: x,
      y: y
    });

    t = [];
    x = [];
    y = [];

    // increase the stroke counter
    currentStroke++;

  }

 }



 // to work on mobile devices.
 function touchMoved() {
  return false;
 }
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<html lang="">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ds's sketchpad</title>
	<style>
	h1 {
	font-family: menlo, courier new, monospace;
	font-weight: bold;
	color: darkorange;
	}
	body {
	padding: 20;
	margin: 20;
	}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
	<script src="sketch.js"></script>
	</head>

	<body>
	<a id="downloadAnchorElem" style="display:none"></a>
	</body>

	</html>
	// simple sketchpad that implements google
	// quickdraw-like drawing facility
	//
	// using p5.js and p5.dom.js
	//
	// 2019-01-11 - denis schluppeck

	var t = [];
	var x = [];
	var y = [];
	var theStroke = [];
	var mouseInUse = false;
	var isMousePressedInCanvas = false;
	var touches = [];

	var allStrokes = [];
	var currentStroke = 0; //@ TODO - add timestamp
	var filename = 'drawing.json';
	var oldT = Date.now().toPrecision();

	var button_dl, button_clear, h1, div, a;

	function setup() {
	var c = createCanvas(500, 500);
	c.mousePressed(() => mouseInUse = true);
	c.touchStarted(() => mouseInUse = true);

	background(50);

	h1 = createElement('h1', 'ds sketchpad')

	button_dl = createButton('download JSON');
	button_dl.mousePressed(downloadJSON);

	button_clear = createButton('clear canvas');
	button_clear.style('margin-left', '20px')
	button_clear.mousePressed(clearCanvas);

	// a = createA('download JSON', )
	//@ TODO create some DOM elements, buttons for clearing, doing stuff
	}

	// h/t
	// https://stackoverflow.com/questions/19721439/download-json-object-as-a-file-from-browser
	function downloadJSON() {
	console.log('downloading JSON version of this drawing.');
	var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(allStrokes));
	var dlAnchorElem = document.getElementById('downloadAnchorElem');
	dlAnchorElem.setAttribute("href", dataStr);
	dlAnchorElem.setAttribute("download", filename);
	dlAnchorElem.click();
	}


	function clearCanvas() {
	background(50);
	//@ TODO:
	allStrokes = [];
	// reset data structure.
	}

	function draw() {

	stroke(255);
	noFill();
	strokeWeight(2);

	if (mouseInUse) {
	// set semaphore
	// mouseInUse = false;

	let theT = Date.now().toPrecision();

	t.push(theT);
	// pick first touch event on mobile device?
	if (touches.length != 0){
	x.push(touches[0].x);
	y.push(touches[0].y);
	} else {
	x.push(mouseX);
	y.push(mouseY);
	}
	theStroke.push(currentStroke);

	stroke(255);
	strokeWeight(3);

	// bezier curve
	beginShape();
	for (let i = 0; i < t.length; i++) {
	curveVertex(x[i], y[i]);
	}
	endShape();
	}
	}

	function mouseReleased() {
	mouseReleased_private();
	}

	function touchReleased() {
	// do the same.
	mouseReleased_private();
	}


	function mouseReleased_private() {
	// only run this if we had clicked in canvas
	if (mouseInUse) {
	mouseInUse = false;

	// store current stroke in array.
	allStrokes.push({
	t: t,
	x: x,
	y: y
	});

	t = [];
	x = [];
	y = [];

	// increase the stroke counter
	currentStroke++;

	}

	}



	// to work on mobile devices.
	function touchMoved() {
	return false;
	}