Week 06. Serial Input to P5 serial

This week, I tried to do serial Input to P5 serial. I did not get the whole process perfectly but I tried to follow the guideline to see if it works in p5 with serial input first.
I added the p5.serialport.js feel to my p5 sketch, added javascript to my index.html file, wrote code in p5 and the code for arduino.

At my first try, I prepared my board and arduino and potentiometer as below.

I connected somehow with p5 serial app and my p5 sketch but the numbers from serial monitor in arduino were arbitrary. they were not constant.

With help from other student, I solved that the problem and I re-connected the wire in the right place of the breadboard and finally got the constant numbers from serial monitor as below.

In this process, checking the numbers is not easy. Since, opening serial monitor and running p5 sketch at the same did not working. So, if I want to run p5, then I had to close the serial monitor of arduino.
So, the order works like this way. First, I upload the arduino code and then I have to establish connection with p5 serial control app and run p5.

I also tried to all my potentiometers I have, but some potentiometer works, and some did not work. I did not get the constant number. I am still figuring it out why this happens.

Anyway, I found one of them working well and I connected with p5 serial and arduino and experiment that as below.

var serial; // variable to hold an instance of the serialport library
var portName = '/dev/tty.usbmodem13'; // fill in your serial port name here
var inData; // for incoming serial data
var xPos = 0;                           // x position of the graph


function setup() {

  serial = new p5.SerialPort(); // make a new instance of the serialport library
  serial.on('list', printList); // set a callback function for the serialport list event
  serial.on('connected', serverConnected); // callback for connecting to the server
  serial.on('open', portOpen); // callback for the port opening
  serial.on('data', serialEvent); // callback for when new data arrives
  serial.on('error', serialError); // callback for errors
  serial.on('close', portClose); // callback for the port closing

  serial.list(); // list the serial ports

  var options = {
    baudrate: 9600
  }; // change the data rate to whatever you wish

  serial.open(portName, options);

  createCanvas(400, 300);
  background(0x08, 0x16, 0x40);
}

function serverConnected() {
  console.log('connected to server.');
}

function portOpen() {
  console.log('the serial port opened.')
}

function serialEvent() {
  inData = Number(serial.read());

}

function serialError(err) {
  console.log('Something went wrong with the serial port. ' + err);
}

function portClose() {
  console.log('The serial port closed.');
}



// get the list of ports:
function printList(portList) {
  // portList is an array of serial port names
  for (var i = 0; i < portList.length; i++) {
    // Display the list the console:
    console.log(i + " " + portList[i]);
  }
}

function serialEvent() {
  inData = Number(serial.read());
  
}

// function serialEvent() {
//   // read a byte from the serial port, convert it to a number:
//   inData = serial.readLine();
// }
// Although you’re reading the incoming data, you’re not displaying it anywhere yet. Add a draw() function and print the sensor value to the screen. Start by adding a createCanvas() to the top of your setup() like so:
function graphData(newData) {
  // map the range of the input to the window height:
  var yPos = map(newData, 0, 255, 0, height);
  // draw the line in a pretty color:
  stroke(0xA8, 0xD9, 0xA7);
  line(xPos, height, xPos, height - yPos);
  // at the edge of the screen, go back to the beginning:
  if (xPos >= width) {
    xPos = 0;
    // clear the screen by resetting the background:
    background(0x08, 0x16, 0x40);
  } else {
    // increment the horizontal position for the next reading:
    xPos++;
  }
}

function draw() {
   graphData(inData);
}


var serial; // variable to hold an instance of the serialport library
var portName = '/dev/tty.usbmodem34'; // fill in your serial port name here
//var inData; // for incoming serial data
var circleSize =100;
function setup() {

  serial = new p5.SerialPort(); // make a new instance of the serialport library
  serial.on('list', printList); // set a callback function for the serialport list event
  serial.on('connected', serverConnected); // callback for connecting to the server
  serial.on('open', portOpen); // callback for the port opening
  serial.on('data', serialEvent); // callback for when new data arrives
  serial.on('error', serialError); // callback for errors
  serial.on('close', portClose); // callback for the port closing

  serial.list(); // list the serial ports

  var options = {
    baudrate: 9600
  }; // change the data rate to whatever you wish

  serial.open(portName, options);

  createCanvas(400, 300);

}

function serverConnected() {
  console.log('connected to server.');
}

function portOpen() {
  console.log('the serial port opened.')
}

function serialEvent() {
  inData = Number(serial.read());

}

function serialError(err) {
  console.log('Something went wrong with the serial port. ' + err);
}

function portClose() {
  console.log('The serial port closed.');
}



// get the list of ports:
function printList(portList) {
  // portList is an array of serial port names
  for (var i = 0; i < portList.length; i++) {
    // Display the list the console:
    console.log(i + " " + portList[i]);
  }
}

function serialEvent() {
  //inData = Number(serial.read());
  var data = serial.read();
  //console.log(data);
  circleSize = data;
}
// Although you’re reading the incoming data, you’re not displaying it anywhere yet. Add a draw() function and print the sensor value to the screen. Start by adding a createCanvas() to the top of your setup() like so:


function draw() {
  background(220,110,2);
  fill(255,255,0);
  noStroke();
  ellipse(width/2, height/2, circleSize, circleSize);
  //text("sensor value: " + inData, 30, 30);
}

it seems it works well and the values I get are constant in most time but sometimes the values are not constant. So It did not feel like smooth. Next time I try, I want to find a way to make smoother when using a potentiometer.