forwards / backwards :

This week we were asked to make an interface to control an input / output.

Seeing as it was Thanksgiving break and last week was quite long w machine building, I decided to take a break. I didn't get started on the assignment until Sunday evening. I hope I will have enough time to complete it.

I had some prior knowledge about Processing, so I wanted to give that a shot. I also looked at previous students' pages, and found someone who linked to this TUTORIAL.

installing library :

I downloaded Processing (I thought I had previously installed it, but I guess I deinstalled it after not using it for a while). In order to communicate with Arduino you have to add / install a library called ControlP5.

basic window :

It took very little code to make a small window.

Here the window is purple w green text. Next steps are to add buttons that communicate to my fabduino I created in WEEK 10.

import controlP5.*; // import ControlP5 library ControlP5 cp5; // create controlp5 object void setup(){ // same as arduino program size (400, 400); // window size (width x height) } void draw () { // same as loop in arduino background (150, 0, 150) ; // background color of window (r, g, b) or (0 to 255) //window title fill (0, 255, 0); // text color (r, g, b) text("⬤ CONVEYOR BELT", 135, 200); // ("text", x coordinate, y coordinate) }

basic (ugly) buttons :

Here are the buttons. The tutorial showed how you could change the font (initial detault font was v pixelated). I really don't love this color palette, so I am going to look into how to change the button color scheme...

import controlP5.*; // import ControlP5 library ControlP5 cp5; // create controlp5 object PFont font; void setup(){ // same as arduino program size (400, 400); // window size (width x height) //adding buttons cp5 = new ControlP5(this); font = createFont("helvetica", 13); //custom font and title cp5.addButton("forwards") .setPosition(150,50) .setSize (100, 100) .setFont(font) ; cp5.addButton("backwards") .setPosition(150,250) .setSize (100, 100) .setFont(font) ; } void draw () { // same as loop in arduino background (150, 0, 150) ; // background color of window (r, g, b) or (0 to 255) //window title fill (0, 255, 0); // text color (r, g, b) text("⬤ CONVEYOR BELT", 135, 200); // ("text", x coordinate, y coordinate) }

The next steps in the tutorial linked above, begin to connect the buttons to arduino via serial. Because I am home for break, i don't currently have my board and I think I can just adjust the code I wrote a couple of weeks ago. So - I think I am going to try to make this interface a bit nice - more related to the belt. I kind of want to make a fun drawing that responds to the forwards / backwards button pressing.

adjusting window :

ok - started to adjust colors now. i'd love to have a moving conveyor belt that immitates my original drawing / diagram :

installing library :

So - I'm guessing I just need to add some lines that are static or move forwards or backwards... and I wonder if a set of objects (really just different shapes) can move according to what button is pushed...

well actually, i googled to see if there was easy code to make radiating lines, and found code to make a sun:

sun rayssss:

code here :

// GLOBAL VARIABLES final int SUN_DIAMETER = 150; final int NUMBER_OF_RAYS = 25; float angle = TWO_PI/NUMBER_OF_RAYS; float RING_OF_LINES = SUN_DIAMETER*.5 + 30; // SETUP void setup() { size(600, 400); } //DRAW void draw() { background(51); translate(width/2, height/2); noFill(); stroke(255); ellipse(0, 0, SUN_DIAMETER, SUN_DIAMETER); for (int i = 0; i < NUMBER_OF_RAYS; i++) { pushMatrix(); rotate(angle +i*TWO_PI/NUMBER_OF_RAYS ); line(RING_OF_LINES, 0, RING_OF_LINES+40, 0); popMatrix(); } angle += .001; }

and by adjusting the code just a bit, i was able to get the rough sketch I was looking for :

conveyor belt:

code here :

