Uncategorized

     In this blog, I will document some project proposals for the final! All of these ideas would include mutual interactions with ‘Processing’ & ‘Arduino’! Below, I will go into a deeper analysis of each of them and explain its core message. Since my partner for the final is Calvin Lin, some ideas will overlap as we’ve already discussed these together. Though, it’s still informative and intuitive to hear from both sides’ perspectives and opinions. 

Proposal 1- Jenga Edition: Truth or Dare 

     From children, to teenagers, and even adults, everyone is most familiar with the popular game ‘Jenga’. In this game, players take turns removing one wood block at a time from a built tower. Each block removed is then placed on top of the tower, creating a progressively more unstable structure. The goal of the game is to not tip the tower over, which the last person leading it to do so loses. 

     After discussing with me and my partner, we developed a creative idea (unique twist) to add more layers to the game itself. Instead of simply avoiding the tower falling, we added another popular party game called ‘Truth or Dare’ into this. Here, players are given the choice between either answering a question truthfully or performing an act. With these two elements, this game would now be interactive and extremely nerve-wracking. 

     We envisioned that each of the wood bricks (potentially made out of laser cutting) would have a scannable chip or QR code. By scanning this with their devices, a certain screen would display a card. Clicking the screen again would randomly generate a number between a certain value (potentially 0-50). Using this, the user would enter the number on Arduino’s serial monitor, resulting in a random selection of a ‘truth’ or ‘dare’. 

     Then, the Processing should also follow this response, showing either a ‘Truth’ or ‘Dare’ prompt on the screen. Then, a timer would automatically pop up, indicating the number of time users has to complete the task. If the prompt is ‘truth’, the user would have to say the truth in under 30 seconds. If the prompt is a dare, the user would have around a minute to complete it. If this fails to happen, the timer would ‘stop’ and create a losing sound through a buzzer (Arduino’s side). To make it more extreme, we could potentially link the blocks to servo motors, that push the blocks themselves. If the users can control their strength somehow, this would add another layer of challenge.

     Overall, we are trying to accomplish a new playstyle of Jenga. Jenga can be too monochromatic, with the sole objective being to not tilt the tower over. However, with so many other drastic factors to constantly worry about, the difficulty of the game gets significantly broadened. Our main audience would be mostly teenagers and adults, as they typically enjoy these types of party/challenging interactive games. By implementing all these factors, we hope to create a more competitive environment for Jenga. 

                         

Drawing/Sketch: 

Proposal 2 – Protective Cube 

     Discussing this idea, me and my partner first asked ourselves how to create a form of ‘interactive cybersecurity’. Then, we created this idea of a safe-like box that enclosed classified information. To the owner of this device, solving each question would be time-consuming, but undoubtedly easy. After all, they would use extremely personal information that usually other people would not so easily have access to. This idea is similar to a virtual bank account verification, where a set of security questions is asked to proceed. 

     However, this interaction device would be more complicated. The cube-box would contain several locks that cannot be opened via key or physical item. Instead, it has to be through a number that only the owner would recognize. Now, you may ask, “How would we ever complete this task?”. To combat this, we envisioned using Arduino the protector, that locks the cube. To slowly open each of the locks, users would have to answer security questions in Processing. After each one, they would input these numbers into Arduino again, and proceed to open a lock. In the end, after all of the locks are solved, the box should open! The Processing screen should display this, similar to the ‘game-winning’ screen. 

     To add more factors to this, we could add different activities to spice this up. In conclusion, this protective cube serves as a ‘top-secret’ information protector. We are trying to accomplish an interactive yet difficult device to mock a setting of a ‘seemingly’ unbeatable safe. Though, we would obviously give different hints in Processing and relevant questions to encourage the users to complete the cube. We are catering this device to people who have classified information they wouldn’t want to ever be found out. For example, Mr. Krabs would use this to hide his Krabby Patty formula. This allows for the elements of cyber-security (Processing questions) and security (locks in cube) to combine together. By successfully recreating this, we hope to discover a new sense of security. 

   

Drawing/Sketch: 

