Virtual Swatch

In this assignment I'm going to make a virtual swatch with Processing and Arduino by using the analog sensor I've made in week 6.

Software i used

• Arduino

• Processing

Hardware i used

• Breadboard

• 100K ohm resistor

• NodeMCU

• LDR

• Analog sensor from week 6

• 7 cables to connect everything

Inspiration

At first I've looked through te examples from Processing for inspiration and came across this example I want to combine with Arduino.

Triangle Strip / ExamplesProcessing

By tweaking the values with my analog sensor i want to create more triangles so it will turn into a big circle, the same for the other way around.

Visually, I want it to look like it fits this series:

Serie of analog sensors and outputs by Loes Bogers

Arduino

The Arduino code looks like this:

int sensorValue = 0;

void setup() {
Serial.begin(9600); //needs to match processing baudrate
}

void loop() {
//Serial.println(analogRead(A0)); // for debugging only
sensorValue = analogRead(A0); // store value in sensorValue
Serial.write(map(sensorValue, 0,1023,0,255)); // map to processing range
delay(50);
}

I can use this code for the LDR and for the analog sensor I've made because i only want to read the values. The value is also mapped to 0 - 255 instead of 0 - 1023. I uploaded this code to the NodeMCU.

Schematic:

Schematic from how everything is connected. - Andrei Motian

For the first time to make sure it works i will use the LDR instead of the analog sensor I made.

Processing

For the code I've combined the example code with the code I used the first time in Processing. This was the trickiest part because i was not sure what to change. After a few hours i finally figuered out to make it work with the LDR and giving the right values so there will be more triangles or less.

The last thing in processing i needed to do was to make sure the visual will fit in the serie. It finally looked like this:

With the lowest value. - Andrei Motian

With the highest value. - Andrei Motian

The final code in Processing:

import processing.serial.*;
int x;
int y;
float outsideRadius = 150;
float insideRadius = 100;
Serial myPort;
int dataInput;
PImage bg;


void setup() {
  size(500, 500);
  String portName = "/dev/cu.SLAB_USBtoUART";  //change to your own port address!
  myPort = new Serial(this, portName, 9600); //needs to match arduino baudrate
  background(204);
  x = width/2;
  y = height/2;
}

void draw() {
  background(0);
  
  int numPoints = int(map(dataInput, 0, width, 6, 60));
  float angle = 0;
  float angleStep = 180.0/numPoints;
    
  beginShape(TRIANGLE_STRIP); 
  for (int i = 0; i <= numPoints; i++) {
    float px = x + cos(radians(angle)) * outsideRadius;
    float py = y + sin(radians(angle)) * outsideRadius;
    angle += angleStep;
    vertex(px, py);
    px = x + cos(radians(angle)) * insideRadius;
    py = y + sin(radians(angle)) * insideRadius;
    vertex(px, py); 
    angle += angleStep;
    fill(color(219,137,61));
  }
  endShape();
  println(dataInput);
}

void serialEvent(Serial myPort) {
dataInput = myPort.read();
 }

Final results

First i tried it with a LDR and it worked.

Trying with my hand. - Andrei Motian

Trying with the light in my room. - Andrei Motian

Next i tried it with the analog sensor I've made for week 6 and i was very happy to see it working!

I was holding my phone with my knees to capture this. - Andrei Motian