Skip to content

16. Interface and application programming

As always, there are many ways to approach this task. I decided to solve this task with processing and the Arduino ide, because I had no programming experience until the beginning of the fabacademy and this approach seems realistic to me for my time contingent.

Other options such as pyhon, java script or three. js require, from my point of view, greater prior knowledge.

I created the ldr as input for this assignment. When you change the brightness, the tree moves on the screen.
To achieve this, I have adapted some codes from Daniel Shiftman, Adrian Torres and from to my needs.

the board

After I adapted everything to my board, I uploaded the code via UPDI.

and then the board is connected to the PC via FTDI in order to read out the data with the processing interface.


code example


float theta;   
import processing.serial.*;

float sensorValue; //variable for the serial data
Serial myPort;

void setup() {
  size(640, 360);
   myPort = new Serial(this, "COM5", 115200); // serial port

void draw() {
  // Let's pick an angle 0 to 90 degrees based on the mouse position
  float a = (sensorValue / (float) width) * 90f;
  // Convert it to radians
  theta = radians(a);
  // Start the tree from the bottom of the screen
  // Draw a line 120 pixels
  // Move to the end of that line
  // Start the recursive branching!


void branch(float h) {
  // Each branch will be 2/3rds the size of the previous one
  h *= 0.66;

  // All recursive functions must have an exit condition!!!!
  // Here, ours is when the length of the branch is 2 pixels or less
  if (h > 2) {
    pushMatrix();    // Save the current state of transformation (i.e. where are we now)
    rotate(theta);   // Rotate by theta
    line(0, 0, 0, -h);  // Draw the branch
    translate(0, -h); // Move to the end of the branch
    branch(h);       // Ok, now call myself to draw two new branches!!
    popMatrix();     // Whenever we get back here, we "pop" in order to restore the previous matrix state

    // Repeat the same thing, only branch off to the "left" this time!
    line(0, 0, 0, -h);
    translate(0, -h);

  fill(0,0,0);// these are the colors inside
  text(sensorValue + " " + "cm" , sensorValue, height/2);
}void serialEvent(Serial myPort) { // sketch read the serial data
  String inString = myPort.readStringUntil('\n');
  if (inString != null) {
    inString = trim(inString);
    float[] values = float(split(inString, ","));
    if (values.length >=1) {
      sensorValue = values[0]; //first value in the list


const int ledPin = 10;
const int ldrPin = 9;

void setup() {
pinMode(ledPin, OUTPUT);
pinMode(ldrPin, INPUT);
void loop() {
int ldrStatus = analogRead(ldrPin);
if (ldrStatus <= 500) {
digitalWrite(ledPin, HIGH);

} else {

digitalWrite(ledPin, LOW);


Last update: May 27, 2021