Magic Draw Board

A recreation of the old Magic Draw Board ( aka Etch a Sketch ).
The sketches are pretty basic and so is the hardware setup.
Arduino reads the potentiometers values and sends them to serial, in which Processing is listening and waiting to draw on screen.

As one of my first approaches to read/write a series of values at the same time, i used a delimiter character at the end of each batch of values.

Hardware you need:
1 Arduino Board
2 Potentiometers
1 Pressure Button

Instructions:
Connect the X axis potentiometer to Analog pin 2, Voltage to 5v and Ground
Connect the Y axis potentiometer to Analog pin 5, Voltage to 3V and Ground
Connect the Button to Digital pin 0 and Ground

Arduino Sketch

/**
 * ARDUINO SKETCH
 * MagicDrawBoard
 * @url https://binaryunit.com/work/magic-draw-board
 * @author binaryunit
 */

// define potentiometer pins
int potPinx = 2;
int potPiny = 5;
// define reset button pin
int buttonPin = 0;
// define needed values
int valuex = 0;
int valuey = 0;                           
int val = 0;  

void setup() 
{
	pinMode( buttonPin, INPUT );
	pinMode( potPinx, INPUT );
	pinMode( potPiny, INPUT );
	Serial.begin( 9600 );
}

void loop() 
{
	// reads X potentiomenter and writes to serial
	valuex = ( analogRead( potPinx ) );    
	if ( valuex>0 ){
    	Serial.print( valuex );
	}
                
	Serial.print( "," );
               
	// reads Y potentiomenter and writes to serial
	valuey = ( analogRead( potPiny ) );   
	if( valuey > 0 ) {    
		Serial.print( valuey );
  	}

	Serial.print( "," );

	// reads and writes value of the reset button
	val = digitalRead( buttonPin );
	if (val == HIGH) {            
		Serial.print( "0" );  
	} else {
		Serial.print( "1" ); 
	}

	Serial.print( ",x" ); // 'x' is used to determmine end of serial read
	// final serial print should be "valuex,valuey,val,x"

	delay( 20 ); 
}

Processing Sketch

/**
 * PROCESSING SKETCH
 * MagicDrawBoard
 * @url https://binaryunit.com/work/magic-draw-board
 * @author binaryunit
 */
 
import processing.serial.*; 

Serial theSerial;  
String serialString = null;
      
float convx;
int conv2x;
int pconvx;

float convy;
int conv2y;
int pconvy;

float convb;
int conv2b;

void setup()
{
	size(1024, 680);
  
	theSerial = new Serial( this, Serial.list()[1], 9600 );
	theSerial.clear();

	serialString = theSerial.readStringUntil( 120 ); // 120 is for lower case 'x'
	serialString = null;
  
	background( 102 );
	smooth();
}

void draw() 
{
	pconvx = conv2x;
	pconvy = conv2y;
	serialString = theSerial.readStringUntil( 120 ); // 120 is for lower case 'x'

	if ( serialString != null ) {
		println(serialString);
		
		// split serial income by ',' and assign values to array
		String[] stri= split(serialString, ',');;
		
		// converts floats to ints
		convx = float( stri[0] );
		conv2x = int( convx );

		convy = float( stri[1] );
		conv2y = int( convy );

		convb = float( stri[2] );
		conv2b = int( convb );

		if ( conv2b == 1 ){
			background( random(256),random(256),random(256) );
		}   
	}

	// draw random colored ellipses on assigned position
	variableEllipse( conv2x, conv2y, pconvx, pconvy );
	variableEllipse2( conv2x, conv2y, pconvx, pconvy );
}

void variableEllipse( int x, int y, int px, int py ) 
{
	float speed = abs( x-px ) + abs( y-py );
	stroke( speed );
	ellipse( x, y, speed, speed );
	fill( random(256),random(256),random(256) );
}

void variableEllipse2( int x, int y, int px, int py ) 
{
	float speed = abs( x-px ) + abs( y-py );
	stroke( speed );
	ellipse( x, y, speed-10, speed-10 );
	fill(random(256),random(256),random(256) );
}