// GLOBAL VARIABLES final int SUN_DIAMETER = 510; final int NUMBER_OF_RAYS = 70; float angle = TWO_PI/NUMBER_OF_RAYS; float RING_OF_LINES = SUN_DIAMETER*.5;// + 30; // SETUP void setup() { size(800, 800); } //DRAW void draw() { background(51); translate(width/2, height/2); noFill(); stroke(255); ellipse(0, 0, SUN_DIAMETER+190, SUN_DIAMETER+190); ellipse(0, 0, SUN_DIAMETER+180, SUN_DIAMETER+180); ellipse(0, 0, SUN_DIAMETER, SUN_DIAMETER); ellipse(0, 0, SUN_DIAMETER-10, SUN_DIAMETER-10); for (int i = 0; i < NUMBER_OF_RAYS; i++) { pushMatrix(); rotate(angle +i*TWO_PI/NUMBER_OF_RAYS ); line(RING_OF_LINES, 0, RING_OF_LINES+90, 0); popMatrix(); } angle += .001; }

but i kind of want to make it so that the belt moves in one direction if you press the buton and moves in the other direction if you press the other button... I also want to add some objects that are "moving" on the belt....

combined sketches:

well, for now, i was able to combine the conveyor belt graphic w the buttons. the code is getting a lil messy :

// GLOBAL VARIABLES final int SUN_DIAMETER = 510; final int NUMBER_OF_RAYS = 120; float angle = TWO_PI/NUMBER_OF_RAYS; float RING_OF_LINES = SUN_DIAMETER*.5;// + 30; import controlP5.* ; // import ControlP5 library ControlP5 cp5 ; // create controlp5 object PFont font ; void setup(){ // same as arduino program size (800, 800) ; // window size (width x height) //adding buttons cp5 = new ControlP5(this); font = createFont("helvetica", 13); //custom font and title cp5.addButton("forwards") .setPosition(350,300) .setSize (100, 100) .setFont(font) .setColorForeground(color(196, 167, 167)) .setColorActive(color(181, 167, 193)) .setColorBackground(color(196, 167, 167)) ; cp5.addButton("backwards") .setPosition(350, 400) .setSize (100, 100) .setFont(font) .setColorForeground(color(196, 167, 167)) .setColorActive(color(181, 167, 193)) .setColorBackground(color(196, 167, 167)) ; } void draw () { // same as loop in arduino background (196, 167, 167) ; // background color of window (r, g, b) or (0 to 255) //translate(width/2, height/2); //noFill(); stroke(190); fill (255, 255, 255); ellipse(400, 400, SUN_DIAMETER+190, SUN_DIAMETER+190); fill (255, 255, 255); ellipse(400, 400, SUN_DIAMETER+180, SUN_DIAMETER+180); ellipse(400, 400, SUN_DIAMETER, SUN_DIAMETER); fill (196, 167, 167); ellipse(400, 400, SUN_DIAMETER-10, SUN_DIAMETER-10); for (int i = 0; i < NUMBER_OF_RAYS; i++) { pushMatrix(); translate(width/2, height/2); rotate(angle +i*TWO_PI/NUMBER_OF_RAYS ); line(RING_OF_LINES, 0, RING_OF_LINES+90, 0); popMatrix(); } angle += .001; // moves belt forwards //angle -= .001; // moves belt backwards //angle += .001; // does not move belt //window title fill (190, 190, 190); // text color (r, g, b) textFont(font); //text("⬤ CONVEYOR BELT", 320, 400); // ("text", x coordinate, y coordinate) }

i tried making a moving object occur, but was getting pretty tripped up... i will try again, but i think i mostly definitely want to make the belt turn forwards when the corresponding button is pressed and same w backwards.

back / forth buttons working sort of :

ok - this is somewhat working, but i don't want the belt to move in any direction unless the button is actively PRESSED.

code here (v messy):