Proposal 3 — The Magician’s Hand

     The interesting proposal is thought of by myself, as I wanted to think of something creative that is not normally envisioned. Here, I pictured an interactive device (preferably a glove) that can draw and create shapes when pointed at a screen. The name is referenced as it would look magical and something that only can be done through an optical illustration.

     To do this, I would think of creating a device similar to the one in the ‘Workout Recitation’. When a limb is moved, it would activate sensors that correspond to Arduino’s serial monitor. To add it to a new element that we haven’t done yet, would create an effect on Processing itself. Therefore, Arduino would talk to Processing about this idea. The device would communicate with Arduino — the Arduino would talk with Processing — and finally, Processing would send out a visual form of communication. 

    By doing this, I want to create a visual art opportunity while making it simultaneously interactive. By changing certain elements, the user should also be able to choose the color, shape, form, and weight of the design. This might be able to be done using different hand gestures, similar to the ones on Apple devices. It would essentially become a virtual pencil (with your fingerprint) that correlated with a user’s every move. At the beginning of the semester, there was a device that allowed disabled people to draw using tracked eye movements. Here, I will link a Youtube Video that shows this brilliance in a similar effect. Instead of the eyes, we would use fingers to create the same effect. 

     In conclusion, this would add a unique twist to the device as it’s hard to recreate. The project is trying to allow people to accomplish a form of communication without needing to use any sort of tools (pencils, pens, crayons, etc). For disabled people, this might be helpful if they want to use their hands to quickly communicate! In fact, successfully coordinating this could allow this device to not only be incorporated into hands, but also potentially expand to other body parts. While this would be extremely difficult to accomplish, it might be worth a try! 

Sketch/Diagram: 

Preparatory Research & Analysis

     After reading “Art, Interaction and Engagement” by Ernest Edmonds, my definition of how interaction should truly behave was elevated. Throughout the article, the author continuously addresses his concerns about ‘the nature of interaction itself’ (16, Edmonds). He walks us through examples, explaining his personal insights and opinions regarding their interactive state. Some of these works discussed were the Shaping Form, Cities Tango, JigSaw, etc (Edmonds). Personally, I think that the Cities Tango appealed the most to me. Furthermore, it seems to fit the interaction criteria with little to no flaws. Edmonds exclaimed, “The work is ‘attracting’ in the sense that a dynamic
display including images from afar is shown. It is ‘sustaining’ in part by nature of the revealing of the real-time images that often include pictures of participants in the other city”. Overall, this article was very informative and opened my eyes to a new definition of interaction. 

     Thinking about potential interactive ideas, I went back to our old document with resources to help me. Also, I used http://creativeapplications.net to help me find creative and interactive projects. The first example I want to discuss is The March by Aleksiej Cecocho. Here, “Every “channel” speaks to us in an incomprehensible bubble framed in a completely random, derivative, and abstract language of visual communication” (Cecocho). There are four screens in the presentation, with each displaying bubbles depending on the location where the user stands. For me, this is a successful interaction as the machine listens to the user, thinks, & then responds.

     Though, this is basic definition. Using what Edmonds stated, this work is attracting, sustaining, & also relating. The theme of this project is a study of the relative presentation of events by the media that forms post-truth (Cecocho). Therefore, it talks about a deep message while also attracting the viewer’s eyes. As this project was created using Processing, I think that this will inform my work. If possible, I would incorporate a multi-screen interaction as well. Also, I think that this aspect is successful as the interaction could be directly reflected on the screen. In a sense, this is the art that reflects a personal message. To me, this is successful as the author gets through his point, using a form of interaction. Here is his personal website: http://aleksiejcecocho.pl/projects/march/

     The second idea came from the source https://www.manamana.net/, a predominately Chinese website filled with interaction designs and project creations. During it, I managed to find something that personally appealed to me. In this video, the interaction is between the user & the screen. It is called ‘Touch Designer‘. There are different programs shown, such as a music-listening platform, & several other visual art platforms. Depending on the user’s hand motions, the device is able to respond (think) and carry out (answer) the action. This inspires me as it is very futuristic, and a possible future-reality thing that we could have. 

     Also, I think that the interaction here is fantastic. It fits Edmonds criteria again as it’s all attracting, sustaining, & also relating. It’s directly correlated with our current technology, ensuring its sustainability and relatedness. By developing this more, it might be possible in the near future for everyone. Also, it’s extremely interactive and attractive to fidget with. Personally, I would like to explore elements of this project in my final. I believe that perhaps I could use Arduino to hook wires to the user (as in Workout Recitation), then reflect that ‘motion’ onto the screen. This could involve their entire body, arms, or just hands as used in this video. Overall, I think that these two examples exemplify what successful interaction is, & how they could potentially connect to my final project.

     Lastly, my previous definition of a successful interaction project experience was simply people/machines listening — then thinking, & responding in some form/shape. This was concluded after using articles by Crawford, Manovich, & Igoe. Broadly speaking, it is interaction. However, my perception has slightly changed after reading Edmonds’ article. For me, successful interaction is a project that is attracting, sustaining, & relating in terms of experience, but isn’t mandatory facilitated and can communicate using its own response system in an effective amount of time (Edmonds). I think that an interactive project should have sustainability, meaning that the experience can change over time. Also, it should have traits that create long-term engagement, Edmonds notes, “The sustaining’ element of these works is not intended to come through interaction al all, but relies on their intrinsic aesthetic interests.” To me, the project’s long-term engagement should come from a mix of interaction and aesthetics, and not solely the former. Also, it should not have people constantly facilitating. If the interaction cannot run independently without an instructor constantly managing it, the sense of interaction decreases. Only by accomplishing all these factors, will a successful interactive project be created!

     In this recitation, I successfully combined Arduino and Processing together! In the last recitation, I look forward to combining these two elements together. During this recitation, I used a NeoPixel Led strip to create light animations for one of my favorite music pieces! Below, I will explain the process that it took, including any difficulties and hardships faced. Now, let’s ‘slowly dance in the dark’!

