Visualize serial data 2

Another Way to Look at the Data This example is inspired by radar display screens. The values are read in the same way from the Arduino board, but they are visualized in a circular pattern using the sin() and cos() functions. import processing.serial.*; Serial port; // Create object from Serial class float val; // Data received from the serial port float angle; float radius; void setup() { size(440, 440); frameRate(30); strokeWeight(2); smooth(); String arduinoPort = Serial.list()[0]; port = new Serial(this, arduinoPort, 9600); background(0); } void draw() if ( port.available() > 0) { // If data is available, val =; // read it and store it in val // Convert the values to set the radius radius = map(val, 0, 255, 0, height * 0.45); } int middleX = width/2; int middleY = height/2; float x = middleX + cos(angle) * height/2; float y = middleY + sin(angle) * height/2; stroke(0); line(middleX, middleY, x, y); x = middleX + cos(angle) * radius; y = middleY + sin(angle) * radius; stroke(255); line(middleX, middleY, x, y); angle += 0.01; } The angle variable is updated continuously to move the line drawing the current value around the circle, and the val variable scales the length of the moving line to set its distance from the center of the screen. After one time around the circle, the values begin to write on top of the previous data. We’re excited about the potential of using Processing and Arduino together to bridge the world of software and electronics. Unlike the examples printed here, the communication can be bidirectional. Elements on screen can also affect what’s happening on the Arduino board. This means you can use a Processing program as an interface between your computer and motors, speakers, lights, cameras, sensors, and almost anything else that can be controlled with an electrical signal. Again, more information about Arduino can be found at

Leave a comment
