Final Project Progress

Concept and Design

As for my final project, I have decided to work on an interactive painting program that allows its users to draw on the p5js sketch. So far the progress has been slow and steady as it is a well-known fact that any piece of art takes time, haha.

The main Arduino components I have included in my circuit are two potentiometers. When they are toggled the ellipse starts creating a generative art in whichever direction the user chooses to move the analog sensors. Since the alpha and r values of the ellipse have been mapped, every time the speed of the potentiometer changes, depending on how fast or slow it goes, the transparency and the hue change. I have also included a switch which when pressed clears the screen.

Initial advancement-

P5js Code

Draw function-

function draw() {
  
  fill(255, 0, 255, map(alpha, 0, 1023, 0, 255));
  ellipse(map(rVal, 0, 1023, 0, width), map(alpha,  0, 1023, 0, height), 50);
  
  if (buttonState == 1){
    // background(map(rVal, 0, 1023, 0, 255), 255, 255);
    background (190)
    
  }

Serial Communication-

function readSerial(data) {
  
  if (data != null) {
    // make sure there is actually a message
    // split the message
    let fromArduino = split(trim(data), ",");
    // if the right length, then proceed
    if (fromArduino.length == 3) {
      // only store values here
      // do everything with those values in the main draw loop
      rVal = fromArduino[0];
      alpha = fromArduino[1];
      buttonState = fromArduino[2];
    }
    

    //////////////////////////////////
    //SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
     let sendToArduino = left+ "," + right + "\n";
    writeSerial(sendToArduino);
  }
}

Arduino Code

void setup() {
  Serial.begin(9600);

   pinMode(2, INPUT); 

  // start the handshake
  while (Serial.available() <= 0) {
    Serial.println("0,0"); // send a starting message
    // delay(300);            // wait 1/3 second
  }
}

void loop() {
  while (Serial.available()) {

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

Improvements

I am still working on a lot of components and hope to include them.

1. Add another switch that allows the user to shift between shapes such as from an ellipse to a square.
2.  I want the values of the colors to change when the shape enters a certain side of the canvas while it is being controlled by the P5js.
3.  Design a creative P5js interface than just plain background.
4.  I am still working on designing a board wherein I could attach the switches and the potentiometers.