Final Project Documentation


Choosing to take Intro to IM as my first coding experience was akin to taking a giant leap for me. Yet I am surprised how bit by bit this class cleared so many concepts and provided me with the hands-on experience I needed in coding platforms. For my final project, as promised and discussed in previous posts, I tried to create a painting/drawing platform by connecting P5js to Arduino. Interactive Media in itself is a form of creative expression and I wanted this project to be a platform for a digital form of artistic expression. This attempt at coding as etch-a-sketch is an ode to that childish playfulness that often gets subdued as we grow up.

Arduino setup-

Revised console-setup-


The project mainly includes two potentiometers and a switch. The values sent from the first potentiometer map the vertical movement of the ellipse that is drawn based on its R-value (RGB color). It moves the ellipse up and down. Similarly, the movement of the second potentiometer maps the horizontal value of the ellipse and makes it go left and right. The way in which the first potentiometer controls the r-value, the second potentiometer also adjusts the alpha value of the ellipse that is drawn. when both the potentiometers are moved together, the user is able to draw curved lines as well. The third main component is the switch which when pressed clears the canvas for a new sketch to be drawn.

The p5.js component is crucial to the functioning of the program since it handles everything from sending data to the Arduino to displaying the design that is drawn in the most effective way. Three functions are primarily added in the p5js code. They include draw, readSerial, and frame. The draw function is where the ellipse is drawn and moved along the canvas. The readSerial function establishes the serial connection between the Arduino port and the p5js sketch when the space bar is pressed by the user within the canvas based on bilateral handshaking. After pressing the space bar, the port selection dialog box pop-ups from which the suitable port is selected. A global variable called the “buttonState” is defined at the beginning of the code that clears the canvas every time the digital switch is pressed or in other words when its state changes from 0 to 1.

Finally, the frame function deals with the aesthetics of the project. It draws the authentic etch-a-sketch style background to make the screen look more inviting. I have also looped a whimsical song that plays in the background every time the serial connection is established and as long as the program is running.

The Arduino side mainly executes the commands that are sent by the p5js sketch. The analog sensors (potentiometers) are read and then their values are printed similarly through the addition of a local variable within the loop function, the digital values being sent from the switch are read. The pin mode has been added in the setup as the input. The other digital and analog values are added and read in the loop function.

Arduino Code

// Inputs:
// - A0 - first potentiomemter 
// - A1 - second potentiomemter
// - 2  - switch 

void setup() {
  // Serial communication is started to send the data

   pinMode(2, INPUT); 

  // bidirectional communication starts
  while (Serial.available() <= 0) {
    Serial.println("0,0"); // send a starting message

void loop() {
  // waits to receive data from p5js first and then starts executing
  while (Serial.available()) {

    int left = Serial.parseInt();
    int right = Serial.parseInt();
    if ( == '\n') {
      int sensor = analogRead(A0);
      int sensor2 = analogRead(A1);
      int button = digitalRead(2);
      delay (5);


P5js sketch and Code

Components I am Proud of

Overall, I am quite pleased with my humble outcome as it performs its bilateral communication functions quite smoothly. I am particularly proud of how the addition of mapping the alpha values of the ellipses that are being drawn on the screen gives a special “sketchy” effect to the project. Moreover, as we toggle the speed of the potentiometers the density of the stroke changes which is quite similar to the manner in which strokes that are drawn by a sketch pen change with varying pressure.

A few Sketches and user interaction-

Blind Contouring a portrait-

Plotting the map of India-

User interaction-


Future Improvements

I would have loved to add another switch in the project that allowed the user to change the color of the stroke from black to another color. But through my best possible attempts in the given time frame, I was able to add a switch that changes the color of the stroke when it is being continuously pressed. This beat its practical purpose though since the user would have to use both of his hands to toggle the potentiometers and at the same time keep pressing the switch.

Leave a Reply