// GLOBAL VARIABLES final int SUN_DIAMETER = 510; final int NUMBER_OF_RAYS = 120; float angle = TWO_PI/NUMBER_OF_RAYS; float RING_OF_LINES = SUN_DIAMETER*.5;// + 30; boolean forwards00 = false; boolean backwards00 = false; import processing.serial.*; Serial port; import controlP5.* ; // import ControlP5 library ControlP5 cp5 ; // create controlp5 object PFont font ; controlP5.Button forwards; controlP5.Button backwards; void setup(){ size (800, 800) ; // window size (width x height) //printArray(Serial.list()); // port = new Serial(this, "SOC", 9600); //adding buttons cp5 = new ControlP5(this); font = createFont("helvetica", 13); //custom font and title forwards = cp5.addButton("forwards") //"forwards" is the name of button .setPosition(350,300) // x and y coordinates of upper left corner .setSize (100, 100) // width height .setFont(font) .setValue(0) .activateBy(ControlP5.PRESS) //.setColorValue(color(0, 0, 0)) .setColorForeground(color(196, 167, 167)) // button color when scroll over .setColorActive(color(181, 167, 193)) // button when pushed .setColorBackground(color(196, 167, 167)) //.setColorBackground(color(190, 190, 190)) //button color without touching ; backwards = cp5.addButton("backwards") //"forwards" is the name of button .setPosition(350, 400) // x and y coordinates of upper left corner .setSize (100, 100) // width height .setFont(font) .setColorForeground(color(196, 167, 167)) // button color when scroll over .setColorActive(color(181, 167, 193)) // button when pushed .setColorBackground(color(196, 167, 167)) //button color without touching ; } void draw () { // same as loop in arduino background (196, 167, 167) ; // background color of window (r, g, b) or (0 to 255) //translate(width/2, height/2); //noFill(); stroke(190); noStroke(); fill (255, 255, 255); ellipse(400, 400, SUN_DIAMETER+190, SUN_DIAMETER+190); stroke(190); fill (255, 255, 255); ellipse(400, 400, SUN_DIAMETER+180, SUN_DIAMETER+180); ellipse(400, 400, SUN_DIAMETER, SUN_DIAMETER); fill (196, 167, 167); noStroke(); ellipse(400, 400, SUN_DIAMETER-10, SUN_DIAMETER-10); stroke(190); if(forwards00){ for (int i = 0; i < NUMBER_OF_RAYS; i++) { pushMatrix(); translate(width/2, height/2); rotate(angle +i*TWO_PI/NUMBER_OF_RAYS ); line(RING_OF_LINES, 0, RING_OF_LINES+90, 0); popMatrix(); } angle += .001; // moves belt forwards //angle -= .001; // moves belt backwards //angle += .001; // does not move belt } else if (backwards00){ for (int i = 0; i < NUMBER_OF_RAYS; i++) { pushMatrix(); translate(width/2, height/2); rotate(angle +i*TWO_PI/NUMBER_OF_RAYS ); line(RING_OF_LINES, 0, RING_OF_LINES+90, 0); popMatrix(); } //angle += .001; // moves belt forwards angle -= .001; // moves belt backwards //angle += .001; // does not move belt } else{ for (int i = 0; i < NUMBER_OF_RAYS; i++) { pushMatrix(); translate(width/2, height/2); rotate(angle +i*TWO_PI/NUMBER_OF_RAYS ); line(RING_OF_LINES, 0, RING_OF_LINES+90, 0); popMatrix(); } //angle += .001; // moves belt forwards //angle -= .001; // moves belt backwards angle = .001; // does not move belt } //window title fill (190, 190, 190); // text color (r, g, b) textFont(font); text("⬤ CONVEYOR BELT CONTROLLER", 280, 30); // ("text", x coordinate, y coordinate) } //add functions to buttons void forwards(){ //port.write('f'); forwards00 = true; backwards00 = false; } void backwards(){ //port.write('b'); backwards00 = true; forwards00 = false; } }

back / forth buttons working more (still sort of) :

ok - this is somewhat working,but if i press elsewhere the conveyor belt still moves... bc i'm using mousePressed vs some function that can tell whether the button is or is not being pressed. i can't seem to figure that out.

