Author: Guangbo

Project Title

“Magic Brush” (or “Easy Drawingboard”)

Project Statement of Purpose

Deriving from our Midterm project “Duet Beat” which shows a sense of care for human, we are particularly focused on the idea of accessibility and availability. After seeing the Xbox Adaptive controller which Rudi has told me about, we decided to make a controller that can help people with disabilities to create visual arts easily. In general, we would like to create a device that has joysticks, buttons, and slide buttons that allows people with disabilities to control the drawing brush. 

Project Plan

1. Brainstorm and sketch. In this stage, we have to figure out exactly what functions we need, for example, the size of brush, type of brush, color pick, filters. In addition, we have to figure out what are the functions that ordinary people could easily use but people with disabilities could not. (1 day)
2. Self-inspection. Before actually building the device, we have to pretend we are people with disabilities and see if they feel comfortable using the gadgets that we proposed before. (1 day)
3. Building the device. When building it, we should pay attention to the what types of device can make a balance between functionality and accessibility. (1 day)
4. User test. Again, we have to pretend we are people with disabilities and try to find out how user friendly the device is. We can also invite other people to test it. (2 days)
5. Finalization. After we collected suggestions for improvement, we have to choose between improve the prototype or to start overall again. (1 or two days)

Context and Significance

My preparatory research is about accessibility and availability. My definition of interaction is that, an interactive design means 1) two or more actors, 2) cognitive systems, 3) the process of input, processing, and output, 4) proper feedback so as not to confuse the user, and 5) available to everyone. And the projects I explored that align with my definition of interaction are the camera function on iPhone and other Apple products. Our project involves two thinking actors, receives input, processes signals, and produces output, and more importantly, it is available for almost everyone. Therefore, our drawingboard perfectly align with my definition of interaction. Moreover, it shows a sens of care for the user no matter who they are.

However, to make our project truly accessible for everyone, it is best for us to invite people with disabilities to test it.

Drawing Board

It was not hard to connect the circuit and modify the code, since I had experience using them in previous classes. However, I construed the instruction as making a circle that moves, instead of making a drawing brush, which lead to the following video.

After consulting with one of the fellows, I realized that I should’ve made a brush that leaves continuous traces on the screen. So I modified the code: delete the “background(0)” from void draw section, and then made the circle smaller, which lead to the following outcome.

The traces that the circle leaves is not continuous enough. I think that is because the rate at which the potentiometer sends signal exceeds the the frame rate.

Musical Instrument

My midterm project was mainly about buzzers so it did not take me much time to figure out how a buzzer works. However, I couldn’t figure out how the duration works here. I expected to work even without duration. But as I deleted the duration function, it immediately stopped working.

This is a randomly moving circle, using codes taught in the previous class. Once you press any key on the keyboard, the circle will stop. This animation involves only basic movement and interaction.

Initially, I wanted to use my previous work which contains many more circles and make them all move randomly and bounce against each other. I also wanted it to be that wherever my mouse is, the circles would try to avoid the mouse. However, when I started to code, I found it extremely difficult to realize what I imagined because I hadn’t learned enough knowledge about random movement and collision. Therefore, I lowered my expectation and started with only one circle and simpler interaction. I recalled what’s taught in the last class about a single circle bouncing and the keyPressed function, and then built them into my animation.

A.

My initial definition of interaction is simple and looks like the definition found in a dictionary. I think an interactive process requires three key elements in order to qualify as interaction, which are 1) two or more actors, 2) cognitive systems, and 3) “listening, thinking and speaking”.  As I walked through my midterm project, some more specific ideas about interaction came to my mind.

For example, I started to pay much more attention to the feedback given from my device. My device Duet Beat uses a heart rate sensor to measure the user’s mood and it takes a while to get a heart rate reading. While the sensor is working, the user has to know what’s going on with the device otherwise he/she would be clueless what’s happening and would think the device is broken. Therefore, I added an indicator to the device –  an white LED which blinks while the sensor is working. The outcome is satisfying . During the demonstration, most users got the idea of the indicator and no one thought the device went wrong. In spite of that, I also noticed the idea of accessibility. Our device was designed for everyone, which means people with disabilities could also use our device well enough. I decided that accessibility had become one of my most important parts to evaluate interactive designs.

B. 1

Apple Inc. is one of my favorite tech company whose chief designer Jony Ive I admire the most. Every design that comes from Apple is my role model of interactive designs for its simplicity, accessibility, and availability. Take one simple function on the newest iPhone for example.

