interface and application programming

week 14

Group assignment:

Individual assignment

in this week we got introduced to a lot of software’s that we can use for interfacing with our boards, in order to make it more user friendly.

and for me since i am more familiar with Arduino environment its better to use processing to do the job, but first lets get into the basics of graphic’s and understand pixels

Understand Pixel

A pixel is the smallest unit of a digital image or graphic that can be displayed and represented on a digital display device.

A pixel is the basic logical unit in digital graphics. Pixels are combined to form a complete image, video, text, or any visible thing on a computer display.

A pixel is also known as a picture element (pix = picture, el = element)

to understand it even better lets write the number 3 in a screen of 10 X 10, first lets divide the picture into small boxes then fill the boxes with black and mark it as zeros to shape the number 3,


Image of black and white

this is We called a binary, image it has only values of 0 and one and with 2 layer, and like we did with number 3 here we did the same but with more pixels in the picture.


Gray scale image

To make the picture have more details we will add more layer and divide the colors for 255 values and make it 255 shades of grays and we call this image a gray scale image


Colored image

By the same way we can have the colored image we divide it into 255 shade for each color Red , Green , Blue


screen resolution

Screen resolution refers to the clarity of the text and images displayed on your screen. At higher resolutions, such as 1600 x 1200 pixels, items appear sharper. They also appear smaller so more items can fit on the screen. The larger the monitor, usually the higher the resolution it supports.

Familiar With this


VGA have 640 pixel in width and 480 in Height

Colored VGA Image

Adding these layer in top of each other will represent the full colored images


Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts..


Processing work in cross platform, I am using windows 10 64 bit this is what I am going to download

extract and around

once the download complete extract the files and run processing.exe processing

Getting started tutorial

in processing website they have good documented tutorial for getting started with the program, i do recommend to go through it to understand its environment and how to deal with graphics,

navigate to tutorials and start with hello processing

hello processing

Hello Processing

now lets jump to processing to understand more about its function

hello processing


first we need to understand what is canvas

The canvas is a two-dimensional grid. The coordinate (0, 0) is at the upper-left corner of the canvas. Along the X-axis, values increase towards the right edge of the canvas. Along the Y-axis, values increase towards the bottom edge of the canvas.

and its the window that will hold our graphics and codes in processing,

start a canvas by writing size function and then decide the size of your canvas



The origin (0,0) is in the top lef corner ,To draw rectangle we will write rect function

" Rect( x,y,w,h); " where x and y is the starting point of the rectangle and it will be top left corner and w is the width and h is the Hight



To draw a circle you need to use ellipse function

Ellipse(x,y,w,h); think about as a circle inside a rectangle to have complete circle w and h should be equal, And for the coordinate x and y this means the center of the circle


Colors (stroke , fill , shade of gray )

A stroke is a line of color that precisely follows a path, and its the outline of the shape

A fill is a color enclosed by a path. and its the inner fill of the shape

To color the rectangle with shade of gray between 0 – 255 you need to call stroke and fill function first Stroke is , fill is and you can use tow color for booth stroke(0); fill(128); rect(250,200,100,75);


Colors ( RGB )

To use rgb collor in the stroke and fill function you need to choose three values for red green and blue , think about as a mixing of light And also you can color tha canvas background with the function below


stroke(255,0,0); fill(0,0,255); rect(250,200,100,75);



in processing to write more complex programs you need to add functions, there is tow main functions that has to be writing first which is:

Void setup is the line of code that happen one time once you hit run in the program Void draw its set of code that will loop infinity in loop

void setup() { background(10, 80, 100); size(900, 800); }

Void Draw () { stroke(255, 255, 255);

fill(160, 220, 90);

ellipse(250, 200, 300, 300);

fill(160, 210, 230);

rect(245, 40, 10, 240);

fill(255, 255, 255);

ellipse(190, 200, 70, 70); }



now lets test something new , we will use the cordinate of the mouse pointer using mouseX, mousey function.

Mousex and mouseY is the coordinate of our mouse in screen , and it should be x then y to have it in the same direction of the screen so it will follow the pointer, If you reverse it it will go against the coordinate of the mouse


void setup() { size(500,400); }

void draw() { background(0); stroke(255); fill(128); ellipse(mouseX, mouseY, 100, 100); }

IF , else Statment

Now we got introduced to if and else statement to get more complex program you need to answer question, and depends on the answer you will set multiple action depending on it, the question we are answering here is " is the mouse has been pressed ? " using mousePressed function , this function return value of Boolean true if the mouse has been presed other wise it will return false

Example 1

in this example we will draw circle and if the muse pressed will change it to rectangle

void setup() { size(500,400); }

void draw() {
background(0); stroke(255); fill(128);

if (mousePressed)

rect(250,200,100,100); }


