amilos/utils4sleuth.js

## utils4sleuth.js
/*

    Utility code for Sleuth submissions
    ===================================
    Author: Aleksandar Milosevic
    License: Creative Commons CC BY 4.0

    Utility provides visual aids for Sleuths submissions
    - displays mouse pointer x and y position
    - displays candidate line when considering next vertex
    - enables recording of points as vertices
    - diplays path with recorded points
    - writes vertices to the clipboard in ready to paste format

    Code that records vertices is inspired by p5.js Drawing example https://p5js.org/examples/hello-p5-drawing.html

    WORKING WITH POINTS
    ------------------------------------
    Pressing left mouse button while holding SHIFT key adds the point at mouse position to the path
    Pressing BACKSPACE key deletes last recorded point from path
    Pressing CTRL copies all recorded points to clipboard in vertex(x,y); form


    SETUP INSTRUCTIONS
    ------------------
    !!! Paste this line inside the <head> tag of index.html !!!

    <script src="utils4sleuth.js" type="text/javascript"></script>

    !!! Paste this line at the end of the sketch.js setup() method!!!

    setupVisualAids();

    !!! Paste this line at the end of the sketch.js draw() method!!!

    drawVisualAids();

*/


// A Path is a list of points
class Path {
  constructor() {
    this.points = [];
  }

  add(position) {
    // Add a new point with a position
    this.points.push(new Point(position));
  }


  // Display path
  display() {
    // Loop through backwards
    for (let i = this.points.length - 1; i >= 0; i--) {
      this.points[i].display(this.points[i + 1]);
    }

  }

  removeLast() {
    this.points.pop();
  }
}

// Points along the path
class Point {
  constructor(position) {
    this.position = createVector(position.x, position.y);
  }

  // Draw point and connect it with a line
  // Draw a line to another
  display(other) {
    stroke(255, 0, 0);
    strokeWeight(1);
    fill(255, 0, 0);
    ellipse(this.position.x, this.position.y, 2, 2);
    // If we need to draw a line
    if (other) {
      line(this.position.x, this.position.y, other.position.x, other.position.y);
    }
  }
}

let current;
let previous;
let next;
let path;
let vertices;
let leadline;
let s;

function setupVisualAids() {
  cursor(CROSS);
  current = createVector(0, 0);
  previous = createVector(0, 0);
  leadLine = true;
  vertices = [];
  path = new Path();
  next = 0;
  s = "";
}

function drawVisualAids() {
  drawCursorPosition();
  // Grab current mouse position
  current.x = mouseX;
  current.y = mouseY;

  if (previous.x > 0) {
    // draw
    line(previous.x, previous.y, current.x, current.y);
  }
  path.display();
}

function drawCursorPosition() {

  strokeWeight(0);
  fill(255, 0, 0);

  text(mouseX.toFixed(0), mouseX + 10, mouseY + 10, 100, 20);
  text(mouseY.toFixed(0), mouseX + 10, mouseY + 22, 100, 20);
}

function mousePressed(event) {
  if (keyIsDown(SHIFT)) {
    if (mouseButton === LEFT) {
      // Grab mouse position
      current.x = mouseX;
      current.y = mouseY;

      // Add new point to path

      path.add(current);

      //Record vertex
      vertices.push("vertex(" + current.x + "," + current.y + ");");

      //Store previous position
      previous.x = current.x;
      previous.y = current.y;
    }
  }
}

function keyPressed() {
  if (keyCode === BACKSPACE) {
    if (path && path.points && path.points.length > 0) {
      path.removeLast();
      vertices.pop();
      if (path.points.length > 0) {
        previous = path.points[path.points.length - 1].position;
      }
      else {
        previous = createVector(0, 0);
      }
    }

  }
  else if (keyCode === CONTROL) {
    s = "beginShape();\n";
    vertices.forEach(function (item) { s += item + "\n" });
    //document.write("<html><body><pre>"+s+"</pre></body></html>");
    s += "endShape(CLOSE);"
    copyToClipboard(s, vertices.length);
  }
}

function copyToClipboard(str, count) {
  const el = document.createElement('textarea');
  el.value = str;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
  customAlert(count + " vertices copied to clipboard", "1500");
}