Materials:

• 1 * Arduino Uno
• 1 * USB A to B cable
• 3 * jumper cables M/M
• 1 *  NeoPixel strip (WS2812B – Individually Addressable LEDs)

Task #1: Test the NeoPixel

      First, I had to connect the NeoPixel strip itself, to the Arduino. This felt kind of nostalgic as I haven’t used Arduino in a long time. Following the schematic diagram, I plugged in a green M/M wire to pin 3. Following that, I plugged in a red M/M wire to the 5V and a black M/M wire to GND. Soon, my circuit would be complete! 

                   

     Now, I had to download libraries so that the code could work efficiently. So, I downloaded “FastLed” library by Daniel Garcia. To ensure the NeoPixel would work properly, I tested it to run. It did ~ I got a blinking flashing red light, which signified the Arduino code working! Below is a quick representation of how the NeoPixel light is currently supposed to look. 

                                       

                        

Task #2: Using Computer to Light Up NeoPixels

     In this task, the objective is pretty straightforward again. I followed each instruction in chronological order, & was able to finish this task quickly. First, I downloaded the SerialRecord library contributed by Oliver Steele. This library allowed me to send and receive multiple-values records on the serial port. After this, I used the code that combined both the FastLed and SerialRecord libraries together. To test this code, we had to put in 4 values on the serial monitor in Arduino. The 4 values stand as stated in recitation, ” . . . the first parameter will indicate the pixel number, the second the content of red color, then green, and last blue” (Interaction Lab). Hence, the numbers should look like (x, r, g, b). By putting in different numbers, it will mix the shades of RBG’s together to create different colors. Below, are some variations and colors that I tweaked! 

     

    Now, we’ve successfully set up Arduino. Therefore, let’s move on to interaction on screen (Processing)! Using another code provided here, I programmed the Processing sketch. At first, it didn’t work at first. However, I figured that this was due to my serial monitor in Arduino not being closed. Not that the port wasn’t busy anymore, I could have both codes running! Essentially, Processing told Arduino how to run, then Arduino listen to this information & interacted using the NeoPixel lights. Below, I have an example of how it looked now! It was extremely interesting viewing the two programs going hand-in-hand together. 

                       

     After a little tinkering and playing around, I could interact with any corresponding light depending on the direction in that I point my mouse. This is possible due to the following code:

