Reflection of Interactive Media in IC

In Interactive Media Design this semester, we’ve worked with the processing tool for software as well as an arduino for hardware. The course enabled me to gain much insight about how software can be translated into hardware. The simple, yet powerful device has shown me the possibilities of the interaction between hardware and software through a series of tasks that we’ve practiced during our labs.
In the first week, we were assigned a seemingly simple task. We were told to simulate a geometric drawing, using only the processing software. I came across many difficulties trying to get the right coordinates and I felt restricted, since I’m used to designing and drawing with Adobe Photoshop. In this practice, I learned to use simple commands such as rect(); fill(); background(); etc, I was able to create the simple geometric image, which consists of thick lines, and colored rectangles. I have faced a number of challenges during this process of coding. For example, after I already created all the lines and parameters, I realized my image was too small, so I had to increase the size of the image, and recalculate all the dimensions of my lines. It was also a challenge to create the exact size for each and every rectangle apparent in my image file. The code above shows the process I used to create the above image.
As we progressed through this course, I’ve learnt to make my programs interact with the cursor. For example we first created a pattern of eyeballs on the screen. Then, we were told to make the pupils of the eye move along with the mouse, however the user defined the location. In this practice I’ve learned how a more interactive program can be beneficial for all users.
As we progressed through the semester, we many more interactive programs with processing, such as a paint/drawing application as well as a program to animate any given picture. For a kind of quiz, we were asked to create a fan, and we learned the rotating function and how it applies to the objects we draw. First we created lines to draw a grid for the squares. Then we drew three squares with different colors that are rotated evenly in the frame. Afterwards, we created an animation to simulate a fan motion. I got a little more creative with the process and made the fan increase it's velocity over time, and increased in size over time as well. Using the mode function, we I was able to make the rotating fan increase in velocity and size, and then after a condition - decrease in velocity and size as well.
For our final project, we were asked to do a task that I thought was impossible to do in the given time constraint – to create a game. At first I had many ideas in my head which I discussed with my partner, Josue. Then we scratched out all those ideas realizing how hard it actually was to create. Finally, we settled on creating an interactive synthesizer, or piano keyboard where the user could press any key on the keyboard which would output a specific tone.
In the last days of our course, we combined the arduino to the processing program to create interaction between software and hardware. For example, hovering a mouse over the processing program would execute the light connected to the arduino board to turn on. For our final project, we created a game controller out of the arduino board using only dials – one dial would control the movement of left and right, while another dial would control the movement of up and down. Using this code, we could apply the controlling mechanism for any program that allowed a movement interaction.
The Interactive Media Design course has been a breath of fresh air for me, since we were actually able to gain practical knowledge through our labs, instead of lectures after lectures that I have to sit through for every other class in Ming Chuan. This has been one of my favorite classes in the three years that I’ve been studying in Ming Chuan, and I hope other classes may adapt to becoming more “interactive” as well.

LED Show

HW12_4: Arduino Piano Show

http://www.youtube.com/watch?v=YpqgxUNdRMY

HW9 Processing Project

Link to the Project:

http://ss24.mcu.edu.tw/~s6470053/project/

HW 9: IM Synthesizer Poster

Homework 7: Some Cases Studies

Brian Houng 96470026
Java Applet Link: http://ss24.mcu.edu.tw/~s6470026/Homework7/

In this processing code, we learned the rotating function and how it applies to the objects we draw. First we created lines to draw a grid for the squares. Then we drew three squares with different colors that are rotated evenly in the frame. Afterwards, we created an animation to simulate a fan motion. I got a little more creative with the process and made the fan increase it's velocity over time, and increased in size over time as well. Using the mode function, we I was able to make the rotating fan increase in velocity and size, and then after a condition - decrease in velocity and size as well.

HW: 6 Animation Effects

Screenshot:

Java Applet:

Commentary:

In this exercise, we used our knowledge of manipulating images to create a program that would simulate animation. With that said, I picked five different effects to show what my program to do. My program can translate, zoom in, zoom out, fade in, and fade out my saved image. These effects could also be applied to any image that I direct in the program; as long as the image is saved in the same folder as the program. The challenging part of this program was thinking of how I could simulate the effects that I chose. Then, I had to think about how to write funtion's code in reverse order, so I could simulate both zoom in and zoom out, fade in and fade out functions.

Homework 5: Image Applications

IMAGE:

