Processing

This was my first time using Processing.

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. - processing.org

The coding language is similar to Arduino code.

To try to figure out Processing I followed the Arduino X Processing Tutorials that i found on DLO.

Arduino code

First i uploaded this Arduino code on my NodeMCU and used the LDR to receive data:

//ARDUINO CODE FOR ANALOG SENSOR
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);
}

Processing code

Then i pasted this code in Processing:

//PROCESSING CODE FOR ANALOG SENSOR
import processing.serial.*;
Serial myPort;
int dataInput;

void setup() {
size(255,255);
//println(Serial.list()); //use to find list of your port addresses
String portName = "COM5";  //change to your own port address!
myPort = new Serial(this, portName, 9600); //needs to match arduino baudrate
}

void draw() {
background(0);
fill(255);
fill(color(145,102,12));
ellipse(width/2,dataInput, 20, 20);  // use dataInput for y axis
println(dataInput);
}

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

I was not sure what was about to happen when i would run this code. It turned out to be a circle that goes up as soon as the values change:

More experimenting

Through Zoom i learned about processing and how to work with images. Sander had made something with which you see the sun rise in an image and I also wanted to make something similar like that. I made a moon from the view of a satelite that rises above earth.

It is important to set the size the same as the image size so it wil fit as a background image otherwise you won't see it. I changed the code in processing and this was what happened:

import processing.serial.*;
Serial myPort;
int dataInput;
PImage bg;

void setup() {
size(500,333);
//println(Serial.list()); //use to find list of your port addresses
String portName = "/dev/cu.SLAB_USBtoUART";  //change to your own port address!
myPort = new Serial(this, portName, 9600); //needs to match arduino baudrate
  bg = loadImage("aardekopie.jpg");
}

void draw() {
background(bg);
fill(255);
fill(color(255,244,204));
ellipse(width/2,dataInput, 40, 40);  // use dataInput for y axis
println(dataInput);
}

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

Last updated