if (mousePressed == true) {
int n = floor(constrain(mouseX/W , 0, NUM-1));

As I press my mouse in a certain area, the color should correspond, given support with the other functions in the code. 

                   

Task #3: Add Music!

     Finally, the last but most challenging task was the add music! This was not an easy part to do, as it required both codes to be mashed together (to create a visualization on the screen & on the NeoPixel strip). Now, I had to begin picking a music choice and officially begin ‘DJ Tuning’! Instead of beat.aiff, I decided to use my favorite song, called ‘Slow Dancing in the Dark’ by Joji. Taking the link from Youtube, I used an online converter to change it into an MP3 file. 

                                   

     The longest part was combining the code together, as I had to constantly switch code in between the two tabs. I had to differentiate what went before void setup(), in void setup(), & everything that happened in void draw(). After spending nearly thirty minutes, I finally got the hang of it! The squares would jump depending on the volume of sound. If it was louder, it would go on the right side (vice versa). This looked something like this:

 
                       
                       

Code: 

import processing.serial.*;
import osteele.processing.SerialRecord.*;
import processing.sound.*;

Serial serialPort;
SerialRecord serialRecord;

SoundFile sample;
Amplitude analysis;

int W; //width of the tiles
int NUM = 30; //amount of pixels
int[] r = new int[NUM]; //red of each tile
int[] g = new int[NUM]; //red of each tile
int[] b = new int[NUM]; //red of each tile

void setup() {
size(640, 480);
W = width/NUM;

// You can use this syntax and change COM3 for your serial port
// printArray(Serial.list());
// serialPort = new Serial(this, "COM3", 9600);
// in MacOS it looks like "/dev/cu.usbmodem1101"
//or you can try to use this instead:

String serialPortName = SerialUtils.findArduinoPort();
serialPort = new Serial(this, serialPortName, 9600);
serialRecord = new SerialRecord(this, serialPort, 4);
serialRecord.logToCanvas(false);
rectMode(CENTER);

// load and play a sound file in a loop
sample = new SoundFile(this, "658586__josefpres__piano-loops-051-octave-up-short-loop-120-bpm.wav");
sample.loop();

// create the Amplitude analysis object
analysis = new Amplitude(this);
// analyze the playing sound file
analysis.input(sample);
}

void draw() {
println(analysis.analyze());
background(125, 255, 125);
noStroke();
fill(255, 0, 150);

// analyze the audio for its volume level
float volume = analysis.analyze();

// volume is a number between 0.0 and 1.0
// map the volume value to a useful scale
float diameter = map(volume, 0, 1, 0, width);
// draw a circle based on the microphone amplitude (volume)
circle(width/2, height/2, diameter);

//if the volume if greater than x, turn the middle pixel red
if (volume > 0.10) {

serialRecord.values[0] = 15; // which pixel we change (0-59)
serialRecord.values[1] = 255; // how much red (0-255)
serialRecord.values[2] = 0; // how much green (0-255)
serialRecord.values[3] = 0; // how much blue (0-255)
serialRecord.send(); // send it!
}
if (volume < 0.10){
serialRecord.values[0] = 15; // which pixel we change (0-59)
serialRecord.values[1] = 255; // how much red (0-255)
serialRecord.values[2] = 100; // how much green (0-255)
serialRecord.values[3] = 100; // how much blue (0-255)
serialRecord.send(); // send it!

}
}

Step 4: Have Fun

     Now, I successfully combined both elements (Processing & Arduino) together! The squares would change color when clicked depending on their location. However, I was thinking of another element to combine, one that was creative and made sense. Therefore, I thought about using the frequency analysis code, which tested the input volume sound and drew corresponding circles with it (the louder the noise, the bigger the circle). The sample code was through my own voice, however, I wanted it to be through the sound of the song. 

     Again, I now added a third element into the code. Other than the serialPort and amplitude analysis, I now had frequency analysis as well. This took a little bit of time to tweak, but it still worked in the end! Though, I noticed that the effects were sub-par. Now, the song could continue playing, with the mouse switching colors of the Neo-Pixel. Also, if the screen was clicked again, the background would change to white (as I set) & the frequency analysis would appear. The issue is that it is extremely choppy, as the frequency would sometimes freeze completely, then resume on its after around a second. I think this is due to multiple elements begin done simultaneously, which creates this problem. I think that this is hard to tweak, but still visually appealing. In conclusion, I think this was a great recitation and I learned a lot! I combined codes together, & got to play a beautiful melody. I look forward to the next recitation where Arduino interaction would translate onto the Processing screen!

Note: Needs a special folder to open and play correctly! There should be a folder with the code, followed by a sub-folder with the mp3/sound file. Only then, can Processing find the music and play it. Below, is the audio source. 

                         

Code:

import processing.serial.*;
import osteele.processing.SerialRecord.*;
import processing.sound.*;

Serial serialPort;
SerialRecord serialRecord;

SoundFile sample;
Amplitude analysis;

// declare an AudioIn object
AudioIn microphone;
// declare an Frequency analysis object to detect the frequencies in a sound
FFT freqAnalysis;
// declare a variable for the amount of frequencies to analyze
// should be a multiple of 64 for best results
int frequencies = 1024;
// Define the frequencies wanted for our visualization. Above that treshold frequencies are rarely atteigned and stay flat.
int freqWanted = 128;
// declare an array to store the frequency anlysis results in
float[] spectrum = new float[freqWanted];
// Declare a drawing variable for calculating the width of the
float circleWidth;

int W; //width of the tiles
int NUM = 60; //amount of pixels
int[] r = new int[NUM]; //red of each tile
int[] g = new int[NUM]; //red of each tile
int[] b = new int[NUM]; //red of each tile

void setup() {
size(640, 480);
W = width/NUM;

// You can use this syntax and change COM3 for your serial port
// printArray(Serial.list());
// serialPort = new Serial(this, "COM3", 9600);
// in MacOS it looks like "/dev/cu.usbmodem1101"
//or you can try to use this instead:

String serialPortName = SerialUtils.findArduinoPort();
serialPort = new Serial(this, serialPortName, 9600);
serialRecord = new SerialRecord(this, serialPort, 4);
serialRecord.logToCanvas(false);
rectMode(CENTER);

// load and play a sound file in a loop
sample = new SoundFile(this, "joji.mp3");
sample.loop();

// create the Amplitude analysis object
analysis = new Amplitude(this);
// analyze the playing sound file
analysis.input(sample);

//Frequency Analysis
// Calculate the width of the circles depending on how the bands we want to display.
circleWidth = width/float(freqWanted);
// create the AudioIn object and select the mic as the input stream
microphone = new AudioIn(this, 0);
// start the mic input without routing it to the speakers
microphone.start();
// create the Frequency analysis object and tell it how many frequencies to analyze
freqAnalysis = new FFT(this, frequencies);
// use the microphone as the input for the analysis
freqAnalysis.input(microphone);
}
void draw() {
println(analysis.analyze());
background(125, 255, 125);
noStroke();
fill(255, 0, 150);

// analyze the audio for its volume level
float volume = analysis.analyze();

// volume is a number between 0.0 and 1.0
// map the volume value to a useful scale
float diameter = map(volume, 0, 1, 0, width);
// draw a circle based on the microphone amplitude (volume)
circle(width/2, height/2, diameter);

//if the volume if greater than x, turn the middle pixel red
if (volume > 0.10) {

serialRecord.values[0] = 15; // which pixel we change (0-59)
serialRecord.values[1] = 255; // how much red (0-255)
serialRecord.values[2] = 0; // how much green (0-255)
serialRecord.values[3] = 0; // how much blue (0-255)
serialRecord.send(); // send it!
}
if (volume < 0.10) {
serialRecord.values[0] = 1; // which pixel we change (0-59)
serialRecord.values[1] = 255; // how much red (0-255)
serialRecord.values[2] = 100; // how much green (0-255)
serialRecord.values[3] = 100; // how much blue (0-255)
serialRecord.send(); // send it!
}
background(0);
for (int i=0; i<NUM; i ++) {
fill(r[i], g[i], b[i]);
rect(i * W + W/2, height/2, 10, 10);
}

if (mousePressed == true) {
int n = floor(map(volume, 0, 1, 0, 60));

r[n] = floor(random(255));
g[n] = floor(random(255));
b[n] = floor(random(255));

serialRecord.values[0] = n; // which pixel we change (0-59)
serialRecord.values[1] = r[n]; // how much red (0-255)
serialRecord.values[2] = g[n]; // how much green (0-255)
serialRecord.values[3] = b[n]; // how much blue (0-255)
serialRecord.send(); // send it!

// analyze the frequency spectrum and store it in the array
freqAnalysis.analyze(spectrum);
printArray(spectrum);
background(255);
fill(200, 0, 100, 150);
noStroke();

// draw circles based on the values stored in the spectrum array
// adjust the scale variable as needed
float scale = 1000;
for (int i=0; i<freqWanted; i++) {
circle(i*circleWidth, height/2, spectrum[i]*scale);
}
}
}

     In this recitation, we continued to use ‘Processing’ to build our existing knowledge of the program! We had to design a cute poster to document the IMA Fall 22 End-Of-Semester Show event. Below, I will explain the entire process from beginning to end. The piece was completed in a span of days, as I had to constantly improve the code and learn various intricate concepts. 

Finding the Reference

     To start out with, I had to brainstorm potential ideas to create the design. Using this link, I was able to find creative graphic design Pinterest references. Scrolling through several other artworks, I finally landed on one that I felt matched my requirements. It looks as the following: 

     In the recitation post, it stated that the piece should ‘be composed of at least three basic shapes’. For me, this was an easy piece to recreate, merely using circles and tweaking its colors, size, & relative position – or so I thought. During the recitation, I wanted to focus on creating everything in the actual poster first. First, I drew out an example of what the artwork should resemble on my Ipad (attached above). Then, minute by minute, I attempted to craft the piece! By the end of the recitation, I had a product like this: 

The code appears as follows: 

void setup(){

size(1024, 768);

background(255);

strokeWeight(2);

stroke(255);

}

void draw(){

println(mouseX, mouseY);

noStroke();

fill(#F26127);

//beginShape();

beginShape();

vertex(380,240);

bezierVertex(380,240, 800,0,730,400);

vertex(730,400);

bezierVertex(730,400,600,550,470,500);

vertex(470, 500);

bezierVertex(470,500,280,460,380,240);

endShape();

fill(#0C4DCB);

ellipse(400, 600, 300, 265);

noFill();

stroke(#276BF0);

ellipse(360, 200, 200, 150);

stroke(#F79350);

ellipse(600, 700, 200, 150);

noStroke();

fill(#F7C566);

ellipse(730, 530, 60, 50);

}

     In this code, I made the size ‘1024, 768’ as required by the prompt. I noticed that since some of the circles were pointy, so simple ellipses would not complete the job. Therefore, I learned the vertex & bezierVertex commands to plot the coordinates to their respective positions. To assist me with this step, I used the ‘println;’ command as it points out the X, Y coordinates depending on where I placed my cursor. I tried to make both of the circles pointy, however, I only managed to create one during the time span available. 

Task #1: Add a Fixed Pattern

     Next, I began working on the homework. The first step was to ‘repeat the design you made in a grid so that it covers the entire screen’. I thought this would be easy, but I forgot a crucial aspect – my original had no functions or parameters set. Therefore, I had to recode the diagram using functions instead of manually translating everything via ellipses. Watching some Youtube Videos & playing around with the Processing program, I eventually got the hang of it. 

Below, the code running shows the result:

void setup(){
size(1024, 768);
background(255);
strokeWeight(2);
stroke(255);
}
void draw(){
design();

}

void design() {
println(mouseX, mouseY);
noStroke();
fill(#F26127);
//beginShape();
beginShape();
vertex(380,240);
bezierVertex(380,240, 800,0,730,400);
vertex(730,400);
bezierVertex(730,400,600,550,470,500);
vertex(470, 500);
bezierVertex(470,500,280,460,380,240);
endShape();
fill(#0C4DCB);
ellipse(400, 600, 300, 265);
noFill();
stroke(#276BF0);
ellipse(360, 200, 200, 150);
stroke(#F79350);
ellipse(600, 700, 200, 150);
noStroke();
fill(#F7C566);
ellipse(730, 530, 60, 50);

}

     Everything was the same as the previous diagram, just, it is now officially a function that I can play around with by adding certain variables! To make it cover the entire screen, I created a variable called ‘design’. Then, I added variables ‘a’ & ‘b’ to the vertex and ellipses to make them controllable. Finally, I set the location by using the following:

design(300, 200);

design(-300, -200);

design(300, -200);

design(-300, 200);

design(0, 0);

     The design (0,0); now overlaps everything, being on the bottom. This is helpful as it was my original coordinate spot. So far, I have successfully completed step one! 

Task #2: Add a Random Pattern

     For step 2, I had to follow up the same function, but implement it using random sizes, random colors, random rotation, etc. I watched the link provided in the recitation blog, & continued to do a bit of research on my own. I even consulted a friend with knowledge of coding to correct some of my mistakes! He taught me that ‘Command-T’ auto-formats the code for me, which was neat to know. Now, my code looked like the following: 

void setup() {
size(1024, 768);
background(255);
strokeWeight(2);
stroke(255);
//for (int i = 0; i < 100; i++ ) {
// design(random(-300,300), random(-300,300));
}
void draw() {
//design(0, 0);
//design(300, 200);
//design(-300, -200);
//design(300, -200);
//design(-300, 200);

for (int i = 0; i < 100; i++ ) {
design(random(-300, 300), random(-300, 300));
}
}

void design(float a, float b) {
int color1 = color(random(200), random(200), random(200));
//println(mouseX, mouseY);
noStroke();
fill(color1);
//beginShape();
beginShape();
vertex(380 - a, 240 - b);
bezierVertex(380 - a, 240 - b, 800 - a, 0 - b, 730 - a, 400 - b);
vertex(730 - a, 400 - a);
bezierVertex(730 - a, 400 - b, 600 - a, 550 - b, 470 - a, 500 - b);
vertex(470 - a, 500 - a);
bezierVertex(470 - a, 500 - b, 280 - a, 460 - b, 380 - a, 240 - b);
endShape();
fill(#F26127);
ellipse(400 - a, 600 - b, 300 - a, 265 - b);
noFill();
stroke(#276BF0);
ellipse(360 - a, 200 - b, 200 - a, 150 - b);
stroke(#F79350);
ellipse(600 - a, 700 - b, 200 - a, 150 - b);
noStroke();
fill(#F7C566);
ellipse(730 - a, 530 - b, 60 - a, 50 - b);
}

     I added a ‘for’ loop to the original code. Then, I created a function to draw shapes, colors, etc.  By setting this as random, I could now generate continuous patterns that go on forever! To allow it to work, I called the function by adding ‘design(random(-300, 300), random(-300, 300));’. It was a huge learning curve, but I’m satisfied with the results. Below, I have recorded a video of the chaos! Here a little of how it went . . . 

  
                         

Task #3: Make it interactive

     In the above steps, I’ve successfully used ‘random’ & other creative function statements to make my design move. For this next step, the request is to make it interactive. I thought of the example we did in class, where clicking a space on the ‘Processing’ tab would result in a different output generated. Furthermore, we had to add text on top of the loop. To do this, I did background research again. To follow, I used the mapping function which re-maps a number from one range to another. Also, I used ‘Mouse X’ & ‘Mouse Y’ for mouse interactions. As a result, I made the colors follow my cursor & shift from light to dark depending on the part of the screen I was (the left-side is darker, right-side is brighter). After this, the text was relatively simple. However, I had to constantly tweak the color, sizing, & location of the text to make it appear centered. The end result looked something like this! 

                       

     Overall, I’m quite satisfied with the overall end product! It was a sharp learning curve that I needed to improve my coding. The most interesting functions I used had to be ‘random’, mouse interactions such as ‘MouseX’ & ‘MouseY’, & general mapping! I learned that there are many shortcuts you can achieve with code, & million ways to improve. While I am not on that level quite yet, I believe that significant progress has been made. I definitely struggled with plotting the coordinates itself as different forms require different inputs. Since I was so used to ellipses and rectangles, this made more abstract forms like ‘vertex’ & ‘curveVertex’ harder to understand/control. Still, with a bit of self-learning, this step can be accomplished. For the final, I plan to make something more aesthetically pleasing, combined with Arduino! 

 

     In this recitation, I worked individually to recreate a beloved picture using a new program called ‘Processing’! Each step of the process, from starting an idea, drawing it out on paper, to finally computing it with code, took dedication & patience. Below, I will document how the Halloween-spirited recitation went!   

Step 1: Choosing the Motif

     In this step, I had to choose an image. The prompt stated to pick one resembling ‘aesthetic quality (e.g. in light/shadow, composition, colors) and also a number of geometric features. Of course, the best choice would be my favorite Sanrio character, Kuromi! Her face and body are made up of simple shapes and structures, & I wished to recreate that. 

     Furthermore, in true Halloween fashion, there was a cup collaboration of Kuromi x Coco (a popular Chinese bubble tea brand) sold out across China. Being an avid fan, I of course didn’t miss the opportunity to get one. While it was extremely difficult, I managed to get two! To show my Halloween spirit & recreate a cute character, I decided to choose the Halloween Kuromi cup.

                    

Step 2: Draw Kuromi on Paper

     Now, the most dreadful part of the assignment appeared. As can be seen in many of my previous drawings, my artistic skills are questionable. Still, I attempted to recreate the Kuromi cup using graph paper! Below is my beautiful masterpiece. There were some features that were simply too hard, so I omitted them during the drawing. Some examples omitted were the Halloween Hat, Coco Logo, etc. 

Step 3: Draw Image Using Code

     In this step, I encounter a lot of difficulties and troubles. Therefore, I finished the code after class. To begin with, I coded its face using ellipses. Throughout the code, I worked my way down and made ellipses when possible. Eventually, I had its basic eyes, face, nose arms, & legs constructed. Ellipses took some time to understand, but they were very easy to maneuver after grasping. Next, I worked on the cup itself. Asking fellows, they recommended me to mask the cup using an ellipse on the bottom, with a rectangular base. By doing this, the bubble tea can maintain its original cylinder shape. Also, I learned the noStroke(); command, which allowed the circular line to disappear. This made my cylinder shape more natural. I then quickly inserted a rectangular straw into its respective position where I imagined the mouth. 

     Now, came the hard part. First, I wanted to make Kuromi’s mouth a happy face. However, this was not possible with simple shapes. Therefore, I learned the ‘arc’ command taught by Professor Margaret. It took time to just position it, but I managed to do it. I wanted it to have a curve, but it was challenging. To improvise, I simply resulted in a smirk put on her face. In many signature Kuromi poses, her smirk is very ironic. Therefore, I don’t believe that it was a bad choice. 

     When I wanted to make her collar & ears, I wanted to use a triangle shape. However, this proved to be too difficult for my current ability. I understood the six coordinates connected the three points, but it was still impossible to insert the right size along with the right position. After messing with the code for an hour, I settled on simple cute round ears. To add on, I inserted eyeshadow under her eyes. 

     Finally, my Kuromi looked near-complete. The last step of the process was to add some color! I learned some neat tricks, such as fill(); & noFill(); commands. By doing this, I quickly filled most of the colors. Though, this took forever as I made the mistake of not putting ‘//’ to note which body part each line correlated with. Visible in the code, I’ve tried to put ‘//’ in its corresponding place to avoid any coloring confusion. I had to test using fill (255); & fill (0);. These were the colors white and black, which allowed me to reorganize the colors. The color selector allowed me to choose pretty colors to fit Kuromi! 

               

Conclusion

     Overall, I felt that I successfully made the Kuromi x Coco cup! I chose it as it had simple shapes (circles, triangles, squares, rectangles, etc.) The process was time-taking & frustrating, but rewarding in the end. I think that without the paper drawing, designing Kuromi would’ve been harder. Though, I could really draw better & more accurately in the future. It’s important to translate shapes from photography to paper. Sometimes, it is almost impossible to compute and move everything. We must do what is possible and negate the minor details. I think that drawing in Processing is a good means of realizing my design. Throughout the process, I had to rethink my logic and forfeit the options that were unavailable. By doing this, I understood more about how developers felt & their daily struggles. Overall, this was a fun and relaxing recitation! This program is also very visually appealing and fun to tinker with. 

Code:

void setup() {
size(600, 600);
}
void draw() {
// Your drawing code goes here
fill(#9A2EE3);
ellipse(300,200,300,200);
fill(255);
ellipse(300,220,200,100);
fill(#FA92E9);
ellipse(300,235,20,10); //nose
fill(255);
ellipse(220,340,70,70);
fill(0); //left arm
fill(255); //lower left leg
ellipse(220,410,100,100);
fill(255); //lower right leg
ellipse(380,410,100,100);
fill(#EDAB26);
rect(265, 350, 70, 100); // cup
noStroke();
ellipse(300,438, 70,70);
stroke(1);
fill(255);
ellipse(300,345, 80,40);
fill(255); //outer eyes
ellipse(260,210, 30,40);
fill(255); //innner left eye
ellipse(335,210, 30,40);
arc(290, 250, 50, 10, 0, HALF_PI);
fill(0);
ellipse(260,210, 10, 20);
ellipse(335,210, 10, 20);
fill(#9A2EE3);
ellipse(205,120, 80, 80); //ears
ellipse(385,120, 80, 80);
rect(200, 295, 200, 13); //collar
fill(255);
rect(295, 255, 13, 150); //simple straw
fill(255);
ellipse(380,340,70,70);
//last part, add eyeshadow
fill(#FA92E9);
ellipse(248, 228, 20, 10);
ellipse(348, 228, 20, 10);
}