*SEVETEEN*WEEK: INTERFACE AND APPLICATION PROGRAMMING

Assignment

1. Assignment:

• write an application that interfaces with an input and/or output device that you made, comparing as many tool options as possible

Assignment




INTRODUCTION: This week I must use different language systems to make an application that interacts with one of my outputs or inputs. Our guru recommended that we start by processing and that we at least get to do something with p5.js. Both need libraries to install and also an Arduino programming to interact with my PCB

- PROCESSING: is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. it has severals tutorials where I can learn more about tis programe, for example HERE - P5.JS: is a JavaScript library that starts with the original goal of Processing, to make coding accesible for artists, designers, educators, and beginners, and reinterprets this for toda’s web. For this programe I used the reference that you can wath HERE PROCESSING: To design in processing I needed to understand a little more how it worked, and for that I started with a simple example with a led that appears in the tutorials of electronics of the page itself. Use the PCB that I did in week12-input
ARDUINO PROGRAMMING

#include < SoftwareSerial.h>

int ledPin =13;

void setup() {
 Serial.begin (9600);
 pinMode(ledPin, OUTPUT);// put your setup code here, to run once:

}

void loop() {
while(Serial.available() ==0);  // put your main code here, to run repeatedly:
int val = Serial.read()-'0';
if (val == 1){
  Serial.println("Led is ON");
  digitalWrite(ledPin, HIGH);
}else if(val == 0){
  Serial.println("led is OFF");
  digitalWrite(ledPin, LOW);
}else{
  Serial.println("invalid");
}
} 

PROCESSING

import processing.serial.*;

Serial myPort;

void setup(){
  
 size (200,200);
 println(Serial.list());
 myPort = new Serial (this,Serial.list()[0], 9600);
 myPort.buffer(1);
 
}
void draw(){
  fill(212,55,12);
  rect(0,0,100,200);
  
  fill(90,220,73);
  rect(100,0,100,200);
}
void mousePressed(){

  if(mouseX> 0 && mouseX< 100){
    if(mouseY> 0 && mouseY< 200){
      myPort.write(48);
    }
}


 if(mouseX> 100 && mouseX< 200){
    if(mouseY> 0 && mouseY< 200){
      myPort.write(49);
    }
}
}


After what I did was to find and adapt an Arduino program and processing to my input board, to play with a phototransistor, at first I had problems especially with the values that the phototransistor collected on the serial monitor, but I ended up solving it, Changing the range of values it collected, so that it had values between 2-3 on white paper and values of 1 in black line. And that's how the program works.
ARDUINO PROGRAMMING

const int numReadings = 10;

int readings[numReadings];      
int index = 0;                  
int average = 0;                
int total = 0;       
int sensorValue = 0;        
int outputValue = 0;         


int inputPin = 17;
int ledPin = 13;
  
void setup()
{
 
  Serial.begin(9600);                  
  
  for (int thisReading = 0; thisReading < numReadings; thisReading++)
    readings[thisReading] = 0;
  pinMode(inputPin, INPUT);
  pinMode (ledPin, OUTPUT);          
}

void loop() {
    sensorValue = analogRead(inputPin);           
  outputValue = map(sensorValue, 0, 1030, -1030, 1030); 
 
  total= total - readings[index];        
  readings[index] = outputValue;

  total= total + readings[index];      
 
  index = index + 1;                    

 
  if (index >= numReadings)              
 
    index = 0;  
    digitalWrite(ledPin, HIGH);                        

 
  average = total / numReadings;        
  
  Serial.println(average);  
  delay(1000);       
}

PROCESSING

import processing.serial.*; // import the Processing serial library
Serial myPort; // The serial port
int cos;
/*
Made by Jared "BlueThen" C.
Created on November 4, 2009. Refined and commented on November 5, 2009.
www.bluethen.com
*/
/* Variable a is used for determining the shape's y position, coupled with the distance they are from the center. */
float a;