code here (still v messy):

// GLOBAL VARIABLES final int SUN_DIAMETER = 510; final int NUMBER_OF_RAYS = 120; float angle = TWO_PI/NUMBER_OF_RAYS; float RING_OF_LINES = SUN_DIAMETER*.5;// + 30; boolean forwards00 = false; boolean backwards00 = false; import processing.serial.*; Serial port; import controlP5.* ; // import ControlP5 library ControlP5 cp5 ; // create controlp5 object PFont font ; controlP5.Button forwards; controlP5.Button backwards; void setup(){ size (800, 800) ; //printArray(Serial.list()); // port = new Serial(this, "SOC", 9600); //adding buttons cp5 = new ControlP5(this); font = createFont("helvetica", 13); forwards = cp5.addButton("forwards") .setPosition(350,250) .setSize (100, 100) .setFont(font) .setValue(0) .activateBy(ControlP5.PRESS) //.setColorValue(color(0, 0, 0)) .setColorForeground(color(196, 167, 167)) .setColorActive(color(181, 167, 193)) .setColorBackground(color(196, 167, 167)) //.setColorBackground(color(190, 190, 190)) ; backwards = cp5.addButton("backwards") .setPosition(350, 450) .setSize (100, 100) .setFont(font) .setValue(0) .activateBy(ControlP5.PRESS) .setColorForeground(color(196, 167, 167)) .setColorActive(color(181, 167, 193)) .setColorBackground(color(196, 167, 167)) ; } void draw () { // same as loop in arduino background (196, 167, 167) ; // background color of window (r, g, b) or (0 to 255) //translate(width/2, height/2); //noFill(); stroke(190); noStroke(); fill (255, 255, 255); ellipse(400, 400, SUN_DIAMETER+190, SUN_DIAMETER+190); stroke(190); fill (255, 255, 255); ellipse(400, 400, SUN_DIAMETER+180, SUN_DIAMETER+180); ellipse(400, 400, SUN_DIAMETER, SUN_DIAMETER); fill (196, 167, 167); noStroke(); ellipse(400, 400, SUN_DIAMETER-10, SUN_DIAMETER-10); stroke(190); if(forwards00 && mousePressed){ for (int i = 0; i < NUMBER_OF_RAYS; i++) { pushMatrix(); translate(width/2, height/2); rotate(angle +i*TWO_PI/NUMBER_OF_RAYS ); line(RING_OF_LINES, 0, RING_OF_LINES+90, 0); popMatrix(); } angle += .001; // moves belt forwards } else if (backwards00 && mousePressed){ for (int i = 0; i < NUMBER_OF_RAYS; i++) { pushMatrix(); translate(width/2, height/2); rotate(angle +i*TWO_PI/NUMBER_OF_RAYS ); line(RING_OF_LINES, 0, RING_OF_LINES+90, 0); popMatrix(); } angle -= .001; // moves belt backwards } else{ for (int i = 0; i < NUMBER_OF_RAYS; i++) { pushMatrix(); translate(width/2, height/2); rotate(angle +i*TWO_PI/NUMBER_OF_RAYS ); line(RING_OF_LINES, 0, RING_OF_LINES+90, 0); popMatrix(); } } //window title fill (190, 190, 190); // text color (r, g, b) textFont(font); //text("⬤ CONVEYOR BELT CONTROLLER", 280, 30); // ("text", x coordinate, y coordinate) } //add functions to buttons void forwards(){ //port.write('f'); forwards00 = true; backwards00 = false; } void backwards(){ //port.write('b'); backwards00 = true; forwards00 = false; }

Unfortunately my flight home was delayed and the next flight out to Boston was a DAY later... which means I will get home vvvvvv early Wednesday morning... I was hoping to have all of Tuesday to work with my board, which I left at school. So, it's likely I wont be able to get this working, but I'm happy that the interface will cause the animation to do what the conveyor belt will hopefully be doing..!