People tend to mute their phones all the time for whatever reason it may be, and thus the your cellphone loses its main tool to give feedback. However, on the newest iPhone uses another tool for feedback. Every time you click on the white button to take a photo, the phone would vibrate a little bit using its TapticEngine to notify you that you just successfully took a photo, instead of merely click sound. The TapticEngine can even simulate the kind of feedback that you actually get from a physical push button. This vibration function is nowhere to be seen on other phones I’ve used, and it perfectly fits my definition of interaction, especially the feedback part. That process involves two cognitive actors: iPhone and user; the iPhone receives a touch input from the user, and process it, and gives the proper feedback to notify the user. 

B. 2

Another thing I like about Apple is that the company’s design has the best user-friendliness in the industry for people with disabilities.

I was touched every time I watch this commercial because Apple has truly made newest technologies available to everyone. Every function in every Apple product has been carefully considered and tested for its accessibility. I know that not only because that commercial, but also because I read some blog posts about why most blind people choose iPhone instead of other cellphones. On those posts, almost every person with eyesight problems says iPhone has the best screen reader called Voice Over so that they can use their iPhone just as well as others even without looking at the screen. Those interactive designs from Apple for people with disabilities cover both on the feedback part of my definition, but also the accessibility part.

B. 3

To find an interactive project that differs from my definition of interaction is kind of tricky. How can I tell why  a project is not interactive enough in my sense if I already treat it as an interactive project? Therefore, I choose to research on a project that other people might think interactive while I don’t, which is a pair of Bluetooth headphones I just bought.

People may think it is a interactive design: it receives your input from you cellphone, processes the audio, and then plays it for you. But I do not think it is interactive enough. For example, it took me ten minutes to figure out how to plug it to my ears because there is neither instructions nor signs to tell you what’s top and what’s the bottom. In addition, I did not know anything about how you can tap it to pause music until I downloaded an app with instructions to my phone.

That being said, although it is an expensive headphone with many high-tech features, indeed interactive from it’s designer’s perspective, it is not user-friendly at all. It lacks proper instructions or signs or feedback and the physical design is not intuitive enough. It runs basic interactive functions but users would take pains to figure out how to interact with it.

C.

Now it’s time to establish an advanced version of my definition of interaction. With what I said above, the new definition seems clear: an interactive design means 1) two or more actors, 2) cognitive systems, 3) the process of input, processing, and output, 4) proper feedback so as not to confuse the user, and 5) available to everyone. In general, what I added to my previous definition is that, an interactive design should show its humanitarian care and user friendliness. As my favorite designer Jony Ive says, :”What we make testifies who we are. People can sense care and can sense carelessness. This relates to respect for each other and carelessness is personally offensive” and “The inside of the phone we spent so much time on & it’s something that 99% of you will never see-because it’s the right thing.” It is always worthwhile to spend much time on your project to make something that may seem invisible to anyone but actually make your device easier to use for everyone.

To be honest, I chose this image because it seemed simple enough. When I saw the list of recommended sources, I suddenly realized Bauhaus School of Arts would be my top choice because 1)I didn’t know much about processing so I could only create something simple and 2) Bauhaus, as far as I am concerned, is the role model in the artist world for simplicity. Then I clicked in to the Bauhaus website and searched for images within my capacity. And at the bottom of the first page, I found “Several Circles” by Russian artist Vasily Kandinsky –  it consists mostly of circles, seeming easy enough. 

At this initial stage of learning Processing, I didn’t want to bring too much trouble to myself so I decided to directly emulate my motif, which I thought would be a simple task. To emulate this, the ellipse function is the main tool for me. So I began to draw circles using ellipse function. With every circle, I carefully adjusted its size/color/location by changing the parameters, which turned out to be a painful task. On average I spent 2 minutes on each circle.

As the process continued, I realized that instead of absolute location, I may use relative location to make my job easier. So I decided to add annotations in the codes of each circle to indicates its location in the motif. And then when I drew the next circle, I could easily confirm its location and size by comparing to the last circle I drew.

In addition, when I kept drawing, I realized that RGB color is not enough to represent the original color – I also needed transparency. So I asked Rudi how to make that happen and he told me about the alpha value, which indicates the transparency.

Due to lack of time, I only accomplished 50% of the original work. If I had more time, it would look similar to the original motif in general since the main point of that art is circles. However, I noticed that Processing could not realize some subtle things in the original work such as the blurred margins, although it is a good tool to realize the design in general.