Interface and Application Programming

Processing

This week is a super exciting week, many of the examples shown in class seem like the work I get amazed at and did not know how it was computed! My goal is to try to understand the logic of as many environments and languages as is possible in the course of a few days. The first step that I took was to begin working with Processing, which you can download from the link, as it seemed relatively easy and as a few YouTube tutorials mentioned, it isn't the best script but it can do everything. I have never wrote with JavaScript before but it did seem extremely similar to C++ that I know, fairly, from Arduino IDE. Some key comparison between the two can be found here.
To begin working I wanted to understand the basics and the logic behind it and a classmate of mine referred me to a YouTube Channel called The Coding Train, where the videos are short and easy to keep up with. I watched a few videos from the beginner processing tutorials but then decided to begin working from online examples. #zeropatience

First example - Typical Bouncing Ball

The first example I decided to try out was the Bouncing Ball. A tutor from our lab, Josep Martí, gave us an easy example for how it is done and I began by trying it out.



float locationY = 450;
float speedY = 0;
float gravity = 0.2;

void setup() {
  size(1600,900);
}

void draw() {
  background(255,204,0);
  fill(0,204,255);
  noStroke();
  translate(800,locationY);
  ellipse(0,0,100,100);
  locationY += speedY;
  speedY += gravity;
  if ((locationY >= height)) {
    speedY = speedY * -0.75;
    locationY = height;
  }
}

While watching this example work I decided to try to add a little change to it where it looks like the ball is being dropped from wherever the cursor is to wherever the cursor moves to.

simple yet fascinating to me

Second Example - Text with a Button

I decided that for my assignment I would like to use text rather than moving objects and so I moved to learning how to add text on the screen. I began with the simple Words Reference from the processing website. Once it functioned well and I understood it I began making minor changes with the font size, color, and position. Then I wanted to add an interactive element, as the assignment needs an user interfacing program, and decided to add a button to begin with. The code I used was found on Starting Electronics Blog where the coder used a button that gives a response when the mouse is hovering over it and also collects data on how many times the button is pressed.

Attempts

First step was to to use the code linked above and change the output from a rectangle to the text that I made earlier.

Hovering over the button displays the message on the screen. Clicking on the button sends data back to Processing using println(clk++) that shows how many times the button has been clicked.

Since this part was functional I wanted to add another point where the button message changes once the mouse is hovering on top

Finally I changed the background text to only appear when the button is clicked rather than just hover. The actions now included hover to change button name, click to change background message, and number of times clicked printed in processing.

Final Thoughts

First things first, this is the coolest week.