processing interaction with a pic
Posted: Fri Jul 06, 2012 9:31 pm
So owning an arduino as well as pics, i've came across lots of referances to a program called processing, so what is it and what does it do, in simple terms it adds interaction betwix your program and your pc, and as the arduino code is almost identical to processing they integrate seamlessly, so i wanted to find out if it would work with a pic and an arduino that had been programmed in flowcode, before i begin im not an expert merely a medling monkey,and have only been playing with the software for a few days, and have managed to send and recieve data to a pic, now as processing and serial comms on a pic are new to me what follows will be rough n ready, but if i can do it anyone can, if you want to carry on ,then read on, if you want me to carry on ask as theres little point in typing lots of stuff if theres no interest.
Requirements
Processing http://processing.org/
Download and unzip, start the program and we can begin, Lets make a dead simple program and slowly add to it, as ive already said im a novice, so the code will be at beginer level. type the following in the code window and click the arrow icon to run ,
so what happened , we used void setup(){ } to create an area for all our setup data
the instruction Size(600,600) creates a window with those dimentions, have a play change the sizes, there your first bit of processing code not very inspiring i know but it works.
So lets start changing a few bits and adding some more
now we added the background() if you add a number betwix 1 and 255 in the () part you will get a grey scale background, but you will notice ive added (21,45,120) which is an rgb value to give us blue, you can also add the hex representation of the colour, so now put the value (#BB2AD) and we get a purple ,in the tools section of the software theres a colour selector use it and you can choose your own colours
Right lets add a few more bits, im jumping ahead a bit here but it will make everything later easier, add the lines below to your code above,run it you will notice when you move your mouse the coordinates will appear in the bottom of the processing window, but notice it only works in the window ,if you move it out of the bounds of the window it doesnt work, we added the draw function all your graphic changes will go in there, we also used println this simply means print at the bottom of the processing window, and the mousex and mousey get the coordinates try it
now we will add a few more lines in the setup area and add a plain old box , we will add fill() and rect(),
lets look at rect first you define the start and end points move the mouse to each corner of the top box and you will see how you need to set it up again playwith it(i cheated i simply moved the mouse to where i wanted my box to start and noted the numbers and the same for the oppsite end, try it, next the fill() again its for a colour either greyscale, rgb,hex , ok so i added two boxes of the same colour, you can also add transparency to a colour by addin another number, so find the line fill(13,200,10,); and add another comma and a value on the end try fill(13,200,10,4); run it again see what happened the bottom box changed colour. your code should now look like below .
Well see tthat bottom box it annoying me as its not square so change the bottom rectangle to a sqaure, see below if you get stuck, then change it back to its original size
now we can start adding interaction we will add a mouse press and change the colour of the lower box add the code bellow after the println(mouseY);
Run again and press the mouse button, now were getting somewhere as with tiding up this can control say a light etc, change the mousepressed so you get a differen colour for each button (hint use the help files)
I will add a few more posts as ive got time
Regards
Dazz
Requirements
Processing http://processing.org/
Download and unzip, start the program and we can begin, Lets make a dead simple program and slowly add to it, as ive already said im a novice, so the code will be at beginer level. type the following in the code window and click the arrow icon to run ,
Code: Select all
void setup(){
size (600,600);
}the instruction Size(600,600) creates a window with those dimentions, have a play change the sizes, there your first bit of processing code not very inspiring i know but it works.
So lets start changing a few bits and adding some more
Code: Select all
void setup(){
size(600,600);
background (21,45,120);
}Right lets add a few more bits, im jumping ahead a bit here but it will make everything later easier, add the lines below to your code above,run it you will notice when you move your mouse the coordinates will appear in the bottom of the processing window, but notice it only works in the window ,if you move it out of the bounds of the window it doesnt work, we added the draw function all your graphic changes will go in there, we also used println this simply means print at the bottom of the processing window, and the mousex and mousey get the coordinates try it
Code: Select all
void draw(){
{
println(mouseX);
println(mouseY);
}
}now we will add a few more lines in the setup area and add a plain old box , we will add fill() and rect(),
lets look at rect first you define the start and end points move the mouse to each corner of the top box and you will see how you need to set it up again playwith it(i cheated i simply moved the mouse to where i wanted my box to start and noted the numbers and the same for the oppsite end, try it, next the fill() again its for a colour either greyscale, rgb,hex , ok so i added two boxes of the same colour, you can also add transparency to a colour by addin another number, so find the line fill(13,200,10,); and add another comma and a value on the end try fill(13,200,10,4); run it again see what happened the bottom box changed colour. your code should now look like below .
Code: Select all
void setup(){
size(600,600);
background (21,45,120);
fill(13,255,10);
rect(13,577,10,76);
fill(13,200,10,);
rect(13,30,500,76);
} Code: Select all
void draw(){
{
println(mouseX);
println(mouseY);
}
}Code: Select all
background (21,45,120);
fill(13,255,10,125);
rect(13,570,33,590);// made the box a square
fill(13,255,10);
rect(13,30,500,76); // added an alpha value 76 play with this and seeCode: Select all
if (mousePressed == true) {
fill(200,175,10);
rect(13,570,33,590); // if mouse button pressed change colour and size of box
I will add a few more posts as ive got time
Regards
Dazz
.