{ ellipse(250, 200, 100, 100);


Example 2

in this example we will draw circle and if the muse pressed will change its color
void setup()

{ size(500,400); }

void draw()

{ background(0);

if (mousePressed)

{ fill(0,255,0); }


{ fill(255,0,0); }

ellipse(mouseX,mouseY,60,60); }

Example 3

in this example we make the background in void setup which mean it only will be drawn one time , and then will draw circle and let it draw according to the mouse coordinate, and if the muse pressed will change clear the screan by drawing black background

void setup()

{ size(500,400); background(0); }

void draw()

{ if (mousePressed) { background(0); } ellipse(mouseX,mouseY,60,60); }

Example 4

in this example we make the background in void setup which mean it only will be drawn one time , and then if the muse pressed will draw circle and let it draw according to the mouse coordinate, else if not pressed it will clear the screen by drawing black background

void setup()

{ size(500,400); background(0);}

void draw()

{ if (mousePressed) { stroke(255); fill(128); ellipse(mouseX, mouseY, 30, 30); }else{ background(0); stroke(255); fill(128); ellipse(mouseX, mouseY, 30, 30); } }

Arduino + processing

the way we can make the tow program talking to each other is by using serial communication

Serial Comunication

serial communication is the process of sending data one bit at a time, sequentially, over a communication channel or computer bus. This is in contrast to parallel communication, where several bits are sent as a whole, on a link with several parallel channels.


for more information about serial comunication

Arduino + processing serial

the way we can make the tow program talking to each other is by using serial communication

Arduino Wiring

first lets wire our component

push button connected to —– Pin 2
pull down resistor 1K ohm connected to —– Pin 2 and GND LED anode connected to —– Pin 3 resistor 220 ohm connected to cathode of LED to and TO GND

Arduino Program

lets write simple Arduino program that write to serial when we press a button , and receive from the serial monitor to turn on and of the led

Compile and download the code

int led = 3;

int button =2 ;

void setup() {

pinMode(led, OUTPUT);

pinMode(button, INPUT);



void loop() {

if (Serial.available() > 0)


char ledstate =;

if ( ledstate == ‘1’)


digitalWrite(led, ledstate);


if (ledstate ==‘0’)


digitalWrite(led, LOW);

} }

int buttonState = digitalRead(button);

if ( buttonState == HIGH)


Serial.println(“Button is Pressed “);

} }

Explain Arduino Program

at the tob we have declared tow variable 1- led for pin number 3 in arduino and button for pin 2.

and we used this variable in void setup , and set pinmode for them, led as output , button as input .

then we opened a serial communication between arduino and our computer using the function serial.begin() , then set the bud rate to 9600 , which is the speed of the communication, you have to set a bud rate so the computer and Arduino can talk with the same speed

void loop 1

the void loop have tow part, first we are checking if there is anything writing in the serial port ? , if there is information in the serial then it will check what is there .

it will save the information that coming from the serial port and save it in variable called ledstate , this variable we declered it as char , char variable can save only one value in it , and since we we are sending just binary value of 1 or 0 this will be the good use for it

then it check if the value is " 1 " it will turn on the led if its " 0 " it will turn off the led

void loop 2

the next part is it read the value of the button in pin 2 , and save the value to buttonState variable , and if the value is HIGH whech mean the button has been pressed it will write " button is pressed " in serial port

Processing - import serial

not like the arduino program that the serial librariy is by defoult its imported , in processing if you want to use the serial comunication the first step you have to do is to import the library

Processing - import serial

now lets write a program in processing that interact with arduino

Explaining Processing program

the first line is the calling for the serial library in processing program

the second line is to create a serial object so we can call the serial function in the program to interact with is

the third line is a string variable that we will use it later to store the information that coming form the serial port

then we have the void setup ()

we declered the canvas saize of 500 X 500 , then for the serial object we set the com port that arduino is connected to in my case its COM16 " change it according to your setting " then set the bud rate to 9600 as we set it in the arduino so they can understand each other

Explaining Processing program
part 1

next lets create a function for the serial event that cheack the serial communication, and it save the information that is in the serial port using the function readStringUntil() and then put the until as ‘\n’ which means that it will read until there is a new line and save in the text variable

part 2

in void draw () the loop that run forever , there is the background color and we put the value of 0 its mean the background will be black then i set the Stroke and fill to chose the cooler of the writing i choose red (255,0,0)

then text function to show what is the information in the text variable and decide where to write in the screen.

last thing is Text”"; this is to clear the information in this variable to write new one .

part 3

this part will control turning the led on and off

by using the mousePressed() function to check if the button is pressed or not and if its the left or the right button

if its the left is pressed , it will drow a cricle and make it green and sent to serial the value " 1 "

and if its the Right is pressed , it will drow a cricle and make it Red and sent to serial the value " 0 "

last thing is to draw a white circle and make it follow the coordinate of the mouse

things in Action in Arduino
things in Action in Attiny45

i used an older board that i made during my electronic design

Download the code

final processing code

final Arduino code

example 1 processing