/*

​

  > Everything works so far

  > The origin has been moved to the middle of the canvas

  > Radius has been mapped to a new scale of (100mm == 10 cm) [Measured in Pixels]

  > Buttons have been added

​

  * For use (with Arduino), uncomment following lines:

    1. From Line 59 to 83 (inclusive)

    2. Lines 247 and 248

    3. Everything below 282 (inclusive)

​

*/

​

​

​

// Global Variables

let canvas_w = 800;

let canvas_h = 800;

​

let positions = [];              // List of points in Cartesian coordinates

let mappedPositions = [];        // List of points in Polar coordinates ---- (radius, angle) -----

let isClicked = false;

let errorHandler = (-2*canvas_w);

​

​

// 1 cm = 37.795275591 px

// 100 mm = 377.95275591 px 

let disc_radius = 377;

let one_px_mm = 0.2645833333;

​

​

​

​

// variable to hold an instance of the p5.webserial library:

const serial = new p5.WebSerial();

// HTML button object:

let portButton;

let outByte = 0;              // for outgoing data

​

​

​

​

​

​

​

​

​

​

function setup() 

{

  createCanvas(canvas_w, canvas_h);

  angleMode(DEGREES);

// ------------------------ UNCOMMENT -------------------------------------------

//   // check to see if serial is available:

//   if (!navigator.serial) 

//   {

//     alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");

//   }

//   // if serial is available, add connect/disconnect listeners:

//   navigator.serial.addEventListener("connect", portConnect);

//   navigator.serial.addEventListener("disconnect", portDisconnect);

//   // check for any ports that are available:

//   serial.getPorts();

//   // if there's no port chosen, choose one:

//   serial.on("noport", makePortButton);

//   // open whatever port is available:

//   serial.on("portavailable", openPort);

//   // handle serial errors:

//   serial.on("requesterror", portError);

//   // handle any incoming serial data:

//   serial.on("data", serialEvent);

//   serial.on("close", makePortButton);

}

​

​

function draw() 

{

  background(155);

  // Buttons

  // let sendData = send_data_button();

  send_data_button();

  reset_button();

  // Translate the origin point to the center of the screen

  translate(width/2, height/2);

  // Make sure the mouse is clicked and cursor position is different

  if (isClicked && mouseX !== pmouseX && mouseX !== pmouseY)

  {

    // Create a vector and add it to the list

    // let pt = createVector(mouseX, mouseY);          // When origin is at the top-left corner

    let pt = createVector(mouseX - width/2, mouseY - height/2);

    positions.push(pt);

    // console.log(pt.x, pt.y);

    // Mapping Cartesian to Polar and appending it in mappedPositions array

    let temp_list = [];

    temp_list = cartToPolar(pt.x, pt.y)

    let pt_mapped = createVector((temp_list[0] * one_px_mm), temp_list[1]);

    mappedPositions.push(pt_mapped);

  }

​

​

  // Draw Settings

  noFill();

  strokeWeight(5);

  strokeJoin(ROUND);

  // Go through the list of vectors and plot them

  beginShape();

  for (let i = 0; i < positions.length; i++)

  {

    // console.log(positions[i].x + "," + positions[i].y);

    let pt = positions[i];

    curveVertex(pt.x, pt.y);

  }

  endShape();

  // console.log("Cart " + positions.length);

  // console.log(" Polar " + mappedPositions.length);

​

}

​

​

​

​

// Function that converts cartesian values to polar values

// Based on x and y, radius and angle are calculated and returned in the form of an array

function cartToPolar(x, y)

{

  let radius, angle;

  radius = sqrt(sq(x) + sq(y));

  // console.log(radius);

  angle = atan(y/x);

  // console.log(angle);

  let temp_list = [];

  temp_list[0] = map(radius, 0, sqrt(2 * sq(width/2)), 0, disc_radius);         // Mapped radius

  temp_list[1] = angle;

  return temp_list;

}

​

​

​

