Even more dots

For this week’s assignment, we were supposed to use one of our Processing creations and connect it with Arduino. I decided to go with my Computer Art recreation, as I saw a lot of possibilities to play with the work a little bit.

What I ended up doing is simply mapping the potentiometer values to the number of dots in each segment as well as the size of the dots. In this way, if put on the maximum potentiometer value, the dots gradually consume the whole screen.

There were almost no issues with this, as I was working with an already existing code that worked properly. All I had to do is to start the communication with Arduino and add mapping of the values. The only thing that gave me a little trouble was finding the right values so that the increase in the size and number of dots is smooth and gradual. It just took a couple of trials and errors to achieve the desired effect and voilà.

Here is the Processing code:

//setting up the number of dots used in different segments
int numberCirclesA = 700;
int numberCirclesB = 1000;
int numberCirclesC = 3000;
int numberCirclesD = 5000;

//setting up communication with arduino
import processing.serial.*;
Serial myPort;


//setting up variables for x, y locations, and width of the dots
float x;
float y;
float w = 3;


void setup() {
  size (800, 390);
  //noLoop(); // to be activated only to see the exact replica of the original image


//setting up communication with arduino
  printArray(Serial.list());
  String portname=Serial.list()[51];
  println(portname);
  myPort = new Serial(this, portname, 9600);
  myPort.clear();
  myPort.bufferUntil('\n');
}


void draw () {
  background (255);
  noStroke();
  fill(0);


  // different segments in which the dots are being drawn
  
  for (int i = 0; i < numberCirclesA; i++) {
    pushMatrix();
    x = random(0, width);
    y =random(0, height);
    ellipse (x, y, w, w);
    popMatrix();
  }
  for (int i = 0; i < numberCirclesB; i++) {
    pushMatrix();
    y = (random(110, 150));
    x = (random(0, width));
    ellipse(x, y, w, w);
    popMatrix();
  }

  for (int i = 0; i < numberCirclesA; i++) {
    pushMatrix();
    x = random(0, width);
    y = (random(0, height -30));
    ellipse (x, y, w, w);
    popMatrix();
  }

  for (int i = 0; i < numberCirclesB; i++) {
    pushMatrix();
    y = (random(40, height - 70));
    x = random(0, width);
    ellipse(x, y, w, w);
    popMatrix();
  }

  for (int i = 0; i < numberCirclesC; i++) {
    pushMatrix();
    y = (random(20, height - 150));
    x = random(0, width);
    ellipse(x, y, w, w);
    popMatrix();
  }

  for (int i = 0; i < numberCirclesD; i++) {
    pushMatrix();
    y = (random(60, height - 200));
    x = random(0, width);
    ellipse(x, y, w, w);
    popMatrix();
  }
  for (int i = 0; i < numberCirclesD; i++) {
    pushMatrix();
    y = (random(40, height - 175));
    x = random(0, width);
    ellipse(x, y, w, w);
    popMatrix();
  }

  //tracking the mouser cursor
  print(mouseX);
  print (" ");
  println(mouseY);
}


//mapping the values of a potentiometer to number and width of the dots
void serialEvent(Serial myPort) {
  String s=myPort.readStringUntil('\n');
  s=trim(s);
  if (s!=null) {
    w=(int)map(int(s), 0, 1023, 3, 15 );
    numberCirclesD=(int)map(int(s), 0, 1023, 5000, 20000);
    numberCirclesA=(int)map(int(s), 0, 1023, 700, 20000);
    numberCirclesB= (int)map(int(s), 0, 1023, 1000, 20000);
    numberCirclesC= (int)map(int(s), 0, 1023, 3000, 20000);
  }
  println(numberCirclesD);
  myPort.write('0');
}

And here is Arduino code we used in class:

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
  Serial.println('0');
  pinMode(2, OUTPUT);
}

void loop() {
  if(Serial.available()>0){
    //inByte reads the values from Processing
    char inByte=Serial.read();
    int sensor = analogRead(A0);
    delay(5);
    Serial.println(sensor);
    digitalWrite(2, inByte);