Interface and Application Programming

This weeks assignment was to write a Processing application to visualize the the data from the input device we made in week 11. The input device I made was the HelloTemp board so I wanted to create a visualization which would graph temperature verses time. The idea seemed pretty simple but the task proved to be more than I could wrap my head around.

In order to get started I first downloaded Processing. Then I went through several of the tutorials on the Processing site. I felt like I had a pretty good handle on drawing basic shapes (line, circle, rectangle, etc.), color was pretty simple as well. The basics were pretty basic and the ability to write or change a few lines and then run the sketch to see how it worked was nice. When it came to creating my graph things got a bit confusing. My approach was to create a graphic that represented something close to what I wanted and the add the serial component to it. I was able to make a colored background with a horizontal line to represent the x and a vertical line for the y axis. Next I added a 10x10 square that would represent my data. I was able to animate the square and get it to redraw at a regular interval on the x axis. When I tried to get the serial data to control the squares position in the y axis I hit a wall. I tried and tried and tried to get it to work. No matter how many times I smashed my head into the the wall I couldn't get it to do what I wanted. In reality I couldn't get to do anything. Every time I changed my code to in an effort to make it do anything new or different I got some type of error message. No matter what I tried, I couldn't resolve the errors. I went back to the Processing web site found different examples, tried different approaches and again found the wall. No matter how I went at it my hammer just wasn't big enough to break through. After many hours of pain and suffering the wall finally won. Tired and broken I finally gave in and called it quits. This is as far as I got.

Temp myTemp1;

void setup()  {
size (600,600);
stroke (255);
background (123, 78,160);
line (100,500, 500, 500);
line (100, 500, 100,100);
myTemp1 = new Temp(color(155,0,0),125,450,2);
}


void draw ()  {
  stroke (255);
background (123, 78,160);
line (100,500, 500, 500);
line (100, 500, 100,100);
  myTemp1.drive ();
  myTemp1.display();
}

class Temp {
  color c;
  float xpos;
  float ypos;
  float xspeed;
  
  
  Temp(color tempC, float tempXpos, float tempYpos, float tempXspeed){
   c=tempC ;
   xpos = tempXpos;
   ypos = tempYpos;
   xspeed = tempXspeed;
  }
  
  void display() {
    stroke (10);
    fill(c);
    rectMode (CENTER);
    rect (xpos,ypos,10, 10);
  }
  
  void drive() {
    xpos = xpos + xspeed;
    if (xpos > 500) {
      xpos = 125;
    }
  }
}