Java Applet: http://icac.no-ip.org/brian/applet3/

Commentary: This exercise lets us use the integrated UI to control images displayed on the screen. When we click on previous, the application will decrease the incrementation by one allowing us to open the previous image. When we click on next, the application will increase the incrementation by one allowing us to open the next image. The challenge of this application was knowing where to put each code. Some of the codes belonged in the setup function; some codes belonged in the draw function; the rest of the codes belonged outside for global use. I also had problems trying to solve the right dimensions of the functions as well. To solve this problem, I used println to display where the mouse cursor dimensions were. Another problem I encountered was lag and slow application. To solve this problem, I used frameRate() command and set the value to 10. This allowed a smoother interaction between input and output feedback.

Homework 4: Save Function

Save Function:


Java applet link: http://icac.no-ip.org/brian/applet2/

In this exercise, we added a save function to our paint tool. The save function itself was easy, however the challenging part was being able to save multiple images without overwriting the previous saved image. For example, if I pressed the save button once, it would create a new file as "img.jpeg." However, if I saved a new image, it would also save as "img.jpeg" overwriting the original file. To resolve this problem, I created a new integer x, and saved the file format as save("img"+x+".jpeg") with x++;. This command would allow me to add a new number to each image that I save.

Homework 3: Interactive with mouse

The Java applet link can be found here:
http://icac.no-ip.org/brian/applet/



In this exercise, we've used a number of new tools to create an interactive experience using the mouse. In the first exercise, we programmed certain graphics to follow the movement of the mouse cursor with some constraint. In the second exercise, we tried to simulate Microsoft Paint, creating special functions such as changing the stroke size, stroke color, clearing the board, and an eraser tool. The last exercise was especially challenging since there are many steps to creating it. For example, we first had to set up our own simple UI, by creating boxes with different functionalities. Another challenge for me was designating the dimensions for each box. Since many of the dimensions were off, I had to work through a trial-and-error process to get the boxes to get what I wanted them to do.

Homework 2: Repetition

(a)






(b)









(c)

(d)

In Homework 2, we've covered nested loops as well as repetition. In the first exercise, we've created a program which created random sized squares with random colors. After that, we created a loop to simulate a change every second. In the first two exercises, I've learned how to use the loop(), draw(), setup(), and random() functions. In the third exercise, we've used codes from the pdf file and modified it to create our own nested loop. With the nested loop exercise, I've created a finer gradient on a larger sized sketchboard. In the fourth exercise, I combined the knowledge of the previous exercises to create a pattern. With nested loop, you can create all types of patterns.

HW1: Geometric Painting with Processing

1st: Original File

2nd: Simulation File with Photoshop

3rd: Processing File

Code:

size(400, 400);background(255);
fill(204);rect(0, 0, 40, 60);fill(255, 0, 0);rect(0, 60, 40, 260);fill(240);rect(0, 320, 40, 400);fill(240);rect(40, 0, 60, 60);fill(35, 30, 59);rect(40, 60, 60, 180);fill(204);rect(40, 240, 60, 400);fill(238, 203, 66);rect(100, 0, 160, 60);fill(68, 92, 174);rect(100, 240, 160, 80);fill(240);rect(100, 320, 400, 80);fill(240);rect(260, 0, 400, 20);fill(54);rect(260, 20, 80, 110);fill(238, 203, 66);rect(260, 130, 80, 110);fill(204);rect(260, 240, 80, 80);fill(204);rect(340, 20, 320, 300);
strokeWeight(8);line(40, 0, 40, 400);line(100, 0, 100, 400);line(0, 320, 400, 320);line(0, 60, 260, 60);line(260, 0, 260, 320);line(40, 240, 400, 240);line(260, 20, 400,20);line(340, 20, 340, 320);line(260, 280, 340, 280);line(260, 132, 340, 132);smooth();

What I've Learned: In this practice I have learned the basics of using the processing program. By grabbing an image online using the keywords "geometric painting," I was able to simulate the same image using a processing code. Using simple commands such as rect(); fill(); background(); etc, I was able to create the simple geometric image, which consists of thick lines, and colored rectangles. I have faced a number of challenges during this process of coding. For example, after I already created all the lines and parameters, I realized my image was too small, so I had to increase the size of the image, and recalculate all the dimensions of my lines. It was also a challenge to create the exact size for each and every rectangle apparent in my image file. The code above shows the process I used to create the above image.