Interface and Application Programming¶
WELCOME TO WEEK 14 ASSIGNMENT!
This week I learned how to transform data into a visual drawing, this process is used by artists, hobbiests, game designers and programmers. it is very satisfying because you get to visualize whatever you are coding instantly on the screen.
PROCESSING¶
Processing Foundation is a free software initially created to serve as a software sketchbook and to teach programming fundamentals within a visual context, Processing has also evolved into a development tool for professionals.
After you install the program, double click on Processing from the zipped file and press run.
using a very simple syntax to draw a 2D shape:
there are several ways to transform data we are either receiving from our input device, or data we are
Setting up P5 Library¶
If you wish to use Javascript language in your code, install the P5js
To download P5 library, open sketch > Import Library > Manage libraries > type P5 and press Install
I found this page to be very interesting! it has many code samples that is exciting to build on and use as art!
Processing coding Test¶
This code I created after checking several tutorials to make two simple shapes.
void setup() {
size(600,600);
background(204,255,153);
}
void draw() {
triangle(120, 300, 232, 80, 344, 300);
fill(255,102,178);
stroke(255,102,178);
circle(100,100,100);
fill(255,102,178);
stroke(255,102,178);
}
Arduino INPUT - Processing OUTPUT¶
Arduino Code was given to from my instructor Emma, I had a PCB created previously with a push button on D6 pin. I changed the pin number and added a INPUT_PULLUP.
int pin_sensor = D6;
void setup() {
// put your setup code here, to run once:
pinMode(pin_sensor, INPUT_PULLUP);
Serial.begin(9600);
}
void loop() {
// put your main code here, to run repeatedly:
Serial.println(digitalRead(pin_sensor));
delay(100);
}
Note: remember to always close the serial monitor before you run the process start with processing.
Processing code was given from my instructor Emma, I made few changes with color and I multiplied the variable*100 to have a bigger rectangle. in this code you can see the GUI (Graphical user interface) is very simple, it is a rectangle, I changed the colors to suit my themed color for this page. the position of the rectangle is also calculated in the code as you can see from the first paragraph that slide size is 600 * 600 therefore i placed my rectangle in the middle 300 * 300.
My application communicates with the MCU board through the variable side_size=incoming values. the value of the push button is either 0 or 1, when it’s 1, the variable calculates it into 100 and ake a rectangle with 100cm length.
import processing.serial.*;
Serial myPort; // The serial port
int side_size;
void setup () {
size(600, 600);
printArray(Serial.list()); // List all the available serial ports
String portName = Serial.list()[0]; // set the number of your serial port!
myPort = new Serial(this, portName, 9600);
}
void draw () {
background(204,255,153);
fill(255,102,178);
stroke(0,0,0);
noStroke();
rectMode(CENTER);
rect(300,300,100,side_size*100);
}
void serialEvent (Serial myPort) {
String inString = myPort.readStringUntil('\n'); // get the ASCII string
if (inString != null) { // if it's not empty
inString = trim(inString); // trim off any whitespace
int incomingValues = int(inString);
println(incomingValues); // print value to see
side_size = incomingValues;
}
}
Hero Shot¶
Another code I created is to float bubbles everytime i push a button, the arduino code was the following:
const int buttonPin = D6; // Pin number for the button
int buttonState = HIGH; // Current state of the button
int prevButtonState = HIGH; // Previous state of the button
int buttonCount = 0; // Counter for button presses
void setup() {
pinMode(buttonPin, INPUT_PULLUP);
Serial.begin(9600); // Initialize the serial communication
}
void loop() {
buttonState = digitalRead(buttonPin); // Read the state of the button
// Check if the button state has changed (button is pressed)
if (buttonState != prevButtonState && buttonState == LOW) {
buttonCount++; // Increment the button count
Serial.println(buttonCount); // Send the count to Processing
}
prevButtonState = buttonState; // Update the previous button state
delay(10); // Add a small delay to debounce the button
}
For processing, i closed the serial monitor (very important step before starting with processing)
The bubbles were increasing in number everytime i pressed the button. the Code i used is:
import processing.serial.*;
Serial arduino;
int buttonCount = 0; // Variable to store the button count
void setup() {
size(400, 400);
arduino = new Serial(this, Serial.list()[0], 9600); // Connect to Arduino
arduino.bufferUntil('\n'); // Set a newline character as the end of the message
}
void draw() {
// Empty the serial buffer and get the latest count from Arduino
while (arduino.available() > 0) {
String data = arduino.readStringUntil('\n');
if (data != null) {
data = trim(data);
buttonCount = int(data);
}
}
background(255);
fill(0);
text("Button Count: " + buttonCount, 20, 20);
// Draw a bubble for each button press
for (int i = 0; i < buttonCount; i++) {
float x = random(width);
float y = random(height);
float radius = random(10, 50);
noStroke();
fill(random(255), random(255), random(255), 100);
ellipse(x, y, radius, radius);
}
}
Group Assignment¶
Processing: Processing is both a software sketchbook and a programming language designed for creating interactive media, such as visual arts, audio, video, and multimedia applications. It offers an intuitive interface, an integrated development environment (IDE), and a collection of libraries that simplify coding. Artists, designers, and programmers can unleash their creativity and explore new possibilities in the digital realm using Processing. It is an open-source project that supports cross-platform compatibility, fosters community collaboration, and encourages innovation.
MIT App Inventor: MIT App Inventor is a cloud-based tool that enables the creation of Android mobile apps without prior programming experience. Its drag-and-drop visual interface empowers users to assemble pre-built components, including buttons, text boxes, and images, to build interactive apps effortlessly. Additionally, MIT App Inventor offers a block-based programming language, allowing users to define app behavior using intuitive visual blocks. The platform provides comprehensive tutorials, documentation, and sample apps to support beginners and allows testing on real devices through a companion app. Overall, MIT App Inventor empowers users to transform their app ideas into reality with ease.
Jupyter: Jupyter is an open-source web application that facilitates the creation and sharing of documents containing live code, equations, visualizations, and explanatory text. It is extensively utilized in scientific computing, data science, and machine learning for interactive data analysis and visualization. Jupyter notebooks enable users to combine code, text, and multimedia content within a single document that can be easily shared. Supporting multiple programming languages, including Python, R, Julia, and more, Jupyter notebooks have gained popularity among researchers, educators, and data scientists as a versatile tool.
Bubble: Bubble is a visual programming platform that empowers users to develop web and mobile applications without the need for traditional coding. Its drag-and-drop interface facilitates the creation of user interfaces and the definition of app functionalities. Bubble offers a wide range of customization options, including responsive layouts, animations, and integrations with third-party services. Additionally, it provides hosting services and scalable infrastructure to launch and operate apps in the cloud. With Bubble, users can build sophisticated applications capable of processing transactions, sending emails, storing and displaying data, and more, all without writing a single line of code.
After researching and learning about Processing, MIT App Inventor, Jupyter, and Bubble, I found Processing to be the most interesting and relevant tool for my needs. Therefore, I have decided to focus on learning and working with Processing.
Refrences¶
best refrences for learning Processing are: processing.org Coding Trail