Interface & Application Programming

We learned about various platforms and resources in this session that may be valuable to us in designing programmes and creating interfaces. Here is a list of things we looked at:

  1. Processing is a tool that uses the Java programming language to generate user interfaces and arrange communication between multiple devices.
  2. P5.js is a JavaScript-based web-based tool for building user interfaces and creative coding.
  3. Blender is a tool that can accomplish "anything." offers an effective Python interface
  4. MIT App Inventor is a simple open source tool for developing phone applications.
  5. A Frame is an open source tool for developing virtual reality and augmented reality settings.
  6. Node Red is a flow-based development tool for visual programming that includes tools for manipulating dataflows graphically and modules for.

Assignment

Our assignment this week was to code an interface with the tools provided that would interface a user with an input and output device of choice. This assignment was very difficult for me personally because I kept stumbling upon errors, and even worse, errors whose answers I couldn't find on Google. Originally I laid out a series of LEDs and slider buttons that would interact with the screen, but this proved too difficult. I then attempted to do another interface that would change an RBG 4-pin LED to match whatever colour I would choose from an image on the screen. I attempted to do this on Particle IDE (as shown on the left) but after having spent some time on it, I realised I could only carry it out with a Particle Photon hardware.

Finally I settled for something more simple, being able to dim a simple LED on a breadboard through p5js. Even though it was simple, it was still very challenging. First, I had to code the interface on Arduino. It was a very simple code that would work to adjust the brightness of the bulb.


P5js

I then hopped on P5js for the next part. Before doing so, I had to download and connect p5 serial control in order to connect Arduino to p5js. My computer needs to get some data from an Arduino via USB and send the data to p5js. Javascript in a browser cannot intercat directly with a serial port, therefore the Processing Serial Library API solves this.



I then load up the p5js code, which basically worked on a gradient and it getting lighter and brighter as the mouse was dragged to the bottom.