Week14 Group Assignmnet - Compare Differenet Application Programming Tools

Processing

Processing is a beginer friendly software framework for making computer graphics image and animations. It uses Java as the programming language and comes with an IDE.

First released, it's probabily one of the earliest and most widely known creative programming frameworks and it inspired many other programs in the maker community including Arduino, p5.js, etc.

It provides a intutive graphics library with simple functions for drawing 2D shapes, image manipulation and animation. It also has 3D graphics capability.

Two of our weekly assignments(1, 2) were done in processing and it's used for building an interface for controling the microcontroller.

Showing the colored circles by clicking buttons on the microcontroller board

p5.js

p5.js is a JavaScript library for drawing graphics in the web browser, which can be simply described as "Processing in the web". It has similar feature set as Processing and with the same beginer friendlyness.

With the power of the web, it has a online code editor that also runs in the web brower which doesn't require any installation, and it makes the program and artwork easily shareable by destributing them through a web site. There are web sites such as <openprocessing.org> that hosts thousands of artworks created and shared by peoples around the world.

Below are some graphical programs we created using p5.js and embed in the web page.

Web and HTML5 canvas

The web is the main platform that runs on the Internet that we can all accecss with a web brower, and the functionality that a web browser should provide is stated in the web standards developed by the W3C organization. The web brower by itself, is a application for showing complex user interfaces, and the standards have added programming APIs such as HTML Canvas and WebGL to the browsers that makes them able to do complex graphical rendering works.

The APIs that the web provides are the "low level" APIs that the program needs to interface with to do the work, and they are the building blocks for the other higher level libraries such as p5.js.

Compared with p5.js, the browser APIs may be more verbose and not so convenient to use for the beginers, but it has full access to all the functionalities of the browser and can enable thing that are hard to achieve in libraries.

Below is an animation done with the HTML canvas and WebGL that shows a collection of the stars rotating relative to the Earth's position. The view can be adjusted and scaled using the sliders.

raylib