Assignment #16
Interface and Application Programming

Introduction

I choose to use Processing for this assignment as I found that it is easy and similar to arduino programing somehow

• I used the input photoresistor board that I made earlier
• At the beginning I needed to download Processing and Learn the basics at least so i could start using it.
• I watched a couple of Tutorials, and to be honest I really liked Processing after that, it is simple and elegant :D
• I had to find a way to import the Serial data to the Processing code so I can use it, I found the Reference page very helpful in doing that, and after I use the Serial read code I was able to see my serial feed



• Now all i had to do is to convert this values into interactive graphs
• I desided to use a circle shape to demonstrate the changes in the values, so after I set the size of my canvas to be 500px X 500px, I wrote the circle code in the Void Draw part



   				
   					

					// Example by Tom Igoe

					import processing.serial.*;

					Serial myPort;  // The serial port
					int lByte = 0;
					int hByte = 0;
					int value = 0;
					void setup() {
					  size(500, 500);
					  // List all the available serial ports
					  printArray(Serial.list());
					  // Open the port you are using at the rate you want:
					  myPort = new Serial(this, Serial.list()[5], 9600);
					}

					void draw() {
					   background(10, 80, 100);
					  while (myPort.available() > 0) {
					    if(myPort.read() == 1)
					    {
					    lByte = myPort.read();
					    hByte = myPort.read();
					    value = hByte*256 + lByte;
					    myPort.clear();
					    println(value);    
					    }
					}
					  ellipse(250,250,value/3,value/3);
					  fill(1,value/4,value/5);
					  delay(100);
					}
 					
 				
 			




Download Code





• Don't forget to write the correct serial port no. in the code to get the feed from
• You can see that my serial feed value is bigger than my canvas size to i had to divide the values by 3 so it can fit my canavas



• As you can see in the video I set the circle to get to the max size when there are no light and vise versa
• I played a little with the code to make the circle change it's color also in response to the light