function customAlert(msg, duration) {
  var div = document.createElement("div");
  div.setAttribute("style", "text-align: center; vertical-align: middle; font-family: sans-serif; border: 0px;width:auto;height:auto;background-color:#000;color:White");

  div.innerHTML = '<h4>' + msg + '</h4>';

  setTimeout(function () { div.parentNode.removeChild(div) }, duration);
  document.body.appendChild(div);
}
	/*

	Utility code for Sleuth submissions
	===================================
	Author: Aleksandar Milosevic
	License: Creative Commons CC BY 4.0

	Utility provides visual aids for Sleuths submissions
	- displays mouse pointer x and y position
	- displays candidate line when considering next vertex
	- enables recording of points as vertices
	- diplays path with recorded points
	- writes vertices to the clipboard in ready to paste format

	Code that records vertices is inspired by p5.js Drawing example https://p5js.org/examples/hello-p5-drawing.html

	WORKING WITH POINTS
	------------------------------------
	Pressing left mouse button while holding SHIFT key adds the point at mouse position to the path
	Pressing BACKSPACE key deletes last recorded point from path
	Pressing CTRL copies all recorded points to clipboard in vertex(x,y); form


	SETUP INSTRUCTIONS
	------------------
	!!! Paste this line inside the <head> tag of index.html !!!

	<script src="utils4sleuth.js" type="text/javascript"></script>

	!!! Paste this line at the end of the sketch.js setup() method!!!

	setupVisualAids();

	!!! Paste this line at the end of the sketch.js draw() method!!!

	drawVisualAids();

	*/



	// A Path is a list of points
	class Path {
	constructor() {
	this.points = [];
	}

	add(position) {
	// Add a new point with a position
	this.points.push(new Point(position));
	}


	// Display path
	display() {
	// Loop through backwards
	for (let i = this.points.length - 1; i >= 0; i--) {
	this.points[i].display(this.points[i + 1]);
	}

	}

	removeLast() {
	this.points.pop();
	}
	}

	// Points along the path
	class Point {
	constructor(position) {
	this.position = createVector(position.x, position.y);
	}

	// Draw point and connect it with a line
	// Draw a line to another
	display(other) {
	stroke(255, 0, 0);
	strokeWeight(1);
	fill(255, 0, 0);
	ellipse(this.position.x, this.position.y, 2, 2);
	// If we need to draw a line
	if (other) {
	line(this.position.x, this.position.y, other.position.x, other.position.y);
	}
	}
	}

	let current;
	let previous;
	let next;
	let path;
	let vertices;
	let leadline;
	let s;

	function setupVisualAids() {
	cursor(CROSS);
	current = createVector(0, 0);
	previous = createVector(0, 0);
	leadLine = true;
	vertices = [];
	path = new Path();
	next = 0;
	s = "";
	}

	function drawVisualAids() {
	drawCursorPosition();
	// Grab current mouse position
	current.x = mouseX;
	current.y = mouseY;

	if (previous.x > 0) {
	// draw
	line(previous.x, previous.y, current.x, current.y);
	}
	path.display();
	}

	function drawCursorPosition() {

	strokeWeight(0);
	fill(255, 0, 0);

	text(mouseX.toFixed(0), mouseX + 10, mouseY + 10, 100, 20);
	text(mouseY.toFixed(0), mouseX + 10, mouseY + 22, 100, 20);
	}

	function mousePressed(event) {
	if (keyIsDown(SHIFT)) {
	if (mouseButton === LEFT) {
	// Grab mouse position
	current.x = mouseX;
	current.y = mouseY;

	// Add new point to path

	path.add(current);

	//Record vertex
	vertices.push("vertex(" + current.x + "," + current.y + ");");

	//Store previous position
	previous.x = current.x;
	previous.y = current.y;
	}
	}
	}

	function keyPressed() {
	if (keyCode === BACKSPACE) {
	if (path && path.points && path.points.length > 0) {
	path.removeLast();
	vertices.pop();
	if (path.points.length > 0) {
	previous = path.points[path.points.length - 1].position;
	}
	else {
	previous = createVector(0, 0);
	}
	}

	}
	else if (keyCode === CONTROL) {
	s = "beginShape();\n";
	vertices.forEach(function (item) { s += item + "\n" });
	//document.write("<html><body><pre>"+s+"</pre></body></html>");
	s += "endShape(CLOSE);"
	copyToClipboard(s, vertices.length);
	}
	}

	function copyToClipboard(str, count) {
	const el = document.createElement('textarea');
	el.value = str;
	document.body.appendChild(el);
	el.select();
	document.execCommand('copy');
	document.body.removeChild(el);
	customAlert(count + " vertices copied to clipboard", "1500");
	}

	function customAlert(msg, duration) {
	var div = document.createElement("div");
	div.setAttribute("style", "text-align: center; vertical-align: middle; font-family: sans-serif; border: 0px;width:auto;height:auto;background-color:#000;color:White");

	div.innerHTML = '<h4>' + msg + '</h4>';

	setTimeout(function () { div.parentNode.removeChild(div) }, duration);
	document.body.appendChild(div);
	}