​

// Set boolean to true when mouse is clicked 

function mousePressed()

{

  isClicked = true; 

}

​

// Set boolean to false when mouse is released 

function mouseReleased()

{

  isClicked = false;

}

​

​

​

// Button Function

function button(text_, x, y, w, h)

{

  // Checks if the cursor is within the button or not

  let isWithinButton = (mouseX < (x + w) && mouseX > x) && (mouseY < y + h) && (mouseY > y)

  // Hover Effect

  if (isWithinButton)

  {

    fill(143,148,123);

    cursor(HAND);

  }

  else

  {

    fill("grey");

    cursor(ARROW);

  }

  // Button Setting

  stroke("black");

  strokeWeight(2);

  rect(x, y, w, h, 5);

  // Text inside the button

  textFont("Helvetica");

  stroke(5);

  textSize(25);

  fill("white");

  text(text_, x + 18, y + 32);

  // Return a boolean value

  return isWithinButton;

}

​

​

// Function that sends data to arduino

function send_data_button()

{

  let x = canvas_w - 210;

  let y = canvas_h - 70;

  let w = 180;

  let h = 50;

  // If the cursor is within the button button() function returns 1, else 0;

  let sendBool = button("SEND DATA", x, y, w, h);

  // Sending the data if the cursor iswithin the button and mouse is clicked

  if (sendBool && mouseIsPressed)

  {

    for (let i = 0; i < mappedPositions.length; i++)

    {

      print(mappedPositions[i].x);          // Printing the data to be transmitted

      print(mappedPositions[i].y);

​

      // // ------------------------------- UNCOMMENT -----------------------------

//       serial.write(mappedPositions[i].x);

//       serial.write(mappedPositions[i].y);

    }

    if (sendBool && mouseIsPressed)

      Serial.write("20.2");

  }

​

}

​

​

​

// Function that resets the canvas

function reset_button()

{

  let x = 26;

  let y = canvas_h - 70;

  let w = 125;

  let h = 50;

  // If the cursor is within the button button() function returns 1, else 0;

  let resetBool = button("RESET", x, y, w, h);

  // Resetting sketch if the cursor iswithin the button and mouse is clicked

  if (resetBool && mouseIsPressed)

  {

    positions = [];

    mappedPositions = [];

    isClicked = false;

  }

}

​

​

​

​

// // ------------------------------- UNCOMMENT -------------------------------------------

// // if there's no port selected, 

// // make a port select button appear:

// function makePortButton() {

//   // create and position a port chooser button:

//   portButton = createButton("choose port");

//   portButton.position(10, 10);

//   // give the port button a mousepressed handler:

//   portButton.mousePressed(choosePort);

// }

​

​

// // make the port selector window appear:

// function choosePort() {

//   if (portButton) portButton.show();

//   serial.requestPort();

// }

​

// // open the selected port, and make the port 

// // button invisible:

// function openPort() {

//   // wait for the serial.open promise to return,

//   // then call the initiateSerial function

//   serial.open().then(initiateSerial);

//   // once the port opens, let the user know:

//   function initiateSerial() {

//     console.log("port open");

//   }

//   // hide the port button once a port is chosen:

//   if (portButton) portButton.hide();

// }

​

​

// // pop up an alert if there's a port error:

// function portError(err) {

//   alert("Serial port error: " + err);

// }

​

​

​

// // read any incoming data as a string

// // (assumes a newline at the end of it):

// function serialEvent() {

//   inData = Number(serial.read());

//   console.log(inData);

//   // serial.write(ellipse_x);

// }

​

​

​

// // try to connect if a new serial port 

// // gets added (i.e. plugged in via USB):

// function portConnect() {

//   console.log("port connected");

//   serial.getPorts();

// }

​

​

// // if a port is disconnected:

// function portDisconnect() {

//   serial.close();

//   console.log("port disconnected");

// }

​

​

// function closePort() {

//   serial.close();

// }

​

​

​

​