Ultrasonic sensor - problem Processing serial print

Hi, I'm doing a radar with my ht sr04 ultrasonic sensor. The arduino code is this:

// Sweep

#include <Servo.h>
#define trigPin 13
#define echoPin 12 
long previousMillis = 0; 
long previousinterval=300; 
long newinterval; // interval at which to blink (milliseconds)
Servo myservo;  // create servo object to control a servo 
                // a maximum of eight servo objects can be created 
 
int pos = 5;    // variable to store the servo position 
 
void setup() 
{ Serial.begin (9600);
 
  pinMode(trigPin, OUTPUT);
  pinMode(echoPin, INPUT);
  myservo.attach(9);  // attaches the servo on pin 9 to the servo object 
} 
 
 
void loop() 
{

  unsigned long currentMillis = millis(); // milliseconds  
   if(currentMillis - previousMillis > previousinterval) {
      previousMillis = currentMillis;   
 

  myservo.write(90);  
 
   int duration;
   int distance;
  digitalWrite(trigPin, LOW);  // Added this line
  delayMicroseconds(2); // Added this line
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10); // Added this line
  digitalWrite(trigPin, LOW);
  duration = pulseIn(echoPin, HIGH);
  distance = (duration/56);
  //Serial.print(distance);
  //Serial.println(" cm");
 
 
  
  if (distance <= 10 ){
    for(pos = 0; pos <= 180; pos += 10)  // goes from 0 degrees to 180 degrees 
    {                                  // in steps of 1 degree 
   int duration;
   int distance;
    digitalWrite(trigPin, LOW);  // Added this line
    delayMicroseconds(2); // Added this line
    digitalWrite(trigPin, HIGH);
    delayMicroseconds(10); // Added this line
    digitalWrite(trigPin, LOW);
    duration = pulseIn(echoPin, HIGH);
    distance = (duration/56);
    //Serial.print("X");
    //Serial.print(pos);
    //Serial.print("V");
    Serial.println(distance);
    delay(800);
    myservo.write(pos);              // tell servo to go to position in variable 'pos'    
    }  
  
    for(pos <= 180;  pos>=0; pos-=10)  // goes from 0 degrees to 180 degrees 
    {                                  // in steps of 1 degree 
   int duration;
   int distance;
    digitalWrite(trigPin, LOW);  // Added this line
    delayMicroseconds(2); // Added this line
    digitalWrite(trigPin, HIGH);
    delayMicroseconds(10); // Added this line
    digitalWrite(trigPin, LOW);
    duration = pulseIn(echoPin, HIGH);
    distance = (duration/56);
    //Serial.print("X");
    //Serial.print(pos);
    //Serial.print("V");
    Serial.println(distance);
    delay(800);
    myservo.write(pos);              // tell servo to go to position in variable 'pos' 
    }    // waits 15ms for the servo to reach the position 
}
} 
}

I want Processing to read the position of the servo and the distance value and plot a point on a screen. I found several projects online, for example this http://luckylarry.co.uk/arduino-projects/arduino-processing-make-a-radar-screen-to-visualise-sensor-data-from-srf-05-part-2-visualising-the-data/, and I tried to write my own code. However, since I'm new in the arduino word, I can't figure out how to read the serial port in Processing. This is the code I made in order to read the distance alone:

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 19-8: Reading from serial port

import processing.serial.*;

int val = 0; // To store data from serial port, used to color background
Serial port; // The serial port object

void setup() {
  size(200,200);
  
  // In case you want to see the list of available ports
  // println(Serial.list());
  
  // Using the first available port (might be different on your computer)
  port = new Serial(this, Serial.list()[0], 9600); 
}

void draw() {
  // The serial data is used to color the background.   
 //background(val); 
}

// Called whenever there is something available to read
void serialEvent(Serial port) {
  // Data from the Serial port is read in serialEvent() using the read() function and assigned to the global variable: val
  val = port.read();  
  println( "Raw Input:" + val);
}

However, instead of the value of the distance sensor I get these strange values:

Raw Input:51
Raw Input:53
Raw Input:13
Raw Input:10
Raw Input:51
Raw Input:54
Raw Input:13
Raw Input:10
Raw Input:51
Raw Input:53
Raw Input:13
Raw Input:10
Raw Input:50
Raw Input:56
Raw Input:13
Raw Input:10
Raw Input:50
Raw Input:54
Raw Input:13
Raw Input:10

what should I do?

Raw Input:51
Raw Input:53
Raw Input:13
Raw Input:10

In hex that is 0x33 0x35 0x0D 0x0A

That is, in ASCII: "35" followed by carriage-return (13) and linefeed (10).

Thanks Nick for your answer... what should I do in order to convert the format in order to plot/display the variable?

Concatenate the bytes into a string? However I'm no expert on Processing.

Processing has a method in the serial class, bufferUntil(). It will buffer the serial data until the specified value (carriage return, for example) arrives. Then, it will call the serialEvent(Serial) function.

In that function, you can use readString() to get the string, and convert it to an int, using the int() function.