For this task I started to write an application using the Processing IDE with Arduino IDE.

WHY I USE PRCESSING?
I use processing because is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Processing is very useful platform for hobbyists, researchers, students for learning and prototyping. Some of the features are:

- Free and open source
- For all platforms (GNU/Linux, Mac OS X, Windows, Android, and ARM)
- Well documented
- Many libraries
- Good community
So I download the both software for Win-64 and install it.
Processing is a software that uses the processing language that is based on Java and its interface is very similar to that of the arduino ide.

Below are the steps to downdload and use Processing.


STEP 1. Downdload the Processing IDE

Downdload the last version of Processing IDE and in my case Win-64 and proceed to install, in the zip file that you download it has all the necessary files and libraries so that it can work well in the software
Picture 33. This picture shows the website to download the latest version of the software. In my case Win-64




STEP 2. Running Processing

When you click on download Processing, it downloads one zip file. Unzip that file and inside the unzipped folder you will find Processing application (see the following image). And to run Processing, double click on the icon that says Processing.
Picture 33. Double click on this icon.


Picture 33. This will have to come out. Welcome to Processing IDE!.




STEP 3. Downdload a library

There are many libraries for different applications. You can also install some extra libraries manually or directly from the menu. I show you.
Picture 33.1. To install new library from menu, go to: Sketch -> Import Library... -> Add Library...




STEP 4. Learn to design in Processing IDE

I open the Processing IDE and looking at tutorials I will try to learn how to use it. Following the video tutorial I start to create and practice what I can do in Processing.

Picture 34. I open Processing and see that the program is similar to the Arduino IDE.

Picture 34.1. Well I think to do a simple exercise for practice and learning
First I write this code to create some shape or geometry in Processing, in my case I decide to draw a random geometry to have a little fun, in the photo below you can see my figure that I draw.



To draw a rectangle: rect(a,b,c,d);
To draw an ellipse: ellipse(a,b,c,d);

a — X (horizontal) location of the shape's upper-left corner
b — Y (vertical) location of the shape's uppper-left corner
c — width of the shape
d — height of the shape

Set the background color: background(r,g,b);
Set the outline color: stroke(r,g,b);
Set the interior color: fill(r,g,b);

Don't forget, you need to call stroke() and fill() before you draw the shape!

r — amount of red, from 0 (none) to 255 (maximum)
g — amount of green, from 0 (none) to 255 (maximum)
b — amount of blue, from 0 (none) to 255 (maximum)


I in this step I learn to put color in my draw.

Picture 35.

Picture 35.1.


> In this part, I learn to change the dimension to the canvas (the canvas is the small window that appears after clicking to preview your drawing) and put a some text to.

Picture 35.2.


I learn my first interaction, This interaction const in click over the square for to the square change it's color.

Picture 35.3.


Animation.




STEP 5. Downdload the Arduino IDE

Downdload the last version of Arduino IDE.

Picture 36.




STEP 6. Connected Processing IDE with Arduino IDE

In this part I learn to conect an Arduino and Processing. This example const in blink a LED when I click over the canvas.

Picture 37.


Process to link both programs.


Video

For a practice for me to learn more efficient this program Processing; I draw an alien creature with made of ellipses and rectangles.

I write a code in processing and draw my alien idea.

View of my alien.



-the files are at the end of this page.

After learning to use and create in Processing I decided to do an interaction, I draw a lightsaber and if you over it and click on the blade this change it's color. Below are the steps.

STEP 1.
Draw my design in a paper

Picture 40.


STEP 2.
Draw in Processing based in to my paper draw.
First I write the size of the canvas. then I type rect (450, 600, 50, 100) 450 is the X position and 600 is the Y position. 50 and 100 are the dimension of my lightsaber hilt rectangle, and finally, I drew the sheet for this, I thought how can I do to draw it and finally it occurred to me to write this code rect (425, 200, 50, 500, 50, 50, 0, 0) calculate the position based on the location of the grip and at the tip of the leaf I rounded it for that reason I put 50, 50,0,0; 50 50 is for the tip to be rounded and 0 0 for it to be straight and fit perfectly with the handle.

Picture 40.1.


STEP 3.
Finish the Draw and codify to the interectuation. Similar than Arduino Processing use the variable void setup, in this variable I put the objects and detail it dont have move orr interectuat. but in the variable voit draw I put all the objects interactuat.

Picture 40.2.


-the files are at the end of this page.

Video

Processing using mouse for change the color of the blade of this Lightsaber from
LUIS TOLENTINO.

For this part, I decid to do a GUI in processing to turn on and turn off three LEDs with Processing.

STEP 1. Download and install the libray IP5
But at the moment we are only interested in GUI design. And there is a very nice library called "ControlP5" available to create our project. ControlP5 is a library written by Andreas Schlegel for the Processing programming environment.

Picture 41.0.

Picture 41.0. To add the ControlP5 library to Processing, just follow the process of adding library and search for ControlP5 and then click install.



Picture 41.1. Now you are ready to create your GUI application.



Once you have installed ControlP5, start with creating simple window.
Next step is to write a Arduino sketch. Write a code in such a way that when Arduino receives any character over serial port, it performs some particular task. For example

   if(val == 'r'){           //if r received 
                   digitalWrite(11, HIGH); //turn on pin 11 (red led in our case) 
                   } 
              

So when Arduino receives char 'r', it sets pin 11 to High. Please check the codes in code section below to get exact idea.
Now comes the Processing part. There is a Serial library in the Processing and we can use that to read and write to the serial port. So what we do now is we assign a function to each of the buttons to send some character to serial port, so when you press any button, it send particular char to the serial port. For example suppose we have a button called red, when you press button red it sends char 'r' to the serial port.

void red(){ 
               port.write('r'); 
              } 
              

At the other end, Arduino receives that char 'r' and according to the received char it changes state of the pins.


Components and Circuit This are the materials i used on thes task.

Material	Measures
Arduino NANO	x1
Breadboar (generic)	x1
LED	x3
Resistor 100 ohm	x1
Jumper Wires	x4

Picture 41.2. This are the componets i need to use on this project.

I research the interface between Python and Arduino.

This assignment was the most difficult for me since I had to program in two IDEs that maintain similarities but in general it was difficult for me to understand the labels and syntax when writing them. Because I had to design in process and then make it communicate with arduino and that is where I have my doubts. I still have learned this part well.

- Alien-Processign:


Here are the Alien file:
. I share you my Processing File: Alien.pde
. This is the Alien_Code file: Alien Code.txt






- Lightsaber-Processing:


Here are the Lightsaber file:
. I share you my Processing File: Lightsaber.pde
. This is the Lightsaber_Code file: Lightsaber Code.txt






- Processing - LEDs:


Here are the files CODES:
. Arduino CODE: Arduino_LED.ino
. Processing CODE: Processing_LED.pde






- Python - Servomotor:


Here are the Arduino file:
. Arduino CODE:Servomotor_Slider-GUI.ino
Here are the Python file:
. Python CODE:Servomotor_Slider-GUI.py