# Bezier editor with data from serial port

**URL:** <https://discourse.processing.org/t/bezier-editor-with-data-from-serial-port/25184>\
**Category:** Electronics (Arduino, etc.)\
**Tags:** homework\
**Created:** [November 5, 2020, 2:46am UTC](https://discourse.processing.org/t/bezier-editor-with-data-from-serial-port/25184 "2020-11-05T02:46:08Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![myramoons](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@myramoons](https://discourse.processing.org/u/myramoons)\
**Post date:** [November 5, 2020, 2:46am UTC](https://discourse.processing.org/t/bezier-editor-with-data-from-serial-port/25184/1 "2020-11-05T02:46:08Z")

</div>

Hello! Im doing a project for school, where I’m using a pixy camera to track and send coordinates to processing so that it draws a smooth curve. I stumbled upon @Chrisir 's bezier editor, and have been trying to change the mouse-pressed inputs into my data from serial port, but it isn’t really working. I got a code whereby the line is drawn, but its a straight line instead. I’m not sure whats wrong, or where exactly to put the code where I add the co-ords from serial port into an array in regards to the og bezier editor code. If anyone can help, that would be great thank you!!

> //serial port  
> import processing.serial.\*;  
> Serial myPort; // Create object from Serial class  
> String val; // Data received from the serial port  
> int x,y;

```
ArrayList<PVector> listPV = new ArrayList();

void setup() {
  size(819,899);
  background(125);
  makeArrayList();

```

> //port setup  
> String portName = Serial.list()[0];  
> myPort = new Serial(this, portName, 9600);  
> }

```
void draw() {
  background(155);

  
  //info from pixy 
    if ( myPort.available() > 0) { 
      val = myPort.readStringUntil('\n'); 
      println(val); 
    } 
    if(val!=null){
       String[] xandy = splitTokens(val, " ");
     if(xandy.length==2){
       float x = float(trim(xandy[0]));
       float y = float(trim(xandy[1]));
      // circle(x, y ,10);
       listPV.add(new PVector(x, y));
       }
     }
     //listPV.add(new PVector(x, y));
     
     
         
  // show ArrayList
  showArrayList(); 
  
}

void showArrayList() {

  // show the curve 
  noFill();
  stroke(0);
  beginShape();
  int i=0;
  if (listPV.size()>0) {
    curveVertexPVector(listPV.get(i));
    for ( i = 0; i < listPV.size(); i++) {
      curveVertexPVector(listPV.get(i));
    }
    i=listPV.size()-1;
    curveVertexPVector(listPV.get(i));
  }
  endShape();

  //show the points (additionally)
  noStroke();
  float rad=3;
  for ( i = 0; i < listPV.size(); i++) {
    PVector pv=listPV.get(i);
    ellipse(pv.x, pv.y,rad, rad);
  }
}

void makeArrayList() {
  int[] coords = {
    0,0
  };
     
  // read coords[]
  for (int i = 0; i < coords.length; i += 2) {
    listPV.add ( new PVector(coords[i], coords[i + 1]));
  }
}
  

void curveVertexPVector(PVector pv) {
  curveVertex(pv.x, pv.y);
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 5, 2020, 9:03am UTC](https://discourse.processing.org/t/bezier-editor-with-data-from-serial-port/25184/2 "2020-11-05T09:03:29Z")

</div>

please also try and say println(x,y);

when your y has only small changes, you might need y=y\*10; or use map()