/* Setup(), the first function called when the applet is started */
void setup()
{
  /* The applet is set to 500 pixels by 500 pixels */
  size(500,500);
  /* RGB mode set to maximum of 6, since we'll be using 6 colors. 0 for black, 6 for white, and everything in between. */
  colorMode(RGB, 6);
  /* The stroke color is used to determine the border color of each quadrilateral. */
  stroke(0);
  /* Frame rate is set to 30. */
  frameRate(30);
  
  String portName = "/COM6";
  myPort = new Serial(this, portName, 9600);
  myPort.bufferUntil('\n');
  
}
void draw()
{
  /*
  a is decreased by 0.08. It represents the amount of radians the height of our boxes changes, and their speed.
  If we did nothing to a, then none of our shapes will move, so a is a key component in our formulas.
  */
  a -= 0.08;
  /* Screen is cleared and background is set to 6 (white). */
  background(6);
  /*
  These are our loops.
  We loop through 14 rows (-7 through 7) for the x axis, and within each row, we loop through 14 collumns for the z axis
  (x,z) is the ground, while y is verticle)
  */
  for (int x = -7; x < 7; x++) {
   for (int z = -7; z < 7; z++) {
    /*
    The y variable is set to determine the height of the box.
    We use formula radius * cos(angle) to determine this.
    Since cosine, when graphed, creates a wave, we can use this to have the boxes transition from small to big smoothly.
     
    The radius pretty much stands for our range. cosine alone will return values between -1 and 1, so we multiply this by
    24 to increase this value. The formula will return something in between -24 and 24.
     
    The angle is in radians. An entire loop (circle) is 2pi radians, or roughly 6.283185.
    Distance is used to create the circular effect. It makes the boxes of the same radius around the center similar.
    The distance ranges from 0 to 7, so 0.55 * distance will be between 0 and 3.85. This will make the highest and lowest
    box a little more than half a loop's difference. a is added on, (subtracted if you want to be technical, since a is negative), to
    provide some sort of change for each frame. If we don't include '+ a' in the algorithm, the boxes would be still.
    */
    int y = int(24 * cos(0.55* distance(x,z,0,0) + a));
    
    /*
    These are 2 coordinate variations for each quadrilateral.
    Since they can be found in 4 different quadrants (+ and - for x, and + and - for z),
    we'll only need 2 coordinates for each quadrilateral (but we'll need to pair them up differently
    for this to work fully).
     
    Multiplying the x and z variables by 17 will space them 17 pixels apart.
    The 8.5 will determine half the width of the box ()
    8.5 is used because it is half of 17. Since 8.5 is added one way, and 8.5 is subtracted the other way, the total
    width of each box is 17. This will eliminate any sort of spacing in between each box.
     
    If you enable noStroke(), then the whole thing will appear as one 3d shape. Try it.
    */
    noStroke();
    float xm = x*17 -8.5;
    float xt = x*17 +8.5;
    float zm = z*17 -8.5;
    float zt = z*17 +8.5;
     
    /* We use an integer to define the width and height of the window. This is used to save resources on further calculating */
    int halfw = (int)width/2;
    int halfh = (int)height/2;
     
    /*
    Here is where all the isometric calculating is done.
    We take our 4 coordinates for each quadrilateral, and find their (x,y) coordinates using an isometric formula.
    You'll probably find a similar formula used in some of my other isometric animations. However, I normally use
    these in a function. To avoid using repetitive calculation (for each coordinate of each quadrilateral, which
    would be 3 quads * 4 coords * 3 dimensions = 36 calculations).
     
    Formerly, the isometric formula was ((x - z) * cos(radians(30)) + width/2, (x + z) * sin(radians(30)) - y + height/2).
    however, the cosine and sine are constant, so they could be precalculated. Cosine of 30 degrees returns roughly 0.866, which can round to 1,
    Leaving it out would have little artifacts (unless placed side-by-side to accurate versions, where everything would appear wider in this version)
    Sine of 30 returns 0.5.
     
    We left out subtracting the y value, since this changes for each quadrilateral coordinate. (-40 for the base, and our y variable)
    These are later subtracted in the actual quad().
    */
    int isox1 = int(xm - zm + halfw);
    int isoy1 = int((xm + zm) * 0.5 + halfh);
    int isox2 = int(xm - zt + halfw);
    int isoy2 = int((xm + zt) * 0.5 + halfh);
    int isox3 = int(xt - zt + halfw);
    int isoy3 = int((xt + zt) * 0.5 + halfh);
    int isox4 = int(xt - zm + halfw);
    int isoy4 = int((xt + zm) * 0.5 + halfh);
     
    /* The side quads. 2 and 4 is used for the coloring of each of these quads */
    fill (2);
    quad(isox2, isoy2-y, isox3, isoy3-y, isox3, isoy3+40, isox2, isoy2+40);
    fill (4);
    quad(isox3, isoy3-y, isox4, isoy4-y, isox4, isoy4+40, isox3, isoy3+40);
     
    /*
    The top quadrilateral.
    y, which ranges between -24 and 24, multiplied by 0.05 ranges between -1.2 and 1.2
    We add 4 to get the values up to between 2.8 and 5.2.
    This is a very fair shade of grays, since it doesn't become one extreme or the other.
    */
    //fill(4 + y * 0.05);
    fill(100,45,cos*2);
    quad(isox1, isoy1-y, isox2, isoy2-y, isox3, isoy3-y, isox4, isoy4-y);
   }
  }
}
/* The distance formula */
float distance(float x,float y,float cx,float cy) {
  return sqrt(sq(cx - x) + sq(cy - y));
}

void serialEvent(Serial myPort)
{
  println("Im in Serial event - Port: "+myPort);
 
  String myString = myPort.readString();
 
  if (myString != null) {

    myString = trim(myString);
  }
  
  String [] numbers = split(myString, ',');
  float sensors[] = float(numbers);
 
 println(sensors[0]);
 cos = (int)sensors[0];

}

FILES:
- Led programming arduino
- Led processing
- Phototransistor programming arduino
- processing waveBox